[web效能優化] - 使用線上工具對html、js、css進行壓縮

栗子好好吃發表於2020-11-25
Web優化HTMLJSCSS

參考

1. 學習點

  • 使用 線上工具對html、css、js進行壓縮
  • 學會分析壓縮前後的效率提高點

2. 解決方案:

2.1 HTML壓縮

  1. 線上壓縮
  2. nodejs提供了 html-minifier工具(在構建層對程式碼進行壓縮)
  3. 後端模板引擎渲染壓縮
    在這裡插入圖片描述

2.2 CSS壓縮

  1. 使用html-minifier對html中的css進行壓縮
  2. 使用clean-css對css進行壓縮

使用線上壓縮如下圖所示。
在這裡插入圖片描述

2.3 js壓縮與混亂

  1. 使用html-minifier對html中的js進行壓縮
  2. 使用uglifyjs2對js進行壓縮
  3. ps: 注意依賴關係
    在這裡插入圖片描述

3. 壓縮對比

在這裡插入圖片描述

  1. 對js進行了合併壓縮
  2. 合併之後頁面空白時間(DOMContentLoaded)從原來的2.70s降低到現在的936ms
  3. 頁面載入時間(Load)從原來的2.93s降低到現在的1.24s

相關文章