méthode d'optimisation du projet vue-cli - raccourcir le temps de chargement du premier écran

Cet article présente principalement l'optimisation du projet vue-cli pour raccourcir le temps de chargement du premier écran. Les amis qui en ont besoin peuvent s'y référer

Les exigences du récent projet de stage ne sont pas nombreuses, j'en ai donc pris connaissance. optimisation du projet, principalement 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 du fichier js du projet, et puis résolvez délibérément le problème du fichier js trop volumineux.

Installez

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

Définissez comme suit dans le webpack, puis npm run dev Il 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, le projet Lorsque le premier écran est chargé, tous les fichiers JS de l'ensemble du site Web seront chargés, c'est donc une bonne méthode d'optimisation pour démonter les fichiers JS et charger le JS de la page lorsque vous cliquez sur la page.

Ce qui est utilisé ici est le chargement paresseux des composants 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 cdn

Lors de l'emballage, vue, vuex, vue - routeur, axios, etc., utilisez le bootcdn domestique et introduisez-le 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>

Placer le fichier JS à la fin du corps

Par par défaut, dans l'index.html construit, js est introduit dans l'en-tête.

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 console

Utilisez le plugin UglifyJsPlugin pour compressez le code et supprimez la console.

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

Ce qui précède est ce que j'ai compilé pour vous. J'espère qu'il vous sera utile à l'avenir.

Articles connexes :

Tutoriel sur l'utilisation du bloc d'applet WeChat

Explication détaillée de l'analyse et de l'application des liaisons post-statiques PHP

Explication détaillée de l'utilisation de l'applet WeChat wx:for et wx:for-item

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!