vue加载外部20多M的JS文件,如何优化

唐_璜Taro
  • 58

最近项目中的用到了报表设计器(Stimulsoft),就必须引入以下的JS文件和CSS文件,这必要的5个文件加起来接近20M,(开GZip压缩后,体积小了8M)这些文件现在全是放在前端中的

image.png

在最近一次的加载下(在网络环境下不好的情况),首屏加载达到了3分钟多,之前遇到的用户带宽环境3-5M用户(简直恐怖如斯)

image.png

之前想法是:判断用户登录成功后,偷偷进行加载这些大文件,通过document.createElement 动态创建script和link,把这5个文件添加到head中去,试验了一下。但是一刷新页面,动态创建的标签就没了,如果通过监听刷新事件去不停去做动态引入,感觉也不是好的解决方法

所以想请教一下大佬们,面对这种体积大,又不得不在单页面应用中引入这些的JS,CSS文件情况下,有没有什么比较好的解决方法?

回复
阅读 2.4k
7 个回答

这些文件都已经加了http缓存了,所以第二次进来应该不会会出现长时间的等待,但这样做没法解决首次进来的等待。

如果用户在首页(或者登录页)不需要这些文件,那么可以这么处理:

  1. 将这几个js切成几个小文件,每个文件不超过200k。
  2. 在用户在这几个页面停留的时候暗中用ajax获取这些小文件,拿到字符串,拼接到一起,然后存到IndexedDB中(这样用户二次进入就不需要加载了)。这里ajax需要并行发送,最大程度利用浏览器并发请求的能力。
  3. 当用户进入到需要这些js的页面,首先判断这些文件是否已经全部请求完成,如果没有,则继续等待这些请求全部完成。将最终拼接好的js字符串eval执行。

在需要用到这个js的地方,第一次加载的时候加一个加载动画或者类似进度条的效果,只要在加载过程中页面不错位即可。加了提示之后,用户自己会明白他的网络慢的:),对用户来说有一个正向反馈,体验可能会好很多。

有时候不一定都要靠技术去解决问题,产品设计规划也很重要。

首页是否必须,不是必须,可以在onload之后提前预加载,然后设置本地缓存,有缓存只是第一次比较慢。有需要可以加上加载动画,动画好看也一样的。另外可以的话服务端用http2.0或者放cdn

  1. 先看看能否减少加载量,比如官方文档有没有介绍一些 tree-shaking 的方案。这一步最重要,不然 10M 的 js 你怎么都跑不脱
  2. 启用路由 lazy-loading,把几个 js 分散到不同页面加载
  3. 使用预加载 prefetch,让浏览器在空闲时间加载

方案1.查看是否支持按需引用,
方案2.预请求配合indexDB将文件放到前端缓存

1.必须要做缓存!第一次加载完成后,刷新或者切换页面,都直接走缓存。
2.大体积的JS文件尽量切割得更小,无论你是通过打包工具还是其他方式。
3.根据项目情况看能不能用上HTTP2的server push, 能用就能实现提前加载这些文件。

宣传栏