Analyser correctement le webpack pour extraire les bibliothèques tierces

Lorsque nous utilisons Webpack pour empaqueter, nous souhaitons souvent extraire la bibliothèque tierce séparément, l'utiliser comme fichier de version stable et utiliser le cache de navigation pour réduire le nombre de requêtes. Il existe deux méthodes couramment utilisées pour extraire des bibliothèques tierces. Cet article présente principalement la bonne posture d'extraction de bibliothèques tierces avec webpack. Il existe deux méthodes couramment utilisées pour extraire des bibliothèques tierces. Cet article présente ces deux méthodes en détail. . Pour ceux que cela intéresse Vous pouvez en apprendre davantage, j'espère que cela pourra aider tout le monde.

1. CommonsChunkPlugin

2. DLLPlugin

Différence : Le premier type doit être empaqueté à chaque fois. Le troisième -party est également exécutée et empaquetée une fois. La deuxième méthode empaquete uniquement le fichier de projet pour chaque paquet. Il suffit de citer le fichier compressé tiers empaqueté pour la première fois

Introduction à la méthode CommonsChunkPlugin.

Prenons vue comme exemple

const vue = require('vue')
{
 entry: {
 // bundle是我们要打包的项目文件的导出名字， app是入口js文件
 bundle: 'app'，
 // vendor就是我们要打包的第三方库最终生成的文件名，数组里是要打包哪些第三方库, 如果不是在node——modules里面，可以填写库的具体地址
 vendor: ['vue']
 },
 output: {
  path: __dirname + '/bulid/',
 // 文件名称
 filename: '[name].js'
 },
 plugins: {
 // 这里实例化webpack.optimize.CommonsChunkPlugin构造函数
 // 打包之后就生成vendor.js文件
 new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js')
 }
}

Emballez ensuite le fichier généré et importez-le dans le fichier html

<script src="/build/vendor.js"></script>
 <script src="/build/bundle.js"></script>

Introduction à la méthode DLLPlugin

Préparez d'abord deux fichiers

1. webpack.config.js

2. webpack.dll.config.js

Le fichier webpack.dll.config.js est configuré comme suit

const webpack = require('webpack')
const library = '[name]_lib'
const path = require('path')

module.exports = {
 entry: {
 vendors: ['vue', 'vuex']
 },

 output: {
 filename: '[name].dll.js',
 path: 'dist/',
 library
 },

 plugins: [
 new webpack.DllPlugin({
  path: path.join(__dirname, 'dist/[name]-manifest.json'),
  // This must match the output.library option above
  name: library
 }),
 ],
}

Ensuite, le fichier webpack.config.js est configuré comme suit

const webpack = require('webpack')

module.exports = {
 entry: {
 app: './src/index'
 },
 output: {
 filename: 'app.bundle.js',
 path: 'dist/',
 },
 plugins: [
 new webpack.DllReferencePlugin({
  context: __dirname,
  manifest: require('./dist/vendors-manifest.json')
 })
 ]
}

Ensuite, exécutez

$ webpack --config webpack.dll.config.js
$ webpack --config webpack.config.js

html Méthode de référence

<script src="/dist/vendors.dll.js"></script>
<script src="/dist/app.bundle.js"></script>

Recommandations associées :

Explication détaillée de la différence entre webpack require.ensure et require AMD_javascript skills

Explication détaillée du composant de chargement à la demande de vue webpack require.ensure

Webpack résumé du didacticiel d'apprentissage sur l'optimisation des performances frontales

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!