Heim > Web-Frontend > js-Tutorial > Hauptteil

Optimieren Sie die Ladezeit des ersten Bildschirms von vue-cli

php中世界最好的语言
Freigeben: 2018-06-12 10:39:00
Original
1119 Leute haben es durchsucht

Dieses Mal werde ich Ihnen vorstellen, wie Sie die Ladezeit des ersten Bildschirms von vue-cli optimieren können. Das Folgende ist ein praktischer Fall .

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
Nach dem Login kopieren

wird im Webpack wie folgt eingestellt und dann wird npm run dev standardmäßig auf Port 8888 angezeigt.

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

JS-Dateien werden bei Bedarf geladen

Ohne diese Einstellung werden alle JS-Dateien der gesamten Website beim ersten Bildschirm von geladen Das Projekt wird daher geladen. Es ist eine gute Optimierungsmethode, die JS-Datei zu zerlegen und das JS einer bestimmten Seite zu laden, wenn auf die Seite geklickt wird.

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')))
Nach dem Login kopieren

Verwenden Sie cdn

Ersetzen 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' 
}
Nach dem Login kopieren

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>
Nach dem Login kopieren

Platzieren Sie die JS-Datei am Ende des Körpers

Standardmäßig wird in der index.html nach dem Build js eingeführt Kopfzeile.

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',
})
Nach dem Login kopieren

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
})
Nach dem Login kopieren

Vorerst wurden nur diese Optimierungsmethoden gefunden.

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:

Slots/Scope-Slots in Vue in praktischen Projekten verwenden

Was sind die Vorsichtsmaßnahmen für die Verwendung von Dom? mit Angular2

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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage