1. Concepto
DLLPluginY DLLReferencePluginpara lograr una división de paquetes de alguna manera, pero también mejorar en gran medida la velocidad de construcción, contendrá un gran módulo de multiplexación y no se actualiza con frecuencia la biblioteca compilada, solo es necesario compilar una vez, después de la presencia de compilación del archivo especificado. En el proceso de compilación posterior, estos módulos no se compilarán, sino que usarán directamente DllReferencePlugin para hacer referencia al código de la biblioteca de vínculos dinámicos. Los módulos de terceros generalmente se han utilizado de esta manera, por ejemplo, react、react-dom、lodashy similares. Mientras estos módulos no se actualicen, no es necesario volver a compilar estas bibliotecas de vínculos dinámicos. Por lo tanto, necesitamos crear una tarea de empaquetado de paquetes web separada para empaquetar aquellas bibliotecas que reutilizan módulos y no se actualizan con frecuencia, y luego hacer referencia al dll empaquetado en nuestro proceso de empaquetado.
2. Cree webpack.dll.conf.js y empaque dll por separado
Solo después de la salida del empaquetador _dll_xxx[hash].jsy empaquetado xxx.manifest.json.
const webpack = require("webpack")
const path = require('path')
const CleanWebpaclPlugin = require('clean-webpack-plugin');
const resolve = (dir) => path.join(__dirname, '..', dir);
module.exports = {
entry: {
# 将 react、lodash等模块作为入口编译成动态链接库
vendor: ['react', 'react-dom', 'react-router-dom', 'lodash']
},
output: {
# 指定生成文件所在目录文件夹，
# 将它们存放在了 src 文件夹下
path: resolve('public'),
# 指定文件名
library: '_dll_[name]',
# 存放动态链接库的全局变量名称，例如对应 lodash 来说就是 lodash_dll_lib
# 这个名称需要与 DllPlugin 插件中的 name 属性值对应起来
filename: 'dll/_dll_[name].[hash].js'
},
plugins: [
new CleanWebpaclPlugin(['dll'], {
root: resolve('public')
}),
new webpack.DllPlugin({
name: '_dll_[name]',
# 和output.library中一致，值就是输出的manifest.json中的 name值
path: path.join(__dirname, '../public/dll', '[name].manifest.json')
})
]
}
Tres, haga referencia a la biblioteca dll en el entorno de empaquetado principal a través de webpack.DllReferencePlugin
const path = require('path');
const webpack = require('webpack');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const CleanWebpaclPlugin = require('clean-webpack-plugin');
const resolve = (dir) => path.join(__dirname, '..', dir);
module.exports = {
entry: './src/index.js',
output: {
path: resolve('dist'),
filename: 'js/[name].[hash].js',
library: '_dll_[name]'
},
plugins: [
# 需添加root 否则无法删除，exclude未生效
new CleanWebpackPlugin(['dist'], {
root: path.join(__dirname, '..')
}),
new HTMLWebpackPlugin({
title: 'Webpak DllPlugin 的使用',
template: resolve('index.html'),
filename: 'index.html'
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
}),
# 告诉 Webpack 使用动态链接库
new webpack.DllReferencePlugin({
// 描述 lodash 动态链接库的文件内容
manifest: require(../public/dll/vendor.manifest')
})
]
}
Cuatro, mira el efecto
Por ejemplo, empaqueté crypto.js por separado en un dll.
entry: {
vendor: [
'crypto-js',
],
}
El mainfest.jsn generado es el siguiente
//--此处省略
"../node_modules/crypto-js/sha1.js": {
"id": 6,
"buildMeta": {
"providedExports": true
}
},
"../node_modules/crypto-js/hmac.js": {
"id": 7,
"buildMeta": {
"providedExports": true
}
},
"../node_modules/crypto-js/sha256.js": {
"id": 8,
"buildMeta": {
"providedExports": true
}
},
"../node_modules/crypto-js/sha512.js": {
"id": 9,
"buildMeta": {
"providedExports": true
}
},
"../node_modules/crypto-js/index.js": {
"id": 11,
"buildMeta": {
"providedExports": true
}
}
//--此处省略
Cuando hago referencia directa en el paquete principal crypto-jscuando
import getAxios from "../../../util/axiosDefault";
import log from "../../../util/log";
var CryptoJS = require("crypto-js");
export const getCry = (param)=>{
return CryptoJS.SHA256(param).toString();
}
El código empaquetado es el siguiente:
/***/ "../node_modules/crypto-js/index.js":
/*!**************************************************************************************!*\
!*** delegated ../node_modules/crypto-js/index.js from dll-reference vendor_library ***!
\**************************************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
module.exports = (__webpack_require__(/*! dll-reference vendor_library */ "dll-reference vendor_library"))(11);
/***/ }),
Tenga en cuenta que (11)el número de serie en la parte posterior es la clave del paquete y vea si corresponde al 11 en mainfest.json. Webpack usará esto para encontrar el módulo correspondiente en el dll.
Cuando cito de otra manera crypto-js, cito directamente el escenario SHA256:
import getAxios from "../../../util/axiosDefault";
import log from "../../../util/log";
var SHA256= require("crypto-js/sha256");
export const getCry = (param)=>{
return SHA256(param).toString();
}
Todos, ¿adivinen cuál es el código empaquetado? Así es, acabo de modificar el ID al que hace referencia el módulo, 11cambiado de8
/***/ "../node_modules/crypto-js/index.js":
/*!**************************************************************************************!*\
!*** delegated ../node_modules/crypto-js/index.js from dll-reference vendor_library ***!
\**************************************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
module.exports = (__webpack_require__(/*! dll-reference vendor_library */ "dll-reference vendor_library"))(8);
/***/ }),