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打包速度会变快。