Maison > interface Web > js tutoriel > le corps du texte

Optimiser le temps de chargement du premier écran de vue-cli

php中世界最好的语言
Libérer: 2018-06-12 10:39:00
original
1081 Les gens l'ont consulté

Cette fois, je vais vous présenter comment optimiser le temps de chargement du premier écran de vue-cli Quelles sont les précautions pour optimiser le temps de chargement du premier écran de vue-cli Ce qui suit est un cas pratique, jetons un oeil ? .

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.

L'installation

npm install --save-dev webpack-bundle-analyzer
Copier après la connexion

est définie 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()
 ]
}
Copier après la connexion

Les fichiers JS sont chargés à la demande

Sans 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')))
Copier après la connexion

Utiliser cdn

Lors 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' 
}
Copier après la connexion

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>
Copier après la connexion

Placez le fichier JS à la fin du corps

Par défaut, js est introduit dans l'index.html construit. 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',
})
Copier après la connexion

Compressez le code et supprimez la 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
})
Copier après la connexion

Seules ces méthodes d'optimisation ont été trouvées pour l'instant.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Utilisation des slots/slots scoped dans Vue dans des projets pratiques

Quelles sont les précautions d'utilisation de Dom avec Angular2

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!