项目优化之路由懒加载的实现 -- vue-cli3

     当我们打包够将项目时，js包会变得很大，影响页面的加载。如果我们把不同的路由分割

成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样子就更加高效了

具体三步骤：

①： 安装 @babel/plugin-syntax-dynamic-import 包

②：在babel.config.js 配置文件中声明该插件

③：将路由改为按需加载的形式，示例代码如下：

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'

 

这样子就可以了 啊！