[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
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页