[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>

巴特西

[Vue] Code split by route in VueJS

最新文章

热门文章