How can I remove `icons.js` from the project

I found that icons.js occupies a large part of the resources. Is there any way to not load this file? Because I want to reduce the size of the package as much as possible

P.S. I tried to use some components in the form of Vue plugins, but I found it would still be loaded:

import { LayoutPlugin } from "bootstrap-vue";
Vue.use(LayoutPlugin);

Hope you guys can answer my confusion.

[Hiws]

"analyzer": "use_analyzer=true npm run serve"

npm run serve launches a development environment without any tree shaking or minification. You should only analyse a production build.

You can do that by using the following script "build:report": "vue-cli-service build --report",. This will build your project into the dist folder, and generate a report.html file.

Here’s the steps i did when trying to reproduce it (i used yarn, but npm should be the same result).

cmd

# @vue/cli 4.5.4
vue create project-name
# I picked standard vue 2 settings, nothing custom.
cd project-name
yarn add bootstrap bootstrap-vue

package.json (added the script i mentioned above, everything else is default)

{
  "name": "bootstrap-vue-test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build:report": "vue-cli-service build --report",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "bootstrap": "^4.5.2",
    "bootstrap-vue": "^2.16.0",
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  }
}

main.js

import Vue from 'vue'
import App from './App.vue'
import { LayoutPlugin } from "bootstrap-vue";

import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";

Vue.use(LayoutPlugin)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

App.vue (testing to ensure the LayoutPlugin is installed correctly)

<template>
  <div id="app">
    <b-container>
      <b-row>
        <b-col>
          Col 1
        </b-col>
        <b-col>
          Col 2
        </b-col>
      </b-row>
    </b-container>
  </div>
</template>

cmd

yarn build:report
./dist/report.html

[luaz]

I believe the icons tree-shaking works most of the time, except under certain circumstances. For example, I found that if I include SkeletonPlugin, the icons tree-shaking would fail, so I import BSkeleton component only and it works.

The following is my configuration using Nuxt.

module.exports = {
  modules: ['bootstrap-vue/nuxt'],
  bootstrapVue: {
    components: ['BSkeleton', 'BIconSearch'],
    componentPlugins: [
      'NavbarPlugin', 
      'LayoutPlugin', 
      'ButtonPlugin', 
      // 'SkeletonPlugin' 
    ]
  }
}

Source: https://code.luasoftware.com/tutorials/vuejs/bootstrapvue-icons-import-specific-icon-only/