Comment raccourcir le temps de chargement du premier écran dans le projet vue-cli pour améliorer l'efficacité

Ce dont parle cet article, c'est comment raccourcir le temps de chargement du premier écran pour améliorer l'efficacité du projet vue-cli. Les codes sont très détaillés. Les amis dans le besoin peuvent y jeter un œil.

Principalement parce que le premier écran se charge trop lentement.

Localisation de fichiers volumineux
Nous pouvons utiliser le plug-in de visualisation Webpack Webpack Bundle Analyzer pour afficher la taille des fichiers js du projet, puis résoudre délibérément les fichiers js trop volumineux.
Installation

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

Définissez comme suit dans webpack, puis npm run dev sera affiché sur le port 8888 par défaut.

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

Les fichiers JS sont chargés à la demande
Sans ce paramètre, tous les fichiers JS de l'ensemble du site seront chargés lors du chargement du premier écran du projet, donc séparez les fichiers JS et chargez les à nouveau lorsqu'on clique sur une certaine page. Le JS pour cette page est une excellente méthode d'optimisation.
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')))

Lors de l'utilisation de cdn
pour l'empaquetage, remplacez vue, vuex, vue-router, axios, etc. par bootcdn domestique et introduisez-les directement 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'  
}

Utilisez cdn pour importer dans 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>

Placez le fichier JS à la fin du corps
Par défaut, dans l'index.html construit, js est introduit dans l'en-tête.
Utilisez le plug-in html-webpack-plugin pour modifier 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 le console
Utilisez le plug-in UglifyJsPlugin pour compresser le code et supprimer la console.

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

Recommandations associées :

Comment accélérer et optimiser le code vue-cli

Un exemple détaillé de vue-cli configuration optimisée du webpack

Comment optimiser le projet Vue

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!