zoukankan      html  css  js  c++  java
  • [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>
  • 相关阅读:
    [ZJOI2010] 数字计数
    [USACO] 2004 Open MooFest 奶牛集会
    数星星
    [SCOI2011] 糖果
    西瓜种植
    [NOI2018] 归程
    [APIO2012] 派遣
    小K的农场
    妮可妮可妮 [Hash]
    [ZJOI2012] 灾难
  • 原文地址:https://www.cnblogs.com/Answer1215/p/9079460.html
Copyright © 2011-2022 走看看