參考

1. 學(xué)習(xí)點(diǎn)

• 使用 在線工具對(duì)html、css、js進(jìn)行壓縮
• 學(xué)會(huì)分析壓縮前后的效率提高點(diǎn)

2. 解決方案:

2.1 HTML壓縮

在線壓縮

nodejs提供了 html-minifier工具(在構(gòu)建層對(duì)代碼進(jìn)行壓縮)

后端模板引擎渲染壓縮

2.2 CSS壓縮

使用html-minifier對(duì)html中的css進(jìn)行壓縮

使用clean-css對(duì)css進(jìn)行壓縮

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

2.3 js壓縮與混亂

使用html-minifier對(duì)html中的js進(jìn)行壓縮

使用uglifyjs2對(duì)js進(jìn)行壓縮

ps: 注意依賴關(guān)系

3. 壓縮對(duì)比

對(duì)js進(jìn)行了合并壓縮

合并之后頁(yè)面空白時(shí)間(DOMContentLoaded)從原來(lái)的2.70s降低到現(xiàn)在的936ms

頁(yè)面加載時(shí)間(Load)從原來(lái)的2.93s降低到現(xiàn)在的1.24s

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。