So optimieren Sie die Ladezeit des ersten Bildschirms in Vue

Dieses Mal zeige ich Ihnen, wie Sie die Ladezeit des ersten Bildschirms in Vue optimieren. Was sind die Vorsichtsmaßnahmen zur Optimierung der Ladezeit des ersten Bildschirms in Vue? , lass uns einen Blick darauf werfen.

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 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.

Installieren

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

Im Webpack wie folgt einstellen, dann npm run dev wird standardmäßig die 8888-Port-Anzeige verwendet .

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:

So rufen Sie untergeordnete Komponenten in Angular auf

So übermitteln Sie Daten im JSON-Format an den Server

So verwenden Sie den WeChat Mini-Programmblock

Das obige ist der detaillierte Inhalt vonSo optimieren Sie die Ladezeit des ersten Bildschirms in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!