參考

1. 學習點

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

2. 解決方案:

2.1 HTML壓縮

在線壓縮

nodejs提供了 html-minifier工具(在構建層對代碼進行壓縮)

后端模板引擎渲染壓縮

2.2 CSS壓縮

使用html-minifier對html中的css進行壓縮

使用clean-css對css進行壓縮

使用在線壓縮如下圖所示。

2.3 js壓縮與混亂

使用html-minifier對html中的js進行壓縮

使用uglifyjs2對js進行壓縮

ps: 注意依賴關系

3. 壓縮對比

對js進行了合并壓縮

合并之后頁面空白時間(DOMContentLoaded)從原來的2.70s降低到現在的936ms

頁面加載時間(Load)從原來的2.93s降低到現在的1.24s

總結

以上是生活随笔為你收集整理的[web性能优化] - 使用在线工具对html、js、css进行压缩的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。