Vue项目优化：路由懒加载

• Z时代
• 2024-01-10
• 分类：综合

  当打包构建项目时，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')
  

   

以上是 Vue项目优化：路由懒加载 的全部内容， 来源链接： utcz.com/z/375409.html