一个网站第一次打开需要10秒钟才能完全打开，之后打开平均速度在5秒左右，这个网站的加载速度算慢

Question

前端是react
使用webpack打包
后台是spring boot
项目在Tomcat中

如果我想提升速度，我该怎么做才好，目前图片、js和css文件已经全放到了七牛云中

以下是清缓存后的一次加载：

Answer 1

首页渲染速度瓶颈主要就是请求数和资源大小了，大概以下几个方向吧：

• http1 同时只能下载 5 个 resource，因此加载资源的请求数过多，会影响首页加载速度，尝试更换 http2 或者尽可能的合并相同类型资源的请求数，比如 css 和 js 都合并到一起，图片合成雪碧图或者懒加载，使用 http2 的基础上可以无视并行请求个数，极大地提升加载速度
• html 有 preload 属性可以利用一下，略微提升加载速度，大概 10% 到 30%
• 看看 web 服务器是否配置了 gzip，根据压缩比可以提升可观的加载速度
• 图片如果可以降低质量的话（不影响观赏性），可以使用尺寸更小的格式，比如 webp 或者 jpg 来代替 png 格式，这个方法会提升可观的图片加载速度

还有其他一些方法，但没有上面的简单易行且收效高。

Answer 2

分析一下network里面都请求了哪些东西。有一些可能之前不需要的，可以放在后面加载

Answer 3

10s时间也忒长了吧，是加载了过多图片，还是组件不是按需引入，直接一次全部引入？
f12 网络请求，看一下占用时间的是那些资源，那些文件的体积过大，针对它进行优化

Answer 4

把类库拆分出去，然后放cdn。

1. 简单的就是externals排除掉，然后引现成的cdn；
2. 麻烦点就打包成一个dll文件，放cdn；

另一个，看你的截图，那个2.xxx.js有300多k，这种名字可能是一个路由页面。它的内部可能重复打包了一些组件，使用webpack-bundle-analyzer查看，如果存在，将其抽离为公共代码；
再一个，弹窗之类的东西可以作出按需加载，使用import()引入，webpack会继续将其拆分；

Answer 5

看资源加载的时序图，是某个资源本身太大，导致加载慢，还是某个请求xhr返回慢，找出需要优化的重点，或者先排除那个从时序图看起来加载慢的资源，再加载试试，确定是那个资源问题，再决定优化

Answer 6

首页渲染速度瓶颈主要就是请求数和资源大小了，而且要注意去优化占用了加载时间的文件，
IIS7网站监控
可以获取严重占用加载时间的JS或者图片、css等html所用文件,帮助我们提升网站打开速度。