提高webpack的构建速度的几种方法概括？

• 通过externals配置来提取常用库

• 利用DllPlugin和DllReferencePlugin预编译资源模块,通过DllPlugin来对那些我们引用但是绝对不会修改的npm包来进行预编译，再通过DllReferencePlugin将预编译的模块加载进来。

• 使用Happypack 实现多线程加速编译,要注意的第一点是，它对file-loader和url-loader支持不好，所以这两个loader就不需要换成happypack了，其他loader可以类似地换一下

• 使用Tree-shaking和Scope Hoisting来剔除多余代码

• 使用fast-sass-loader代替sass-loader

• babel-loader开启缓存

• babel-loader在执行的时候，可能会产生一些运行期间重复的公共文件，造成代码体积大冗余，同时也会减慢编译效率

  可以加上cacheDirectory参数或使用 transform-runtime 插件试试

 1 // webpack.config.js
 2 
 3 use: [{
 4 
 5 loader: 'babel-loader',
 6 
 7 options: {
 8 
 9 cacheDirectory: true
10 
11 }]

 1 // .bablerc
 2 
 3 {
 4 
 5 "presets": [
 6 
 7     "env",
 8 
 9     "react"
10 
11 ],
12 
13 "plugins": ["transform-runtime"]
14 
15 }

• 不需要打包编译的插件库换成全局"script"标签引入的方式

比如jQuery插件，react, react-dom等，代码量是很多的，打包起来可能会很耗时

可以直接用标签引入，然后在webpack配置里使用 expose-loader 或 externals 或 ProvidePlugin 提供给模块内部使用相应的变量

 1 use: [{
 2 
 3 loader: 'expose-loader',
 4 
 5 options: '\$'
 6 
 7 }, {
 8 
 9 loader: 'expose-loader',
10 
11 options: 'jQuery'
12 
13 }]
14 
15 // \@2
16 
17 externals: {
18 
19 jquery: 'jQuery'
20 
21 },
22 
23 // \@3
24 
25 new webpack.ProvidePlugin({
26 
27 \$: 'jquery',
28 
29 jQuery: 'jquery',
30 
31 'window.jQuery': 'jquery'
32 
33 }),

• 优化构建时的搜索路径

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

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

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

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