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 避免版本库污染。