vue-cli optimiert die Ladezeit

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen für die Ladezeit von Vue-Cli vorstellen. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Die

Projektanforderungen meines letzten Praktikums stellten nicht viele Anforderungen dar, daher habe ich etwas über die Projektoptimierung gelernt. Der Hauptgrund war, dass der erste Bildschirm zu langsam geladen wurde.

Auffinden großer Dateien

Wir können das Webpack-Visualisierungs-Plug-in

verwenden, um die Größe der Projekt-JS-Datei anzuzeigen und Lösen Sie dann gezielt das Problem, dass die JS-Datei zu groß ist. Webpack Bundle Analyzer

Installieren

npm install --save-dev webpack-bundle-analyzer

Im Webpack wie folgt einstellen, dann

wird standardmäßig die 8888-Port-Anzeige verwendet . npm run dev

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
 plugins: [
  new BundleAnalyzerPlugin()
 ]
}

JS-Dateien werden bei Bedarf geladen

Ohne diese Einstellung werden beim ersten Mal alle JS-Dateien der gesamten Website geladen Der Bildschirm des Projekts wird geladen, daher ist es eine gute Optimierungsmethode, die JS-Datei zu zerlegen und den JS der Seite zu laden, wenn Sie auf die Seite klicken.

Was hier verwendet wird, ist das verzögerte Laden von Vue-Komponenten. Verwenden Sie in router.js nicht die Importmethode, um Komponenten einzuführen, sondern require.ensure.

import index from '@/components/index'
const index = r => require.ensure( [], () => r (require('@/components/index'),'index'))
//如果写了第二个参数，就打包到该`/JS/index` 的文件中。
//不写第二个参数，就直接打包在`/JS` 目录下。
const index = r => require.ensure( [], () => r (require('@/components/index')))

Verwenden Sie cdn

Ersetzen Sie beim Verpacken Vue, Vuex, Vue-Router, Axios usw. direkt durch inländisches Bootcdn Eingeführt in index.html im Stammverzeichnis.

Externals in den Webpack-Einstellungen hinzufügen und Bibliotheken ignorieren, die nicht gepackt werden müssen.

externals: { 
 'vue': 'Vue', 
 'vue-router': 'VueRouter', 
 'vuex': 'Vuex', 
 'axios': 'axios' 
}

Verwenden Sie cdn zum Importieren in index.html.

<script src="//cdn.bootcss.com/vue/2.2.5/vue.min.js"></script> 
<script src="//cdn.bootcss.com/vue-router/2.3.0/vue-router.min.js"></script>
<script src="//cdn.bootcss.com/vuex/2.2.1/vuex.min.js"></script> 
<script src="//cdn.bootcss.com/axios/0.15.3/axios.min.js"></script>

Platzieren Sie die JS-Datei am Ende des Körpers

Standardmäßig wird js in den erstellten Index eingeführt.html Es ist im

Kopfer.

Verwenden Sie das Plug-in „html-webpack-plugin“ und ändern Sie den Wert von „inject“ in „body“. Sie können die js-Einleitung am Ende des Hauptteils einfügen.

var HtmlWebpackPlugin = require('html-webpack-plugin');
new HtmlWebpackPlugin({
   inject: 'body',
})

Komprimieren Sie den Code und entfernen Sie die Konsole

Verwenden Sie das UglifyJsPlugin-Plug-in, um den Code zu komprimieren und die Konsole zu entfernen.

new webpack.optimize.UglifyJsPlugin({
 compress: {
  warnings: false,
  drop_console: true,
  pure_funcs: ['console.log']
 },
 sourceMap: false
})

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

vue reduziert die Anzahl der Serveranfragen

Wie Vue Caching nutzt

Das obige ist der detaillierte Inhalt vonvue-cli optimiert die Ladezeit. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!