Comment extraire des bibliothèques tierces à l'aide de Webpack

Cet article présente principalement la posture correcte de webpack pour extraire des bibliothèques tierces. 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. Ceux qui sont intéressés peuvent en savoir plus

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

1. CommonsChunkPlugin

2. DLLPlugin

Différence : La première méthode nécessite que la bibliothèque tierce soit exécutée et empaquetée une fois à chaque fois. La deuxième méthode empaquete uniquement les fichiers du projet à chaque fois. 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 introduisez-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 webpack.config Le fichier .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

méthode de citation HTML

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

Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère. cela sera utile à tout le monde à l’avenir.

Articles associés :

Optimisation du module JavaScript

Comment utiliser webpack+express pour implémenter le développement de sites multipages

Framework Webpack (maîtrise de la technologie de base)

Comment contrôler plusieurs barres de défilement pour faire défiler de manière synchrone à l'aide de JS

Utiliser vue - Comment créer vue avec cli+webpack

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!