文件压缩 - JavaScript/CSS/HTML/图片

旧城等待， 2023-02-17 11:13 9阅读 0赞

1.应用场景

<table> 
 <tbody> 
 <tr> 
 <td> 主要用于前端静态文件压缩, 最小化,减少内容传输耗时，优化前端性能. </td> 
 </tr> 
 </tbody> 
</table>

2.学习/操作

<table> 
 <tbody> 
 <tr> 
 <td> 文档阅读： <a href="http://www.webkaka.com/blog/archives/html-compress-online-in-webkaka.html" rel="nofollow">http://www.webkaka.com/blog/archives/html-compress-online-in-webkaka.html</a>&nbsp; //非常好用的HTML在线压缩及格式化工具 <a href="http://www.i7758.com/archives/2395.html" rel="nofollow">http://www.i7758.com/archives/2395.html</a>&nbsp; //9款JavaScript压缩工具 <a href="https://blog.csdn.net/william_n/article/details/103140509" rel="nofollow">https://blog.csdn.net/william_n/article/details/103140509</a>&nbsp; //各种工具 - 在线 <a href="https://blog.csdn.net/baidu_38477614/article/details/78901107" rel="nofollow">https://blog.csdn.net/baidu_38477614/article/details/78901107</a>&nbsp; //性能优化之图片压缩（质量压缩、尺寸压缩 &nbsp; // 推荐阅读&nbsp; --- 20201010&nbsp; 家里 <a href="https://blog.csdn.net/geekmubai/article/details/81435977" rel="nofollow">https://blog.csdn.net/geekmubai/article/details/81435977</a>&nbsp; ///前端优化之资源压缩 <a href="https://blog.csdn.net/curioust/article/details/83715257" rel="nofollow">https://blog.csdn.net/curioust/article/details/83715257</a>&nbsp; //高并发解决方案:浏览器缓存和压缩优化技术 <a href="https://blog.csdn.net/curioust/article/details/83119910" rel="nofollow">https://blog.csdn.net/curioust/article/details/83119910</a>&nbsp;//高并发解决方案: 减少 HTTP 请求次数 &nbsp; &nbsp; 以下压缩工具，均为在线压缩工具 &nbsp; 1.HTML压缩 <a href="https://c.runoob.com/front-end/47" rel="nofollow">https://c.runoob.com/front-end/47</a>&nbsp; &nbsp;//菜鸟工具 &nbsp; 效果如下: <img alt="" height="654" src="https://img-blog.csdnimg.cn/20201010182545671.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="1200"> &nbsp; 2.CSS压缩 <a href="https://c.runoob.com/front-end/52" rel="nofollow">https://c.runoob.com/front-end/52</a>&nbsp; &nbsp;//并不能去除注释 <a href="https://www.bejson.com/otherformat/css/" rel="nofollow">https://www.bejson.com/otherformat/css/</a>&nbsp; //推荐 &nbsp; 3.JavaScript压缩 <a href="http://dean.edwards.name/packer/" rel="nofollow">http://dean.edwards.name/packer/</a>&nbsp; //JS压缩&nbsp; 执行速度很快 &nbsp; 4.图片压缩 <a href="https://www.filedo.cn/" rel="nofollow">https://www.filedo.cn/</a>&nbsp; //灵动办公 图片压缩山涉及到文件质量与尺寸的问题 建议阅读： <a href="https://blog.csdn.net/baidu_38477614/article/details/78901107" rel="nofollow">https://blog.csdn.net/baidu_38477614/article/details/78901107</a>&nbsp; //性能优化之图片压缩（质量压缩、尺寸压缩 <img alt="" height="662" src="https://img-blog.csdnimg.cn/20200613165654490.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="584"> &nbsp; 补充： 其实图片加速的方式，还会采用cdn方式。 &nbsp; 5.总结 实际工程项目中使用的webpack之类的打包工具 但是原理上还是压缩，只不过集成到一起，省去一些麻烦. 而压缩的原理也只不过是将无用的东西删除掉.其实我们也可以自己写，只不过可以直接使用其他人已经实现的工具即可。 webpcak工程化打包： TBD &nbsp; 前端项目进行一键式压缩： TBD &nbsp; &nbsp; 后续补充 ... </td> 
 </tr> 
 </tbody> 
</table>

3.问题/补充

4.参考

<table> 
 <tbody> 
 <tr> 
 <td> <a href="http://www.webkaka.com/blog/archives/html-compress-online-in-webkaka.html" rel="nofollow">http://www.webkaka.com/blog/archives/html-compress-online-in-webkaka.html</a>&nbsp; //非常好用的HTML在线压缩及格式化工具 <a href="http://www.i7758.com/archives/2395.html" rel="nofollow">http://www.i7758.com/archives/2395.html</a>&nbsp; //9款JavaScript压缩工具 <a href="https://blog.csdn.net/william_n/article/details/103140509" rel="nofollow">https://blog.csdn.net/william_n/article/details/103140509</a>&nbsp; //各种工具 - 在线 <a href="https://blog.csdn.net/baidu_38477614/article/details/78901107" rel="nofollow">https://blog.csdn.net/baidu_38477614/article/details/78901107</a>&nbsp; //性能优化之图片压缩（质量压缩、尺寸压缩 &nbsp; <a href="https://blog.csdn.net/geekmubai/article/details/81435977" rel="nofollow">https://blog.csdn.net/geekmubai/article/details/81435977</a>&nbsp; ///前端优化之资源压缩 <a href="https://blog.csdn.net/curioust/article/details/83715257" rel="nofollow">https://blog.csdn.net/curioust/article/details/83715257</a>&nbsp; //高并发解决方案:浏览器缓存和压缩优化技术 <a href="https://blog.csdn.net/curioust/article/details/83119910" rel="nofollow">https://blog.csdn.net/curioust/article/details/83119910</a>&nbsp;//高并发解决方案: 减少 HTTP 请求次数 </td> 
 </tr> 
 </tbody> 
</table>

后续补充

...