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