Optimize BootstrapVue/Bootstrap Bundle Size (JavaScript and CSS) for Nuxt
April 13, 2022Nuxt Config
Edit nuxt.config.js
- Disable
bootstrapCSS
andbootstrapVueCSS
- 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]
- algo-trading
- algolia
- analytics
- android
- android-ktx
- android-permission
- android-studio
- apps-script
- bash
- binance
- bootstrap
- bootstrapvue
- chartjs
- chrome
- cloud-functions
- coding-interview
- contentresolver
- coroutines
- crashlytics
- crypto
- css
- dagger2
- datastore
- datetime
- docker
- eslint
- firebase
- firebase-auth
- firebase-hosting
- firestore
- firestore-security-rules
- flask
- fontawesome
- fresco
- git
- github
- glide
- godot
- google-app-engine
- google-cloud-storage
- google-colab
- google-drive
- google-maps
- google-places
- google-play
- google-sheets
- gradle
- html
- hugo
- inkscape
- java
- java-time
- javascript
- jetpack-compose
- jetson-nano
- kotlin
- kotlin-serialization
- layout
- lets-encrypt
- lifecycle
- linux
- logging
- lubuntu
- markdown
- mate
- material-design
- matplotlib
- md5
- mongodb
- moshi
- mplfinance
- mysql
- navigation
- nginx
- nodejs
- npm
- nuxtjs
- nvm
- pandas
- payment
- pip
- pwa
- pyenv
- python
- recylerview
- regex
- room
- rxjava
- scoped-storage
- selenium
- social-media
- ssh
- ssl
- static-site-generator
- static-website-hosting
- sublime-text
- ubuntu
- unit-test
- uwsgi
- viewmodel
- viewpager2
- virtualbox
- vue-chartjs
- vue-cli
- vue-router
- vuejs
- vuelidate
- vuepress
- web-development
- web-hosting
- webpack
- windows
- workmanager
- wsl
- yarn