前端 - vue+elementui首次进入js加载很慢的问题，如何解决？

Question

1.项目是使用的若依的框架，vue2+elementui.
2.页面问题:在页面出示加载的时候，会有一个js特别慢，能有10M，加载8s，严重影响页面的体验.
在测试环境还行，但是升级到正式的环境之后就会出现这个问题。
排查之后发现js也是开启gzip的webpack配置
3.webpack的配置

1，删除一些预加载，放在了webpack中，但是不生效。
2，"report": "vue-cli-service build --report" 使用了report命令，但是没有发现可以具体优化的点

Answer 1

从你的问题来看，这可能是由于你的项目在生产环境下加载过大的JavaScript文件导致的。在你的描述中，这个文件的大小达到了10M，加载时间8s，这无疑影响了用户体验。

解决这个问题可以从以下几个方面入手：

1. 代码分割（Code Splitting）：Webpack 提供了一种叫做代码分割的功能，可以将代码拆分成多个小块（chunks），然后按需加载或并行加载。这可以极大地提高页面加载速度，改善用户体验。
2. Tree Shaking：Tree Shaking 是指移除 JavaScript 上下文中未引用的代码。Vue CLI 在生产环境下默认开启 Tree Shaking，这可以帮助你剔除掉不需要的代码。
3. Gzip 压缩：尽管你说已经开启了 Gzip 压缩，但还是要确保你的服务器配置正确，并且所有需要压缩的文件都正确地被压缩了。
4. 开启持久化缓存：在生产环境下，可以考虑开启持久化缓存，这样一些常用的静态资源就可以被缓存起来，减少用户的加载时间。
5. 优化第三方库：有时候，第三方库可能会占用过大的空间。如果可能的话，可以考虑使用更小、更优化的第三方库替代品。
6. 使用 CDN：使用 CDN 来分发你的静态资源也是一个不错的选择。因为 CDN 通常会选择离用户最近的节点来提供服务，这样可以减少加载时间。
7. 优化图片和其他媒体资源：有时候，图片和其他媒体资源也会占用过大的空间。可以考虑优化这些资源的大小和格式。

希望这些建议能对你有所帮助！