Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

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

guijsbr started this conversation inGeneral
Discussion options

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.

bootstrap-vue-bundle-analyser2

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.jsconst 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?

You must be logged in to vote

Replies: 1 comment

Comment options

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.

You must be logged in to vote
0 replies
Sign up for freeto join this conversation on GitHub. Already have an account?Sign in to comment
Category
General
Labels
None yet
1 participant
@guijsbr
[8]ページ先頭
©2009-2025 Movatter.jp