elementui dllplugin
ElementUI DLLPlugin 配置方法
ElementUI 的 DLLPlugin 是一种 Webpack 插件，用于提升构建性能。通过将不经常变化的依赖库预先编译打包，减少开发时的重复构建时间。
安装 Webpack 和 DLLPlugin 依赖
npm install webpack webpack-cli --save-dev创建 webpack.dll.config.js 配置文件
const path = require('path')
const webpack = require('webpack')
module.exports = {
entry: {
vendor: ['element-ui']
},
output: {
path: path.join(__dirname, 'dll'),
filename: '[name].dll.js',
library: '[name]_library'
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, 'dll', '[name]-manifest.json'),
name: '[name]_library'
})
]
}添加构建脚本到 package.json
{
"scripts": {
"dll": "webpack --config webpack.dll.config.js"
}
}在主 Webpack 配置中引用 DLL
const webpack = require('webpack')
module.exports = {
plugins: [
new webpack.DllReferencePlugin({
manifest: require('./dll/vendor-manifest.json')
})
]
}使用注意事项
确保在 HTML 中引入生成的 DLL 文件
<script src="./dll/vendor.dll.js"></script>DLL 文件需要重新生成的情况包括：
- ElementUI 版本升级
- 添加新的库到 vendor 列表
- Webpack 配置发生重大变更
性能优化建议
将更多稳定库加入 DLL 提升效果
entry: {
vendor: ['element-ui', 'vue', 'vue-router', 'axios']
}生产环境构建时可不使用 DLLPlugin，但开发环境能显著提升构建速度约 30-50%。建议将 DLL 文件加入 .gitignore 避免版本库污染。
