vue-cli路由懒加载

当打包构建项目时，JavaScript包会变得非常大，影响页面加状。如果我们把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样会更高效。
路由被访问时才加载对应的路由文件，就是路由懒加载。

路由懒加载实现步骤：

1. 安装 @babel/plugin-syntax-dynamic-import

作用：用以解析识别import()动态导入语法—并非转换，而是解析识别

npm install babel-plugin-syntax-dynamic-import

2. 使用
   在babel.config.js中声明该插件，打开babel.config.js

//项目发布阶段需要用到的babel插件
const productPlugins = []

//判断是开发还是发布阶段
if(process.env.NODE_ENV === 'production'){
    
    
  //发布阶段
  productPlugins.push("transform-remove-console")
}

module.exports = {
    
    
  "presets": [
    "@vue/app"
  ],
  "plugins": [
    [
      "component",
      {
    
    
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ],
    ...productPlugins,
    //配置路由懒加载插件
    "@babel/plugin-syntax-dynamic-import"
  ]
}

3. 将路由更改为按需加载的形式，打开router.js，更改引入组件代码如下：

import Vue from 'vue'
import Router from 'vue-router'
const Login = () => import(/* webpackChunkName:"login_home_welcome" */ '@/components/Login.vue')
// import Login from '@/components/Login.vue'
const Home = () => import(/* webpackChunkName:"login_home_welcome" */ '@/components/Home.vue')
// import Home from '@/components/Home.vue'

现在的vue-cli自带懒加载模块，不需要重新导入babel-plugin-syntax-dynamic-import插件直接应用第3步即可