webpack - 前端性能优化篇之webpack如何提⾼的打包速率、如何淘汰打包体积 ...

合理配置Loader：

制止不必要的文件处置惩罚，只对必要的文件利用相应的Loader，并只管精简Loader链。
首先，我们可以通过配置Loader的文件搜索范围来提高效率。比如，对于Babel Loader，我们希望它只作用在JS代码上，因此我们可以利用include和exclude属性来指定必要处置惩罚的文件夹和不必要处置惩罚的文件夹，制止不必要的文件处置惩罚。

1. module.exports = {
2.   module: {
3.     rules: [
4.       {
5.         // 只对js文件使用babel-loader
6.         test: /\.js$/,
7.         loader: 'babel-loader',
8.         // 只在src文件夹下查找
9.         include: [resolve('src')],
10.         // 不会去查找的路径
11.         exclude: /node_modules/
12.       }
13.     ]
14.   }
15. }

复制代码

另外，为了加快打包时间，我们可以将Babel编译过的文件缓存起来，这样下次只必要编译更改过的代码文件即可。你可以通过设置cacheDirectory选项为true来实现这一点。

1. loader: 'babel-loader?cacheDirectory=true'

复制代码

通过以上方式，我们可以优化Loader的配置，制止不必要的文件处置惩罚，只对必要的文件利用相应的Loader，并只管精简Loader链，从而提高Webpack的打包效率。
利用HappyPack或thread-loader

这些工具可以将使命分发给多个子进程，以充分利用多核处置惩罚器的上风，加快构建速率。
当利用Webpack举行打包时，由于Node是单线程运行的，因此在执行Loader时可能会出现长时间编译使命导致等候的情况。为了充分利用体系资源加快打包效率，可以利用HappyPack工具将Loader的同步执行转换为并行执行。
首先，必要对Webpack配置举行调解，指定必要利用HappyPack的Loader，同时设置相应的ID以及线程数量。比如，对于Babel Loader的配置，可以这样举行设置：

1. module: {
2.   rules: [
3.     {
4.       test: /\.js$/,
5.       include: [resolve('src')],
6.       exclude: /node_modules/,
7.       // 使用HappyPack的loader
8.       loader: 'happypack/loader?id=happybabel'
9.     }
10.   ]
11. },
12. plugins: [
13.   new HappyPack({
14.     id: 'happybabel',
15.     loaders: ['babel-loader?cacheDirectory'],
16.     // 开启 4 个线程
17.     threads: 4
18.   })
19. ]

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。