vue-cli-Projektoptimierungsmethode – Verkürzen Sie die Ladezeit des ersten Bildschirms

In diesem Artikel wird hauptsächlich die Optimierung des Vue-Cli-Projekts vorgestellt, um die Ladezeit des ersten Bildschirms zu verkürzen. Freunde, die es benötigen, können darauf verweisen.

Die Anforderungen des jüngsten Praktikumsprojekts sind nicht groß, daher habe ich davon erfahren Projektoptimierung, hauptsächlich Der erste Bildschirm wird zu langsam geladen.

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 wie folgt im Webpack eingestellt, dann npm run dev Von Standardmäßig wird es 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 erscheint der erste Bildschirm des Projekts Beim Laden werden alle JS-Dateien der gesamten Website geladen. Daher ist es eine gute Optimierungsmethode, die JS-Dateien aufzuteilen und die 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')))

Bei Verwendung von CDN

Beim Verpacken, Vue, Vuex, Vue-Router , Axios usw. verwenden inländisches Bootcdn und führen es 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' 
}

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>

Fügen Sie die JS-Datei am Ende des Körpers ein

Standardmäßig build In der folgenden index.html wird js im Header eingeführt.

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 entfernen

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

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

Das oben Gesagte habe ich für Sie zusammengestellt. Ich hoffe, es wird Ihnen in Zukunft hilfreich sein.

Verwandte Artikel:

Tutorial zur Verwendung des WeChat-Applet-Blocks

Detaillierte Erläuterung der poststatischen PHP-Bindungsanalyse und -Anwendung

Detaillierte Erläuterung der Verwendung des WeChat-Applets wx:for und wx:for-item

Das obige ist der detaillierte Inhalt vonvue-cli-Projektoptimierungsmethode – Verkürzen Sie die Ladezeit des ersten Bildschirms. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!