1.减少文件搜索范围
1）优化resolve.extensions配置
在导入文件的语句里，没有带文件后缀的时候，webpack会自动带上后缀去尝试询问文件是否存在。所以，在配置resolve.extensions的时候，要遵循以下几点，以做到尽可能的优化构建性能。
- 后缀尝试列表要尽可能小，不要把项目中不存在的后缀类型写到后缀尝试列表中。
- 频率出现最高的文件的后缀要优先放在最前面， 以做到尽快的退出寻找过程。
- 在源码中写导 入语句时,要尽可能的带上后缀,从而可以避免上述寻找过程。例如在你确定的情况下把require(./data’)写成require(’ /data.json’).
写法如下所示：
resolve:{
extensions:['js','css']
},
2）优化resolve.modules配置
resolve.modules是用来配置webpack去哪些目录下寻找第三方模块。
resolve.modules的默认值是node_modules，会采用向上递归搜索的方式去查找（就是说，如果当前的目录没有我需要找的内容时，会向上一级目录接着寻找）。
写法如下所示：
首先需要在webpack.config.js文件里写一个函数：
function resolve(dir){
return path.join(__dirname,'..',dir);
}
resolve:{
modules:[
resolve('src'),
resolve('node_modules')
]
},
注：__dirname：返回当前文件所在的绝对路径
3）优化resolve.alias配置
resolve.alias配置项可以把原导入路径映射成一个新的导入路径。
写法如下所示：
resolve:{
alias:{
//指定一个路径来引入第三方库，可以减少webpack的解析时间
jQuery: path.resolve(__dirname,"public/js/jquery.min.js")
}
},
4）缩小文件匹配范围
Include：需要处理的文件的位置
Exclude：排除掉不需要处理的文件的位置
{
test:/\.js$/,
include:[resolve:'src'],
exclude:/node_modules/,
use:'babel-loader'
},
2.设置noParse
防止webpack解析哪些任何与给定正则表达式相匹配的文件，忽略的文件中不应该含有import、require、define的调用或任何其他导入机制。忽略大型的库可以提高构建性能（比如：jquery，element UI等库）。
写法如下所示：
3.给babel-loader设置缓存
babel-loader提供了cacheDirectory特定选项，默认值为false。
设置时，给定的目录将用于缓存加载器的结果。
写法如下所示：
{
test:/\.js$/,
exclude:/node_modules/,
use:{
loader:'babel-loader?cacheDirectory=true',
options:{
presets:["@babel/preset-env"]
}
}
},
4.使用happyPack
HappyPack的基本原理:在webpack构建过程中,我们需要使用Loader对js, Css, 图片,字体等文件做转换操作,并且转换的文件数据量也是非常大的,且这些转换操作不能并发处理文件,而是需要一一个个文件进行处理, HappyPack 的基本原理是将这部分任务分解到多个子进程中去并行处理，子进程处理完成后把结果发送到主进程中，从而减少总的构建时间。
使用步骤：
1）安装
打开终端，进入到项目文件夹路径，输入cnpm install happypack --save-dev
2）配置webpack.common.conf.js文件
引入happyPack：
const HappyPack = require('happypack');
rules设置：
{
test:/\.js$/,
exclude:/node_modules/,
loader:'happypack/loader?id=happyBabel',
},
plugins设置：
new HappyPack({
id:'happyBabel',
loaders:['babel-loader']
}),
注：在文件少的时候不需要使用happypack进行并发处理，文件多的时候使用happypack打包速度会变快。