前言
当我们的项目越来越大,webpack的配置项越来越多时,构建速度会越来越慢,所以我们需要通过一些配置来提高webpack的构建速度。
目录
- 缩小范围
- noParse
- IgnorePlugin
- 优化 resolve 配置
- externals
- 缓存
缩小范围
在配置 loader 的时候,我们需要更精确的去指定 loader 的作用目录或者需要排除的目录,通过使用 include
和 exclude
两个配置项,可以实现这个功能,常见的例如:
include
:符合条件的模块进行解析exclude
:排除符合条件的模块,不解析,优先级更高
这样一来,一开始构建,我们就能去除一些选项,比如,在使用babel-loader的时候
{
test: /\.jsx?$/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/react'],
plugins: [[require('@babel/plugin-proposal-decorators'), {
legacy: true }]],
cacheDirectory: true, // 启用缓存
},
},
],
include: path.resolve(__dirname, 'src'),
exclude: /node_modules/,
},
noParse
对于我们引入的一些第三方包,比如jQuery
,在这些包内部是肯定不会依赖别的包,所以根本不需要webpack去解析它内部的依赖关系,使用 noParse 进行忽略的模块文件中不会解析 import
、require
等语法
module:{
noParse:/jquery|lodash/