Why bootstrap-vue is showing up in my initial bundle despite not being imported in main.js? #7174

guijsbr · 2023-09-11T12:49:50Z

guijsbr
Sep 11, 2023

I'm lazy-loading bootstrap-vue modules in my Vue 2 app, but despite it is not being imported in the main.js file, it still shows up in my main bundle, adding almost 33kb of parsed size. I'm installing only the modules I need on some components using like "import { BModal } from 'bootstrap-vue'". Only 'bootstrap-vue/dist/bootstrap-vue.min.css' is being imported in the main.js file (and it still show up in the main bundle if I comment the CSS in main.js).

I'm using Webpack 5 and Vue CLI 5. All the routes are lazy-loaded in Vue-Router.

The strange thing is that I did a test a few weeks ago by removing all BV modules from the main.js file (when a few modules were still being imported globally) and at the time it did not showed up in the main bundle.

I'm also using Bootstrap 5 but importing globally only the JS modules that I need.

My main.js looks like this:

import 'bootstrap/js/dist/alert';
import 'bootstrap/js/dist/button';
import 'bootstrap/js/dist/collapse';
import 'bootstrap/js/dist/dropdown';
import 'bootstrap/js/dist/offcanvas';
// import 'bootstrap/js/dist/carousel';
// import 'bootstrap/js/dist/collapse';
// import 'bootstrap/js/dist/dropdown';
// import 'bootstrap/js/dist/modal';
// import 'bootstrap/js/dist/popover';
// import 'bootstrap/js/dist/scrollspy';
// import 'bootstrap/js/dist/tab';
// import 'bootstrap/js/dist/toast';
// import 'bootstrap/js/dist/tooltip';

import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap-vue/dist/bootstrap-vue.min.css'

import '/public/media/css/layout.css'
import '/public/media/css/mobile.css'

import '/src/assets/fontawesome/css/fontawesome.min.css'
import '/src/assets/fontawesome/css/solid.min.css'
import '/src/assets/fontawesome/css/regular.min.css'

my vue.config.js file is:

// vue.config.js

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const path = require('path');

module.exports = {
  css: {
    sourceMap: process.env.NODE_ENV === 'development' ? true : false
  },
  productionSourceMap: false,
  outputDir: 'dist',
  chainWebpack: (config) => {
    // remove from bundle folders and files that are not compiled
    config.plugin("copy").tap(([options]) => {
      options.patterns[0].globOptions.ignore.push("**/.sass-cache/**"),
      return [options]
    }),
    /* https://bootstrap-vue.org/docs#aliasing-vue-import */
    config.resolve.alias.set(
      'vue$',
      // If using the runtime only build
      path.resolve(__dirname, 'node_modules/vue/dist/vue.runtime.esm.js')
    )
  },
  configureWebpack: {
    entry: {
      app: './src/main.js',
    },
    optimization: {
      splitChunks: {
        chunks: 'all'
      },
      runtimeChunk: {
        name: 'js/runtime' // additional runtime chunk
      }
    },
    plugins: [
      new BundleAnalyzerPlugin()
    ],
  }
}

I have created a plugin for the BV "ModalPlugin" module:

bv-modal-plugin.js

import Vue from 'vue'
import { ModalPlugin } from 'bootstrap-vue'
Vue.use(ModalPlugin)

and I'm installing it on some components using:

import '/src/plugins/bv-modal-plugin'

Any clue why is this happening?

guijsbr · 2023-09-15T14:39:14Z

guijsbr
Sep 15, 2023
Author

I found out the problem. I have "BImgLazy" in a custom component that was not lazy-loaded in my entry-point. After I lazy-loaded it, bootstrap-vue stopped being included in the chunk-vendors.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Why bootstrap-vue is showing up in my initial bundle despite not being imported in main.js? #7174

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Why bootstrap-vue is showing up in my initial bundle despite not being imported in main.js? #7174

Uh oh!

guijsbr Sep 11, 2023

Replies: 1 comment

Uh oh!

guijsbr Sep 15, 2023 Author

guijsbr
Sep 11, 2023

guijsbr
Sep 15, 2023
Author