elementui dllplugin
使用 DLLPlugin 优化 ElementUI 的打包速度
DLLPlugin 是 Webpack 提供的一种优化手段，通过预编译不常变动的库（如 ElementUI）生成动态链接库（DLL），减少正式打包时的编译时间。以下是实现步骤：
配置 DLL 生成文件
创建 webpack.dll.config.js 文件，将 ElementUI 及其依赖项预编译为 DLL：
const path = require('path');
const webpack = require('webpack');
module.exports = {
mode: 'production',
entry: {
elementUI: ['element-ui']
},
output: {
path: path.resolve(__dirname, 'dll'),
filename: '[name].dll.js',
library: '[name]_dll'
},
plugins: [
new webpack.DllPlugin({
name: '[name]_dll',
path: path.join(__dirname, 'dll', '[name].manifest.json')
})
]
};生成 DLL 文件
运行以下命令生成 DLL 文件：
webpack --config webpack.dll.config.js生成的文件会保存在 dll 目录下，包括 elementUI.dll.js 和 elementUI.manifest.json。
主配置中引用 DLL
在 webpack.config.js 中通过 DllReferencePlugin 引用生成的 manifest 文件：
const webpack = require('webpack');
const path = require('path');
module.exports = {
plugins: [
new webpack.DllReferencePlugin({
manifest: path.resolve(__dirname, 'dll', 'elementUI.manifest.json')
})
]
};引入 DLL 文件到 HTML
在 HTML 中手动引入生成的 elementUI.dll.js，或通过 add-asset-html-webpack-plugin 自动注入：
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');
module.exports = {
plugins: [
new AddAssetHtmlPlugin({
filepath: path.resolve(__dirname, 'dll', 'elementUI.dll.js'),
publicPath: './'
})
]
};注意事项
- 版本一致性：确保 DLL 生成与项目使用的 ElementUI 版本一致，避免兼容性问题。
- 更新时机：若 ElementUI 版本升级，需重新生成 DLL 文件。
- 性能对比：在大型项目中效果显著，小型项目可能提升有限。
通过以上步骤，可显著减少 Webpack 打包时间，尤其适用于频繁开发但依赖库稳定的场景。
