在 Vue 中实现路由懒加载的方式有以下几种:
- 使用
vue异步组件
:将路由对应的组件打包成一个个的JS
代码块,只有在这个路由被访问到的时候,才加载对应的组件,即是对应的js
文件。 - 使用
ES
中的import
:常用ES
中的import
方法去实现路由懒加载,即component: () => import(/* webpackChunkName: " User" */ ' ../views/User' )
。 - 使用
webpack
提供的require.ensure
:require.ensure
是webpack
提供的一种异步加载技术,可以实现按需加载资源包括js
、css
等文件。使用require.ensure
方法进行vue-router
配置路由实现懒加载,它可以将require
中的文件进行单独打包,每个组件打包成一个js
文件,也可以指定相同的ChunkName
按组打包js
文件。
你可以根据实际情况选择适合的方式来实现路由懒加载。