vue项目中页面组件懒加载使用webpackChunkNmae

拿我格子衫来

发布于 2022-01-24 18:15:05

4260

发布于 2022-01-24 18:15:05

文章被收录于专栏：TopFE

在路由中使用

component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')

来实现组件的懒加载这种配置会生产一个about.[hash].js

对于优化首屏很有帮助，但对于内部页面会有一点损失，比较资源不会一次加载到位的。

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

在开发时可以有选择性地懒加载，全部加载。这个属于是router级别的代码分割。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

webpack