stratégie d'optimisation du webpack

Lorsque nous construisons une application monopage (vue, React) ou emballons un plug-in, il y a de fortes chances que nous utilisions webpack, un outil de packaging JavaScript
Mais à mesure que le code du projet augmente, certains. des configurations simples de webpack exposeront divers inconvénients (long temps d'emballage, code volumineux).
Ce qui suit est un résumé de la résolution des problèmes basée sur le processus d'auto-développement et d'apprentissage du webpack

Long temps d'emballage<.>

DllPlugin

Beaucoup de gens le savent

webpack.optimize.CommonsChunkPluginCe plug-in est utilisé pour extraire des bibliothèques publiques, mais ce plug-in ne peut pas résoudre le problème de l'empaquetage répété des bibliothèques publiques.Cependant,
DllPluginCe plug-in peut résoudre le problème.Ce plug-in emballera d'abord la bibliothèque publique.
Il possède son propre fichier de configuration Webpack indépendant, et l'entrée du fichier de configuration est la bibliothèque publique qui doit être empaquetée.
Lorsqu'elle est empaquetée, elle générera le package js public et
. manifest.json.
manifest.json est utilisé pour mapper le fichier de configuration principal DLLReferencePlugin aux dépendances associées

devtool cheap-module-eval-source-map

Lorsque nous utilisons webpack pour empaqueter le code, il est compilé, il devient donc difficile à déboguer.

Webpack donne donc l'API devtool, qui trouvera l'emplacement correct de l'erreur via Source Map.
Sélectionnez devtool
cheap-module-eval-source-mapLa raison est que chaque module utilise eval() pour améliorer considérablement l'efficacité de la construction continue et ne génère pas de mappage de colonnes pour gagner du temps de construction (le moteur du navigateur donnera automatiquement des informations sur les colonnes).

Optimisation des performances

Style séparation et compression

Utilisez

extract-text-webpack-plugin pour Les styles de chaque script sont extraits.Si vous définissez
allChunks : true, les styles extraits seront fusionnés en un seul fichier.Utilisez
optimise-css-assets-webpack-pluginCompressez les styles.

Compression des scripts

Utiliser

uglifyjs-webpack-plugin Compresser le script.

Optimisation des performances JS

Chaque module de webpack sera mis dans une fonction de fermeture.

Utilisez
webpack.optimize.ModuleConcatenationPlugin mettra le module associé dans une fermeture.Réduisant ainsi le nombre de fermetures.

Extraire le code commun

Utiliser

DllPlugin ou webpack.optimize.CommonsChunkPlugin extrayez le code commun et emballez-le dans d'autres fichiers. Évitez les emballages répétés, réduisant ainsi le nombre de paquets Taille.

Pré-compression du serveur

Lorsque le service active la pré-compression .

donnera la priorité au nom du fichier se terminant par
.gz fichier, ce fichier est un fichier compressé et sera de petite taille.Utilisation
CompressionWebpackPlugin générera le fichier compressé correspondant.

Recommandations associées :

react, webpack, proxy inter-domaines multi-pages

Partage de configuration de base de Vue+webpack

Optimisation du réseau du projet webpack Partage de code

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!