天天看點

檔案壓縮 - JavaScript/CSS/HTML/圖檔

1.應用場景

主要用于前端靜态檔案壓縮, 最小化,減少内容傳輸耗時,優化前端性能.

2.學習/操作

文檔閱讀:

http://www.webkaka.com/blog/archives/html-compress-online-in-webkaka.html  //非常好用的HTML線上壓縮及格式化工具

http://www.i7758.com/archives/2395.html  //9款JavaScript壓縮工具

https://blog.csdn.net/william_n/article/details/103140509  //各種工具 - 線上

https://blog.csdn.net/baidu_38477614/article/details/78901107  //性能優化之圖檔壓縮(品質壓縮、尺寸壓縮

// 推薦閱讀  --- 20201010  家裡

https://blog.csdn.net/geekmubai/article/details/81435977  ///前端優化之資源壓縮

https://blog.csdn.net/curioust/article/details/83715257  //高并發解決方案:浏覽器緩存和壓縮優化技術

https://blog.csdn.net/curioust/article/details/83119910 //高并發解決方案: 減少 HTTP 請求次數

以下壓縮工具,均為線上壓縮工具

1.HTML壓縮

https://c.runoob.com/front-end/47   //菜鳥工具

效果如下:

檔案壓縮 - JavaScript/CSS/HTML/圖檔

2.CSS壓縮

https://c.runoob.com/front-end/52   //并不能去除注釋

https://www.bejson.com/otherformat/css/  //推薦

3.JavaScript壓縮

http://dean.edwards.name/packer/  //JS壓縮  執行速度很快

4.圖檔壓縮

https://www.filedo.cn/  //靈動辦公

圖檔壓縮山涉及到檔案品質與尺寸的問題

建議閱讀:

https://blog.csdn.net/baidu_38477614/article/details/78901107  //性能優化之圖檔壓縮(品質壓縮、尺寸壓縮

檔案壓縮 - JavaScript/CSS/HTML/圖檔

補充:

其實圖檔加速的方式,還會采用cdn方式。

5.總結

實際工程項目中使用的webpack之類的打包工具

但是原理上還是壓縮,隻不過內建到一起,省去一些麻煩.

而壓縮的原理也隻不過是将無用的東西删除掉.其實我們也可以自己寫,隻不過可以直接使用其他人已經實作的工具即可。

webpcak工程化打包:

TBD

前端項目進行一鍵式壓縮: TBD

後續補充

...

3.問題/補充

TBD

4.參考

http://www.webkaka.com/blog/archives/html-compress-online-in-webkaka.html  //非常好用的HTML線上壓縮及格式化工具

http://www.i7758.com/archives/2395.html  //9款JavaScript壓縮工具

https://blog.csdn.net/william_n/article/details/103140509  //各種工具 - 線上

https://blog.csdn.net/baidu_38477614/article/details/78901107  //性能優化之圖檔壓縮(品質壓縮、尺寸壓縮

https://blog.csdn.net/geekmubai/article/details/81435977  ///前端優化之資源壓縮

https://blog.csdn.net/curioust/article/details/83715257  //高并發解決方案:浏覽器緩存和壓縮優化技術

https://blog.csdn.net/curioust/article/details/83119910 //高并發解決方案: 減少 HTTP 請求次數

後續補充

...

繼續閱讀