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 //菜鳥工具 效果如下: 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 //性能優化之圖檔壓縮(品質壓縮、尺寸壓縮 補充: 其實圖檔加速的方式,還會采用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 請求次數 |
後續補充
...