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

在路由中使用

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

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

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

代码语言：javascript复制

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级别的代码分割。

webpack component hash import router

0 人点赞