前端面试题：如何提高webpack构建速度？

1、 通过externals配置来提取常用库
2、 利用DllPlugin和DllReferencePlugin预编译资源模块 通过DllPlugin来对那些我们引 用但是绝对不会修改的npm包来进行预编译，再通过DllReferencePlugin将预编译的模块加 载进来
3、 使用Happypack实现多线程加速编译
要注意的第一点是，它对file-loader和url-loader支持不好，所以这两个loader就不需要 换成happypack 了，其他loader可以类似地换一下
4、 使用 Tree-shaking 和 Scope Hoisting 来剔除多余代码 5、使用 fast-sass-loader 代替 sass-loader 6、babel-loader 开启缓存
babel-loader在执行的时候，可能会产生一些运行期间重复的公共文件，造成代码体积大冗 余，同时也会减慢编译效率可以加上cacheDirectory参数或使用transform-runtime插件 试试
// webpack. config. js
use： [{
loader： "babel-loader",
options： {
cacheDirectory： true
}]
// . bablerc
{
"presets"：[
env ,
"react"
],
"plugins": ["transform-runtime"]
}
不需要打包编译的插件库换成全局” script”标签引入的方式
比如jQuery插件，react, react-dom等，代码量是很多的，打包起来可能会很耗时可以直 接用标签引入，然后在webpack配置里使用expose-loader或externals或ProvidePlugin 提供给模块内部使用相应的变量
// @1
use： [{
loader： ‘expose-loader’,
options： ‘$’
),{
loader： ‘expose-loader’,
options： ‘jQuery’
}]
// @2
externals： {
jquery： ‘jQuery’
},
// @3
new webpack. ProvidePlugin({
$： ‘jquery’,
jQuery： ‘jquery’,
‘window. jQuery’: ‘jquery’
}),
优化构建时的搜索路径
在webpack打包时，会有各种各样的路径要去查询搜索，我们可以加上一些配置，让它搜索地 更快比如说，方便改成绝对路径的模块路径就改一下，以纯模块名来引入的可以加上一些目 录路径 还可以善于用下resolve alias别名 这个字段来配置 还有exclude等的配置，避免 多余查找的文件，比如使用babel别忘了剔除不需要遍历的