vue.js - 使用 Webpack IgnorePlugin 排除 bootstrap-vue 图标

Question

Webpack 包分析器显示来自 bootstrap-vue 包的图标大小为 535kb。

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

根据 documentation 中的示例，我试过这样写:

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

但是没用。我唯一能够重现的是通过这个限制完全排除 bootstrap-vue lib new 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 的源代码对我们的包有更大的影响。所以决定改用这种方法