加载中，请稍候......

Webpack是个很流行的打包工具，但其打包速度却一直被吐槽着

如果不用上一些打包的优化建议，单单打包两三个文件就能花上好几秒，放上几十个入口文件依赖几百上千个包的话，几分钟十几分钟妥妥的

本文整理了常见的一些方法，部分使用之后就看到了很大改善，部分没什么明显的变化，也可能是项目规模还不够大，先记录一下方法也好

一、使用***模式或热更新热替换

webpack支持***模式，此时需要重新编译时就可以进行增量构建，增量构建是很快的，基本不到一秒或几秒之内就能重新编译好

注意区分一下开发环境和线上环境，开发环境启用热更新替换

// 开发环境设置本地服务器，实现热更新
 // 开发环境下需要使用热更新替换，而此时common用chunkhash会出错，可以直接不用hash
// 切合公共模块的提取规则，有时后你需要明确指定默认放到公共文件的模块
 

十一、使用HappyPack来加速构建

会采用多进程去打包构建，使用方式还是蛮简单的，但并不是支持所有的loader

首先引入，定义一下这个插件所开启的线程，推荐是四个，其实也可以直接使用默认的就行了

然后在module的规则里改动一下，引入它，其中 id是一个标识符

然后我们调用插件，设置匹配的id，然后相关的配置可以直接把use：的规则部分套在loaders上

要注意的第二点是，使用ExtractTextWebpackPlugin提取css文件也不是完全就能转换过来，所以需要小小的改动一下，比如

因为它是直接函数调用的，我们就放到里层的use规则就行了，然后配置插件即可

十二、优化构建时的搜索路径

在webpack打包时，会有各种各样的路径要去查询搜索，我们可以加上一些配置，让它搜索地更快

比如说，方便改成绝对路径的模块路径就改一下，以纯模块名来引入的可以加上一些目录路径

还可以善于用下resolve alias别名 这个字段来配置

还有exclude等的配置，避免多余查找的文件，比如使用babel别忘了剔除不需要遍历的

十三、（导出编译JSON文件）理一下打包构建涉及的模块，分析看有哪些包是不需要打包的，只打包需要的模块

检查一下代码，看看是不是有不需要引入的模块出现在代码里

这是webpack3的新特性（Scope Hoisting），其实是借鉴了Rollup打包工具来的，它将一些有联系的模块，放到一个闭包函数里面去，通过减少闭包函数数量从而加快JS的执行速度

webpack打包的时候，有时不需要解析某些模块的依赖（这些模块并没有依赖，或者并根本就没有模块化），我们可以直接加上这个参数，直接跳过这种解析

十六、使用异步的模块加载

这个算是可以减小模块的体积吧，在一定程度上也是为用户考虑的，使用require.ensure来设置哪些模块需要异步加载，webpack会将它打包到一个独立的chunk中，

在某个时刻（比如用户点击了查看）才异步地加载这个模块来执行

有些模块是可以以模块化来引入的，就是说可以只引入其中的一部分，比如说lodash

 主要是整理过来的，试用了几个方法，首次编译的速度可以从之前半分多钟减小到十秒左右了，当然，开启了热更新替换后简直美不可言

当然还有很多方法没整理出，这些方法是有使用场景的，并不是每个都需要用，需要在自己的项目中尝试，结合配置它的复杂性和带来的效应来权衡。