Optimize BootstrapVue/Bootstrap Bundle Size (JavaScript and CSS) for Nuxt

April 13, 2022

Nuxt Config

Edit nuxt.config.js

  • Disable bootstrapCSS and bootstrapVueCSS
  • Selectively load icons you want to use only
  • Selectively load commonly used plugins/components only, where we will load other plugins manually when necessary
const config = {
  css: [
    '~/assets/styles/bootstrap.scss',
    // '~/assets/styles/app.scss'
  ],
  modules: [
    'bootstrap-vue/nuxt',
  ],
  bootstrapVue: {
    // icons: false,
    bootstrapCSS: false,
    bootstrapVueCSS: false,
    components: ['BSkeleton', 'BSkeletonImg', 'BIconSearch', 'BIconGeoAlt', 'BIconThreeDotsVertical', 'BIconTagFill', 'BIconArrowLeft'],
    // components: [],
    componentPlugins: [
      // 'AlertPlugin',
      'BadgePlugin', 
      'BreadcrumbPlugin',
      'ButtonPlugin', 
      'CardPlugin',
      // 'FormPlugin', 
      // 'FormCheckboxPlugin',
      // 'FormDatepickerPlugin',
      // 'FormGroupPlugin',
      // 'FormInputPlugin',
      // 'FormSelectPlugin', 
      // 'FormTagsPlugin',
      // 'FormTextareaPlugin',
      'ImagePlugin', 
      //'InputGroupPlugin', 
      'LayoutPlugin', 
      'LinkPlugin', 
      //'ListGroupPlugin',
      'MediaPlugin',
      //'ModalPlugin',
      'NavbarPlugin',
      //'OverlayPlugin',
      //'PaginationPlugin', 
      //'PaginationNavPlugin',
      //'SkeletonPlugin', // cause full icons being loaded
      //'SpinnerPlugin', 
      //'TablePlugin',
      //'ToastPlugin',
    ],
    directivePlugins: []
  },
}

CSS

Install SCSS support for Nuxt.

npm install --save-dev sass sass-loader@10 fibers

Create assets/styles/bootstrap.scss.

  • remove components which are not used
  • we will move componnets which are less commonly used into another scss file, and load them when necessary
// @import "node_modules/bootstrap/scss/bootstrap";

// Option B: Include parts of Bootstrap

// Required
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";

$breadcrumb-bg: #FAFAFA;

// @import "node_modules/bootstrap/scss/root";
@import "node_modules/bootstrap/scss/reboot";
@import "node_modules/bootstrap/scss/type";
@import "node_modules/bootstrap/scss/images";
// @import "node_modules/bootstrap/scss/code";
@import "node_modules/bootstrap/scss/grid";
//** @import "node_modules/bootstrap/scss/tables";
// @import "node_modules/bootstrap/scss/forms";
@import "node_modules/bootstrap/scss/buttons";
//**
// @import "node_modules/bootstrap/scss/transitions";
// @import "node_modules/bootstrap/scss/dropdown";
// @import "node_modules/bootstrap/scss/button-group";
// @import "node_modules/bootstrap/scss/input-group";
//**
// @import "node_modules/bootstrap/scss/custom-forms";
@import "node_modules/bootstrap/scss/nav";
@import "node_modules/bootstrap/scss/navbar";
@import "node_modules/bootstrap/scss/card";
@import "node_modules/bootstrap/scss/breadcrumb";
// @import "node_modules/bootstrap/scss/pagination";
@import "node_modules/bootstrap/scss/badge";
// @import "node_modules/bootstrap/scss/jumbotron";
@import "node_modules/bootstrap/scss/alert";
// @import "node_modules/bootstrap/scss/progress";
@import "node_modules/bootstrap/scss/media";
//**@import "node_modules/bootstrap/scss/list-group";
@import "node_modules/bootstrap/scss/close";
//**
// @import "node_modules/bootstrap/scss/toasts";
// @import "node_modules/bootstrap/scss/modal";
// @import "node_modules/bootstrap/scss/tooltip";
// @import "node_modules/bootstrap/scss/popover";
// @import "node_modules/bootstrap/scss/carousel";
//**
// @import "node_modules/bootstrap/scss/spinners";
@import "node_modules/bootstrap/scss/utilities";
@import "node_modules/bootstrap/scss/print";

// @import 'node_modules/bootstrap-vue/src/index.scss';


// Include variables and utilities first
@import "node_modules/bootstrap-vue/src/variables";
@import "node_modules/bootstrap-vue/src/utilities";

// General styling needed for special form controls
// @import "node_modules/bootstrap-vue/src/custom-controls";

// Include custom SCSS for components
// @import "node_modules/bootstrap-vue/src/components/index";
// @import "node_modules/bootstrap-vue/src/components/avatar/index";
// @import "node_modules/bootstrap-vue/src/components/calendar/index";
@import "node_modules/bootstrap-vue/src/components/card/index";
// @import "node_modules/bootstrap-vue/src/components/dropdown/index";
// @import "node_modules/bootstrap-vue/src/components/form-checkbox/index";
// @import "node_modules/bootstrap-vue/src/components/form-datepicker/index";
// @import "node_modules/bootstrap-vue/src/components/form-file/index";
// @import "node_modules/bootstrap-vue/src/components/form-input/index";
// @import "node_modules/bootstrap-vue/src/components/form-radio/index";
// @import "node_modules/bootstrap-vue/src/components/form-rating/index";
// @import "node_modules/bootstrap-vue/src/components/form-spinbutton/index";
// @import "node_modules/bootstrap-vue/src/components/form-tags/index";
// @import "node_modules/bootstrap-vue/src/components/form-timepicker/index";
// @import "node_modules/bootstrap-vue/src/components/input-group/index";
@import "node_modules/bootstrap-vue/src/components/media/index";
// @import "node_modules/bootstrap-vue/src/components/modal/index";
@import "node_modules/bootstrap-vue/src/components/nav/index";
@import "node_modules/bootstrap-vue/src/components/navbar/index";
// @import "node_modules/bootstrap-vue/src/components/pagination-nav/index";
// @import "node_modules/bootstrap-vue/src/components/pagination/index";
// @import "node_modules/bootstrap-vue/src/components/popover/index";
// @import "node_modules/bootstrap-vue/src/components/sidebar/index";
@import "node_modules/bootstrap-vue/src/components/skeleton/index";
//** @import "node_modules/bootstrap-vue/src/components/table/index";
// @import "node_modules/bootstrap-vue/src/components/time/index";
// @import "node_modules/bootstrap-vue/src/components/toast/index";
// @import "node_modules/bootstrap-vue/src/components/tooltip/index";


// Include custom SCSS for icons
@import "node_modules/bootstrap-vue/src/icons/index";

I created another console.scss styles which is only required at admin pages.

@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";

@import "node_modules/bootstrap/scss/list-group";
@import "node_modules/bootstrap/scss/tables";


@import "node_modules/bootstrap-vue/src/variables";
@import "node_modules/bootstrap-vue/src/utilities";

@import "node_modules/bootstrap-vue/src/components/table/index";

I created another user.scss styles which is only required when user login.

@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";

@import "node_modules/bootstrap/scss/transitions";
@import "node_modules/bootstrap/scss/dropdown";
// @import "node_modules/bootstrap/scss/button-group";
@import "node_modules/bootstrap/scss/input-group";

@import "node_modules/bootstrap/scss/forms";
@import "node_modules/bootstrap/scss/custom-forms";
@import "node_modules/bootstrap/scss/modal";
@import "node_modules/bootstrap/scss/toasts";
@import "node_modules/bootstrap/scss/spinners";


@import "node_modules/bootstrap-vue/src/variables";
@import "node_modules/bootstrap-vue/src/utilities";

@import "node_modules/bootstrap-vue/src/components/dropdown/index";
@import "node_modules/bootstrap-vue/src/components/input-group/index";

@import "node_modules/bootstrap-vue/src/custom-controls";
@import "node_modules/bootstrap-vue/src/components/calendar/index";
@import "node_modules/bootstrap-vue/src/components/form-checkbox/index";
@import "node_modules/bootstrap-vue/src/components/form-datepicker/index";
@import "node_modules/bootstrap-vue/src/components/form-input/index";
@import "node_modules/bootstrap-vue/src/components/form-radio/index";
@import "node_modules/bootstrap-vue/src/components/form-tags/index";

@import "node_modules/bootstrap-vue/src/components/modal/index";
@import "node_modules/bootstrap-vue/src/components/toast/index";

Usage - Selectively load SCSS and Plugins

For admin pages

  • I can also put these code in nuxt layout and create a custom layout for admin
  • I load certain plugins and styles for admin pages only
<script>
import Vue from 'vue'
import { ModalPlugin, OverlayPlugin, ToastPlugin } from 'bootstrap-vue'
Vue.use(ModalPlugin)
Vue.use(OverlayPlugin)
Vue.use(ToastPlugin)

export default {
  async mounted() {

  }
}  
</script>

<style lang="scss">
@import '~assets/styles/user';
@import '~assets/styles/console';
</style>

You can also include certain plugins and styles in a component, and only load them dynamically when necessary (such as when user click a button or signin).

Refer BootstrapVue Load Modal JavaScript Dynamically Only When Shown (Nuxt).

I watch currentUser changes in nuxt layout and load user.scss whenever user is sign in.

<script>
export default {
  data() {
    userStyleLoaded: false
  },
  watch: {
    currentUser: async function(newUser, oldUser) {
      if (newUser && !this.userStyleLoaded) {
        await import('~/assets/styles/user.scss')
        this.userStyleLoaded = true
      } 
    }
  },
}
</script>

Refer [Nuxt Sign-in With Firebase Auth V9 Modular With FirebaseUI]

This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.