Optimieren Sie die Ladezeit des ersten Bildschirms von vue-cli

Dieses Mal werde ich Ihnen vorstellen, wie Sie die Ladezeit des ersten Bildschirms von vue-cli optimieren können. Das Folgende ist ein praktischer Fall .

Auffinden großer Dateien

Wir können das Webpack-Visualisierungs-Plug-in Webpack Bundle Analyzer 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.

Installation

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

wird im Webpack wie folgt eingestellt und dann wird npm run dev standardmäßig auf Port 8888 angezeigt.

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

JS-Dateien werden bei Bedarf geladen

Ohne diese Einstellung werden alle JS-Dateien der gesamten Website beim ersten Bildschirm von geladen Das Projekt wird daher geladen. Es ist eine gute Optimierungsmethode, die JS-Datei zu zerlegen und das JS einer bestimmten Seite zu laden, wenn auf die Seite geklickt wird.

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. durch inländisches Bootcdn und führen Sie sie direkt ein 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' 
}

wird mit cdn in index.html importiert.

<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 in der index.html nach dem Build js eingeführt Kopfzeile.

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
})

Vorerst wurden nur diese Optimierungsmethoden gefunden.

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:

Slots/Scope-Slots in Vue in praktischen Projekten verwenden

Was sind die Vorsichtsmaßnahmen für die Verwendung von Dom? mit Angular2

Das obige ist der detaillierte Inhalt vonOptimieren Sie die Ladezeit des ersten Bildschirms von vue-cli. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!