性能优化: 资源合并与压缩 -- 文件合并
2021-06-01 本文已影响0人
黑木令
之前有整理过一部分知识点, 一直没有发布, 因为都是有关 CSS 方面的零散内容; 现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家, 不仅仅是 CSS; 这个专题 就是前端性能相关的内容; 不积跬步，无以至千里, 一时得失莫要在意 。
好了废话不多说, 直接上代码以及图例(为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。
资源合并与压缩 -- 文件合并
1. 文件不合并的问题:
1. 文件与文件之间有插入的上行请求, 增加了 N-1 个网络延迟 。
2. 受丢包问题影响更严重 。
3. 经过代理服务器时, 可能会被断开 。
2. 合并文件的问题
1. 首屏渲染问题 。
2. 缓存失效问题 。
3. 文件合并的考虑(建议):
1. 公共库合并 。
1. 涉及到缓存失效的问题, 因为它不会频繁改动, 同时与业务代码分离, 不会受到业务代码的影响 。
2. 不同页面的合并 。
1. 针对单页应用, 将不同页面的 JS 分别打包, 路由到当前页面的时候再进行资源的加载 。
3. 见机行事, 随机应变 。
1. 针对不同的业务场景使用不同的方式 。
4. 文件合并的方法:
1. 使用在线网站进行文件合并 。
2. 使用 nodeJS 实现文件合并 (这里需要借助我们的构建工具: webpack / glup / fs3 等等) 。
5. 文件合并的方法:
1. 资源合并与压缩 -- 在线工具压缩 / fs3
1. fs3 是百度内部使用的构建工具 。
2. 它是结合 前端构建 与 服务端相关构建 一起的整个工程化的解决方案 。
2. 在线工具压缩只需要知道使用的工具地址即可, 没什么实际的作用 。
图片示例
N-1.png
