浅谈webpack 构建性能优化策略小结(5)

日期：2020-05-11 栏目：程序人生浏览：次

然后执行命令：

$ NODE_ENV=development webpack --config webpack.dll.lib.js --progress
$ NODE_ENV=production webpack --config webpack.dll.lib.js --progress

即可分别编译出支持调试版和生产环境中lib静态资源库，在构建出来的文件中我们也可以看到会自动生成如下资源：

common
├── debug
│  ├── lib.js
│  ├── lib.js.map
│  └── manifest.json
└── dist
  ├── lib.js
  ├── lib.js.map
  └── manifest.json

文件说明：

lib.js可以作为编译好的静态资源文件直接在页面中通过src链接引入，与externals的资源引入方式一样，生产与开发环境可以通过类似charles之类的代理转发工具来做路由替换；
manifest.json中保存了webpack中的预编译信息，这样等于提前拿到了依赖库中的chunk信息，在实际开发过程中就无需要进行重复编译；

2、dllPlugin的静态资源引入

lib.js和manifest.json存在一一对应的关系，所以我们在调用的过程也许遵循这个原则，如当前处于开发阶段，对应我们可以引入common/debug文件夹下的lib.js和manifest.json，切换到生产环境的时候则需要引入common/dist下的资源进行对应操作，这里考虑到手动切换和维护的成本，我们推荐使用add-asset-html-webpack-plugin进行依赖资源的注入，可得到如下结果：

<head>
<script src="/static/common/lib.js"></script>
</head>

在webpack.config.js文件中增加如下代码：

const isDebug = (process.env.NODE_ENV === 'development');
const libPath = isDebug ? '../dll/lib/manifest.json' : 
'../dll/dist/lib/manifest.json';

// 将mainfest.json添加到webpack的构建中

module.export = {
 plugins: [
    new webpack.DllReferencePlugin({
    context: __dirname,
    manifest: require(libPath),
   })
 ]
}

配置完成后我们能发现对应的资源包已经完成了纯业务模块的提取

多个工程之间如果需要使用共同的lib资源，也只需要引入对应的lib.js和manifest.js即可，plugin配置中也支持多个webpack.DllReferencePlugin同时引入使用，如下：

module.export = {
 plugins: [
   new webpack.DllReferencePlugin({
    context: __dirname,
    manifest: require(libPath),
   }),
   new webpack.DllReferencePlugin({
    context: __dirname,
    manifest: require(ChartsPath),
   })
 ]
}

方案四、使用 Happypack 加速你的代码构建

以上介绍均为针对webpack中的chunk计算和编译内容的优化与改进，对资源的实际体积改进上也较为明显，那么除此之外，我们能否针对资源的编译过程和速度优化上做些尝试呢？

浅谈webpack 构建性能优化策略小结(5)

相关推荐