1.noParse // 不去解析某个包中的依赖项
module: {
noParse:/jquery/, //像jquery,我们知道它的内部没有依赖其他包,我们就可以告诉webpack不解析它的依赖项
...
},
2.exclude,include //配一个即可
{
test: /\.js$/,
exclude: /node_modules/,
includes: path.resolve(__dirname, "src"),
},
3.IgnorePlugin webpack内置plugin
new IgnorePlugin({
contextRegExp:/\.\/locale/,
resourceRegExp:/moment/
}),, //假如项目中使用了moment,他默认会引入多个版本的语言,其实我们并不需要,可以忽略掉,然后手动进行引入需要的
4.DllPlugin配合DllReferencePlugin
先将一些库如react提前打包好,手动进行引入,后面就不会对react进行打包
5.Happy 多线程打包
当项目比较大时可以开启多线程打包,比较小的话效果分配线程也需要时间,没有必要。
6.treeshaking webpack内置
当我们定义了方法但是没有被使用到的时候在生产环境下webpack会自动处理掉,不进行打包。这种只对import语法有效,require语法识别不了。
7.scope hosting 作用域提升,webpack内置
// 像下面这种语法webpack会自动识别将他们加起来
let a = 1
let b = 2
let c = 3
console.log(a+b+c,'========================');
打包后结果
console.log(6,"========================")
8.splitChunks 公共代码抽离,一般在多入口的时候使用
// 存在A入口和B入口,他们同时使用了c模块或者公共模块
optimization:{
splitChunks:{// 分割代码块
cacheGroups:{
common:{
chunks:'initial',
minSize:0, // 只要超过0字节就抽离
minChunks:2, // 至少被2个chunk引用
},
vendor:{ // 抽离第三方模块
priority:1,// 优先级
test:/node_modules/,
chunks:'initial',
minSize:0,
minChunks:2,
}
}
}
}
9.import('...') 懒加载
在vue和react中我们使用的路由懒加载
10.模块热更新