[web性能优化] - 使用工具对html js css进行压缩

参考

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