使用 Webpack IgnorePlugin 排除 bootstrap-vue 图标

Question

Webpack 捆绑分析器显示 bootstrap-vue 包中的图标大小为 535kb。

我不想在项目中使用它们，所以我一直尝试使用 webpack IgnorePlugin 排除该包。

根据文档中的示例，我尝试这样写：

new webpack.IgnorePlugin({
        resourceRegExp: /^icons(.*)$/,
        contextRegExp: /^bootstrap-vue(.*)$/
    })

但它不起作用。我唯一能够重现的是通过这个限制完全排除 bootstrap-vue libnew webpack.IgnorePlugin(/bootstrap-vue/)

那么我如何才能只排除图标呢？

Answer 1

这是忽略图标的方法bootstrap-vue：

new webpack.IgnorePlugin({
  resourceRegExp: /\/icons\//,
  contextRegExp: /bootstrap-vue/,
});

下次如果您有疑问，请尝试使用checkResource函数，与正则表达式相比，它更容易编写和理解：

new webpack.IgnorePlugin({
   checkResource (resource, context) {
     if (context.includes('bootstrap-vue')) {
       console.log(resource, ':::', context)
       // check console to figure out how the resource is used
       // update the function until it's satisfies your case
       // then move to regexp if you wish
     }
     return false
   },
 })

但经过研究发现，有些组件实际上使用了一些图标，而且图标总体上没有我预期的那么大。使用源代码bootstrap-vue对我们的包有更大的影响。所以决定坚持这种方法