- 环境: vue-cli3 和webpack4
起因
-
当前用户的页面权限是根据后端返回的权限页面来分配路由,所以本地路由只会存login, home和404的路由地址,其余的并不会配置.
-
通过
npm run build使用webpack-bundle-analyzer可视化插件发现某个js文件体积特别大 -
所以会出现 老生常谈的首屏加载慢的问题
分析过程
- 发现那个体积最大的js文件 里面打包出来的是views下面所有的页面,因为本地并没有采用页面懒加载的方式,可不就被打包在一起了嘛.
- 通过查看代码发现, 之前使用的是
(resolve) => require([`@/views/${view}`], resolve)的方式来加载组件页面,这么做是因为 webpack4 无法使用import的方式引入
解决问题
- 因为后端会返回组件页面的name, 所以前端可以在本地建立一个动态路由的字典,然后根据这个name来加载页面, 使用
new Set([]), 不要使用{}, 如图:
- 路由字典
- 通过name来获取路由页面的路径,从而引入页面组件
最后
我们再build查看发现, 已经实现分包,从而也实现了路由的懒加载,提升首屏的打开速度
