性能优化: 资源合并与压缩 -- 文件合并

之前有整理过一部分知识点, 一直没有发布, 因为都是有关 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

如果对你有所帮助，希望大家喜欢点个关注；整理知识点不易, 每次都是在工作繁忙之余夜深人静之时整理, 每次整理时都在思考如何让大家更容易理解, 更容易找到、看到自己想看到的内容; 无论知识点是大是小, 我都会验证后再分享, 以防自己发表的文章给大家造成误导。如有问题还望不吝赐教，本人会及时更改 (本文原创, 如需转载，请注明出处) 。