Wie kann vue-cli die Ladezeit des ersten Bildschirms verkürzen?

Dieses Mal zeige ich Ihnen, wie Vue-Cli die Ladezeit des ersten Bildschirms verkürzen kann. Stehen Sie auf und werfen Sie einen Blick darauf. 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 DateienWir 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

Install

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

wird im Webpack wie folgt eingestellt und dann wird

auf Port 8888 angezeigt standardmäßig.

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

npm run dev

JS-Dateien werden bei Bedarf geladenOhne diese Einstellung werden alle JS-Dateien der gesamten Website beim ersten Bildschirm von geladen Das Projekt wird geladen, daher ist es eine gute Optimierungsmethode, die JS-Datei zu zerlegen und das 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 cdnErsetzen 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örpersStandardmäßig wird in der index.html nach dem Build js eingeführt

Kopf

ähm. 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',
})

Code komprimieren und Konsole entfernenVerwenden Sie das UglifyJsPlugin-Plug-in, um 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:

So teilen Sie den Seitencode auf und laden ihn bei Bedarf

Implementieren Sie die Same-Origin-Richtlinie von js und domänenübergreifend Ausführliche Erläuterung der Zugriffsschritte

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