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

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

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

具体三步骤:

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

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

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

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

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'

 

这样子就可以了 啊!