| 性能优化: 资源合并与压缩 | 您所在的位置：网站首页 › 合并怎么合并图片和文件 › 性能优化: 资源合并与压缩 |
性能优化: 资源合并与压缩
|
本文主要介绍了 “前端性能优化” CSS与JS 静态文件在开发中 “文件合并” 的实际操作方式 。
废话不多说, 直接上代码以及图例 (为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。 性能优化 - - - 上篇文章: 性能优化: 资源合并与压缩 – 压缩(前端开发过程中 JavaScript、HTML、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. 在线工具压缩只需要知道使用的工具地址即可, 没什么实际的作用 。图片示例 之前有整理过部分知识点, 现在将整理的相关内容, 验证之后慢慢分享给大家; 这个专题 就是 “前端性能优化” 的相关专栏; 不积跬步，无以至千里, 戒焦戒躁 。 如果对你有所帮助，喜欢的可以点个关注, 必然回关; 文章会持续打磨 。 有什么想要了解的前端知识吗? 可以评论区留言, 会及时跟进分享所提内容 。 整理知识点不易, 每次都是在工作繁忙之余夜深人静之时整理, 无论知识点是大是小, 都会验证后再分享, 以防自己发表的文章给大家造成误导 。如有问题还望不吝赐教，本人会及时更改 (本文原创, 如需转载，请注明出处) 。 |
【本文地址】
公司简介
联系我们