当打包构建项目时,Js包变得非常大,影响页面加载。如果我们能把不同的路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更高效了。
1.安装包:npm i @babel/plugin-syntax-dynamic-import -S
2.注册插件: 直接复制: '@babel/plugin-syntax-dynamic-import'
3.修改router.js中的组件导入
-
将所有的组件,进行分组,随意三两个组件一组
-
分组之后,这些组件就不会一次性全部加载
-
而是在用到某一个组件是,加载他所属的这一组组件
-
从而实现了懒加载
-
代码如下:可以直接复制
-
// import Login from './components/Login.vue'
const Login = () => import(/* webpackChunkName: "login_home_welcome" */ './components/Login.vue')
// import Home from './components/Home.vue'
const Home = () => import(/* webpackChunkName: "login_home_welcome" */ './components/Home.vue')
// import Welcome from './components/Welcome.vue'
const Welcome = () => import(/* webpackChunkName: "login_home_welcome" */ './components/Welcome.vue')