De quelles manières vue-cli peut-il réduire le temps de chargement du premier écran ?

Cette fois, je vais vous montrer comment vue-cli peut raccourcir le temps de chargement du premier écran. De quelles manières vue-cli peut raccourcir le temps de chargement du premier écran ? Les

de mon récent stage n'avaient pas beaucoup d'exigences, j'ai donc appris l'optimisation du projet. La raison principale était que le premier écran se chargeait trop lentement.

Localisation de fichiers volumineuxNous pouvons utiliser le plug-in de visualisation webpack

Webpack Bundle Analyzer

Installer

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

npm run dev

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

Les fichiers JS sont chargés à la demandeSans ce paramètre, tous les fichiers JS de l'ensemble du site seront chargés au premier L'écran du projet est chargé, c'est donc une bonne méthode d'optimisation pour démonter le fichier JS et charger le JS de la page lorsque vous cliquez sur la page.

Ce qui est utilisé ici, c'est le chargement paresseux des composants de vue. Dans router.js, n'utilisez pas la méthode d'importation pour introduire des composants, utilisez 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')))

Utiliser cdnLors de l'emballage, remplacez vue, vuex, vue-router, axios, etc. par un bootcdn domestique directement introduit dans index.html dans le répertoire racine.

Ajoutez des éléments externes dans les paramètres du webpack et ignorez les bibliothèques qui n'ont pas besoin d'être empaquetées.

externals: { 
 'vue': 'Vue', 
 'vue-router': 'VueRouter', 
 'vuex': 'Vuex', 
 'axios': 'axios' 
}

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

Placez le fichier JS à la fin du corps Par défaut, js est introduit dans l'index.html construit. dans le

er. Utilisez le plug-in html-webpack-plugin et modifiez la valeur de inject en body. Vous pouvez mettre l'introduction js à la fin du corps.

var HtmlWebpackPlugin = require('html-webpack-plugin');
new HtmlWebpackPlugin({
   inject: 'body',
})

Compressez le code et supprimez la consoleUtilisez le plug-in UglifyJsPlugin pour compresser le code et supprimez la console.

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

Lecture recommandée :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!