Vue and Webpack tree shaking, sideEffects and CSS: CSS of unused components being loaded

What if you use lazy loading components?

The components with the style tag will be loaded only when it's needed.

You can do the same for routes with the lazy loading routes.

If components are only sometimes needed, then lazy-loading them is a good way to reduce clutter.

ex:

const MyComponent = () => import(/* webpackChunkName: "MyComponent" */'../components/MyComponent');

https://vuedose.tips/dynamic-imports-in-vue-js-for-better-performance/

You could also incorporate plugins into your Webpack config to help manage bulky code, such as MiniCSSExtractPlugin, in this case.

I split my last project this way:

import Vue from 'vue'import VueRouter from 'vue-router'import LoginPage from '../views/LoginPage.vue'Vue.use(VueRouter);const Calendar = () => import(/* webpackChunkName: "calendar" */ '../pages/Calendar')const MyProfile = () => import(/* webpackChunkName: "myprofile" */ '../pages/MyProfile')        const pages = {  Calendar,  MyProfile,}const lazyLoader = (name) => pages[name];const routes = [  {    path: '/',    name: 'LoginPage',    component: LoginPage  },  {    path: '/app/calendar',    name: 'Calendar',    component: lazyLoader('Calendar')  },  {    path: '/app/my-profile',    name: 'MyProfile',    component: lazyLoader('MyProfile')  }]const router = new VueRouter({  mode: 'history',  base: process.env.BASE_URL,  routes})export default router