[Vue] Code split by route in VueJS

In this lesson I show how to use webpack to code split based on route in VueJS. Code splitting is a useful tool to help eliminate unused code and only load what's necessary.

Additional Resources https://router.vuejs.org/en/advanced/lazy-loading.html

 

After generate the project by Vue-cli, make sure those dependencies were installed already:

npm i babel-eslint babel-plugin-syntax-dynamic-import eslint-plugin-import -D

 

.eslintrc.js:

module.exports = {
  root: true,
  parserOptions: { parser: "babel-eslint" },
  extends: ["plugin:vue/essential", "@vue/prettier"]
};

 

.babelrc:

{
  "presets": ["@vue/app"],
  "plugins": ["syntax-dynamic-import"]
}

 

routes.js:

import Vue from "vue";
import Router from "vue-router";
const Home = () => import(/* webpackChunkName: "Home" */ "./views/Home.vue");
const About = () => import(/* webpackChunkName: "About" */ "./views/About.vue");

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: "/",
      name: "home",
      component: Home
    },
    {
      path: "/about",
      name: "about",
      component: About
    }
  ]
});

 

The same for lazy loading a component:

<template>
  ...
    <h3>Modal Example</h3>
    <button @click="show">Show Modal</button>
  </div>
</template>

<script>
const MyModal = () => import("@/components/MyModal.vue"); // lazy loading the component
export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  methods: {
    show () {
      this.$modal.show(MyModal);
    },
  }
};
</script>