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

Question

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

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

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

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

Answer 1

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

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

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

Answer 2

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

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

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

使用cdn.
https://www.jsdelivr.com/pack...

防止cdn 挂了，可以自己处理多个切换。
jsdelivr.net挂了，前端如何动态的切换cdn呢？

Answer 7

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

Answer 8

使用Stimulsoft，我也遇到这个问题，方便看下具体实现吗，想参考下