[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
    }
  ]
});