路由预加载

路由预加载

Created: Aug 14, 2020 11:18 PM
分类: 小技巧
技术: 路由懒加载, 预加载
文件: src/router/index.js, vue.config.js

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

npm install --save-dev @babel/plugin-syntax-dynamic-import

先安装这个插件,之后可以使用如下语法来达到按需引入

{
    path: '/',
    name: 'Home',
    component: home,
    redirect: './index',
    children: [
      {
        path: 'index',
        name: 'index',
        component: index
      },
      {
        path: 'product/:id',
        name: 'product',
        component: () => import('@/pages/product')
      },
      {
        path: 'detail/:id',
        name: 'detail',
        component: () => import('@/pages/detail')
      }
    ]
  }

但是还是存在问题,在第一次加载首页的时候全部加载完成了

我们在chainWebpack里面修改webpack配置,这里删除全部达到不打包进去,之后启动项目达到真正按需加载

// 删除预加载，真正实现按需加载
chainWebpack: (config) => {
  config.plugins.delete('prefetch')
}