Exclude bootstrap-vue icons with Webpack IgnorePlugin

user_8604940 0
Viewed 1506

Webpack bundle analyzer shows that icons from bootstrap-vue package are 535kb in size.

I don`t want to use them in a project, so I have been trying to exclude the package with a webpack IgnorePlugin.

According to example in documentation, I have tried to write this:

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

but it didn`t work. The only thing I was able to reproduce, is to completely exclude bootstrap-vue lib via this constriction new webpack.IgnorePlugin(/bootstrap-vue/)

So how I can exclude only icons?

bootstrap-vue vue.js webpack
1 Answers

Here is the way to ignore the icons from bootstrap-vue:

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

Next time if you are in doubt try to use checkResource function instead, it's easier to write and understand in comparison to regexp:

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
   },
 })

But after doing this research it turned out that some components actually use some icons and icons in general are not as big as I expected. Using source of the bootstrap-vue had bigger impact on our bundle. So decided to stick with this approach instead

user_23297740
Related