So verkürzen Sie die Ladezeit des ersten Bildschirms im vue-cli-Projekt, um die Effizienz zu verbessern

In diesem Artikel geht es darum, die Ladezeit des ersten Bildschirms zu verkürzen, um die Effizienz im Vue-Cli-Projekt zu verbessern. Freunde in Not können einen Blick darauf werfen.

Hauptsächlich, weil der erste Bildschirm zu langsam lädt.

Große Dateien finden
Wir können das Webpack-Visualisierungs-Plug-in Webpack Bundle Analyzer verwenden, um die Größe der Projekt-JS-Dateien anzuzeigen und dann übermäßig große JS-Dateien gezielt aufzulösen.
Installation

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

Stellen Sie es im Webpack wie folgt ein, 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 geladen, wenn der erste Bildschirm des Projekts geladen wird, also trennen Sie die JS-Dateien und laden Sie die Seite Wenn Sie auf eine bestimmte Seite klicken, ist JS eine gute Optimierungsmethode.
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')))

Wenn Sie cdn
zum Verpacken verwenden, ersetzen Sie vue, vuex, vue-router, axios usw. durch inländische bootcdn und führen Sie sie direkt in index.html im Stammverzeichnis ein.

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 erstellten index.html js im Header eingeführt.
Verwenden Sie das Plug-in „html-webpack-plugin“, um den Wert von „inject“ in „body“ zu ändern. 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 Code zu komprimieren und die Konsole zu entfernen.

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

Verwandte Empfehlungen:

So beschleunigen und optimieren Sie den Vue-CLI-Code

Detailliertes Beispiel einer für Vue-CLI optimierten Webpack-Konfiguration

So optimieren Sie das Vue-Projekt

Das obige ist der detaillierte Inhalt vonSo verkürzen Sie die Ladezeit des ersten Bildschirms im vue-cli-Projekt, um die Effizienz zu verbessern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!