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 ???} ?]});[Vue] Code split by route in VueJS
原文地址：https://www.cnblogs.com/Answer1215/p/9079460.html