Heim > Artikel > Web-Frontend > 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!