如何通过3种示例实现Vue中的路由懒加载？

本文共计507个文字，预计阅读时间需要3分钟。

前言：优化路径懒加载在访问页面时的加载时间，非常重要，可以提升首页加载速度，避免出现加载时白页。如果没有懒加载，webpack打包后的文件会非常大。+按需加载（常用）+Vue异步组件+w

前言

路由懒加载在访问页面的时候非常重要，能够提高首页加载速度，避免出现加载时候白页，如果没有懒加载，webpack打包后的文件会非常大。

• import按需加载（常用）
• vue异步组件
• webpack提供的require.ensure()
  

1、import按需加载（常用）

允许将不同的组件打包到一个异步块中，需指定了相同的webpackChunkName。

把组件按组分块

const A = () => import(/* webpackChunkName: "group-A" */ '@/A/A.vue') const B = () => import(/* webpackChunkName: "group-A" */ '@/A/B.vue') const C = () => import(/* webpackChunkName: "group-A" */ '@/A/C.vue')

注意：如果使用的是 babel，需要安装syntax-dynamic-import插件，才能使 babel 可以正确地解析语法。

2、vue异步组件

使用vue的异步组件 , 实现按需加载，每个组件生成一个js文件，实现组件的懒加载。