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

参考

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