webpack打包优化 - DllPlugin动态链接库

DllPlugin动态链接库插件

• 前端框架如vue React,体积大，构建慢
• 较稳定，不常升级版本
• 同一个版本只构建一次即可，不用每次都重新构建
• webpack已内置DllPlugin支持
• DllPlugin - 打包出dll文件
• DllReferencePlugin - 使用dll文件

如何使用DllPlugin文件

• 配置webpack.dll.js文件
• 配置package.json
• 生成dll文件
• 使用dll文件
  • 1. 在index.html中引用dll.js文件
  • 2. 在webpack.dev.js中引入DllReferencePlugin const DllReferencePlugin = require('webpack/lib/DllReferencePlugin')
  • 3. 配置babel-loader忽略node_modules文件 exclude: /node_modules/
  • 4. 告诉webpack使用了哪些动态链接库

new DllReferencePlugin({
    // 描述 react 动态链接库的文件内容
    manifest: require(path.join(distPath, 'xxx.manifest.json'))
})