[Vue] Code split by route in Vuejs

In the lesson I show how to use Webpack to code split based on the 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 = {  true,  ' 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); Exportdefault NewRouter ({routes: [{path:"/", Name:"Home", Component:home}, {path:"/about", Name:"About", Component:about}]});

[Vue] Code split by route in Vuejs