性能优化实验效果

Posted on

构建

loader cache

dll

hard-source-webpack-plugin

文件大小

Gzip

以 mocktest 为例。

vendor.bundle.js 357kb
main.js 603kb

初步可尝试：gzip、按页面动态懒加载。

动态懒加载的作用可能有限，因为该项目大多是同一页面读大量题目。

先看 gzip。

不需要前端打包 .gz 文件，线上已经是 gz 文件的大小。（以 vendor.bundle.js 为例，原大小 1.6M，通过 compression-webpack-plugin 打包后大小 356k，刚好是线上访问的大小。

  1. 看 referral 的打包大小、f2e 测试服大小（响应头没有显示接受 gzip）和线上大小。
    f2e js 大小 1.1M，本地同样大小。线上 cdn 同一个文件大小 364kb，果然是自动做了压缩的。唯一值得一提的是，本地用 compression-webpack-plugin 压缩的大小为 308kb，压缩效果好像更好一些。
  2. 问运维他们如何自动做了 gzip。
  3. 问运维项目中配置的 dockerfile 和 nginx config 是如何生效的。

代码压缩

js 压缩

css 压缩

图片压缩

代码性能

CSS 动画代替 js 动画

避免重排重绘

懒加载

SPA 项目懒加载

import()，webpack 实现方式是在执行时临时创建 script 标签引入文件。

备忘

到第一个字节的时间(TTFB) 性能优化指标？