IgnorePlugin实战攻略：优化Webpack打包效率的那些坑与技巧
夏侯明轩IgnorePlugin 让我头疼了好一阵子
最近在优化项目构建速度时，发现有些库的体积特别大，而且并不常用。于是想着用 Webpack 的 IgnorePlugin 来忽略这些库，结果踩了不少坑。
先说说最后是怎么搞定的
折腾了半天发现，其实配置 IgnorePlugin 没那么复杂，但需要一些技巧。最终的解决方案是这样的：
const webpack = require('webpack');
module.exports = {
// 其他配置...
plugins: [
new webpack.IgnorePlugin({
resourceRegExp: /moment$/,
contextRegExp: /@babel/runtime/,
}),
],
};这里的关键是 resourceRegExp 和 contextRegExp。resourceRegExp 是要忽略的资源正则表达式，contextRegExp 是上下文正则表达式。通过这两个参数，可以精确控制哪些模块会被忽略。
为什么会想到用 IgnorePlugin
项目中有一些第三方库依赖了 Moment.js，而 Moment.js 又是个大块头。每次打包都会把 Moment.js 打进去，导致包体积变大，构建速度也受影响。于是就想着能不能忽略掉 Moment.js。
一开始的尝试
刚开始我是直接在网上找了一些例子，然后写了如下配置：
const webpack = require('webpack');
module.exports = {
// 其他配置...
plugins: [
new webpack.IgnorePlugin({
resourceRegExp: /moment$/,
}),
],
};我以为这样就能搞定，结果一运行发现应用直接崩溃了。原来是因为忽略了 Moment.js 之后，依赖它的库找不到这个模块，导致出错。
排查过程
为了找到问题所在，我开始逐步排查。首先，确认了确实是因为忽略了 Moment.js 导致的错误。然后，试着在代码里手动引入 Moment.js，看是否能解决问题。结果还是不行，因为有些库会在运行时动态加载 Moment.js，静态引入并不能完全解决问题。
后来试了下发现，如果只忽略特定上下文中的 Moment.js 会更好。于是就有了上面那个更复杂的配置。
技术细节和原理
IgnorePlugin 的核心原理是通过正则表达式匹配资源和上下文，从而决定是否忽略某些模块。具体来说：
- resourceRegExp：匹配要忽略的资源（如文件路径、模块名等）。
- contextRegExp：匹配上下文路径，用于更精确地控制忽略的范围。
举个例子，如果你只想忽略某个特定目录下的 Moment.js，可以这样写：
new webpack.IgnorePlugin({
resourceRegExp: /moment$/,
contextRegExp: /node_modules/some-lib/,
});这样只有在 node_modules/some-lib 目录下的 Moment.js 会被忽略，其他地方的 Moment.js 还是会被正常打包。
还有一两个小问题
虽然解决了主要问题，但还是有几个小问题需要注意：
- 有时候忽略某个模块后，可能会导致一些意想不到的副作用。比如某些库在运行时会动态加载被忽略的模块，这时候就需要特别小心。
- 忽略模块后，要确保项目的其他部分没有依赖这些模块，否则可能会出现类似的问题。
总的来说，使用 IgnorePlugin 需要谨慎，最好是结合具体的项目情况来配置。
总结一下
以上是我踩坑后的总结，希望对你有帮助。如果你有更好的方案或者遇到过类似的问题，欢迎评论区交流。这种优化方式虽然有效，但还是要根据具体情况来调整，毕竟每个项目的情况都不一样。
