项目优化之路由懒加载的实现 -- 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'
这样子就可以了 啊!