Ok.. Well what can we do?

First of all.. Code splitting and lazy loading

By applying both route-based and component-based code splitting and lazy loading, we can split our bundle file into small chunks.

To achieve this with vue-router, we can import our pages with this special syntax instead of importing them directly.

const router = new VueRouter({

routes: [

{

path: '/foo',

component: () =>

import(/* webpackChunkName: "foo" */ '@/views/foo'),

}

]

})

webpackChunkName is a special keyword. Sometimes we want to combine a few pages or components under the same chunk. The webpack will recognize this keyword and combine pages and components with the same name under the same chunk.

In the components we render conditionally:

<template>

<div>

<admin-panel v-if="userRole === 'admin'" />

</div>

</template> <script>

const adminPanel = () => import('AdminPanel.vue') export default {

components: { adminPanel }

}

</script>

We can use it like this. This component is included as soon as the condition has been met. It will not be included until then. The user will thus have downloaded the code of this component only when the condition met.

I have given an example, especially as above. Because what I want to mention is that you can develop a multi-role application. If you are developing an application that has multiple roles, the importance of splitting your code becomes even more important.

Let’s say you have a 3-roll system, Client, Admin and Guest.

If we hadn’t split our code, the user would have downloaded the code belonging to all roles regardless of his role. Beside the issue of generating a large size file with excessive unnecessary code, it is also a security breach.

Cherry picking

If you are using a component library that uses ES modules like bootstrap-vue , you can cherry pick its components instead of just registering all of them globally.

Instead of doing this:

import Vue from 'vue';

import BootstrapVue from 'bootstrap-vue';



Vue.use(BootstrapVue);

You can use it in this way:

import {

Modal,

Table,

Pagination,

Button,

Layout,

} from 'bootstrap-vue/es/components'; import bTooltipD from 'bootstrapvue/es/directives/tooltip/tooltip'; [Modal, Table, Pagination, Button, Layout].forEach(comp => {

Vue.use(comp);

}); Vue.directive('b-tooltip', bTooltipD);

Or using lodash-es instead of lodash .

You can search the support of other libraries you use. This also means that many code that will not be used will not be sent to the user.

After doing this, both our JavaScript and CSS code will be separated in a similar way as in the following structure: