常规的性能优化措施

作者： 木木(linqh@authine.com)

• 服务
  • CDN
  • SSE与 HTTP2
• PWA
• Webpack
  • 图片压缩
  • tree-shaking || split-chunks
  • 构建速度提升
  • 环境变量
  • 模板
  • CSS抽离
  • 资源压缩
  • 预加载

这里的常规优化措施，结合当前的工程化和流行趋势探讨的

服务

CDN

• 使用 CDN 取代部分静态资源直连自家服务器，内容分发可以保证访问的稳定性和速度

SSE与 HTTP2

• SSE

SSE(服务端数据推送应用)也是一个逐渐流行的姿势，可以由服务器直接推送资源到客户端。

可以改善用户的体验,不用用户主动发起请求的时侯再去拉取更新的资源，被动式接受。

• HTTP2

HTTP2已经开始成为标配了，因为用户群的使用环境跟上了，以及他自身拥有的优点

• 多路复用：允许一个连接多处连接使用
• 头部压缩：传送体积更小

nginx 的稳定版已经均已支持。

PWA

pwa 不是一项很老的技术，因为兼容性和标准方案的问题，最近两年才开始流行起来。

渐进式 Web 应用（PWA）

workbox: Google出品的 pwa 解决方案，很成熟。

Webpack

图片压缩

• url-loader:转化一些小图片为 base64
• imagemin-webpack-plugin:常规图片压缩

tree-shaking || split-chunks

这两个特性，默认在webpack4稳定版中支持(内置)

• tree-shaking:去除那些引用的但却没有使用的代码,减小体积
• split-chunks-plugin:切割 JS 为独立的 chunks ,也能减小请求体积更小

构建速度提升

• DllPlugin:分离部分通用 vendor或者external为 dll 文件，之后开发过程不触发改部分文件编译
• happypack : 开启多线程编译

环境变量

• DefinePlugin: 注入全局变量到环境中
• EnvironmentPlugin:和上面类似

模板

• HtmlWebpackPlugin: 支持加载常用模板，注入一些需要的东西

CSS抽离

• MiniCssExtractPlugin:样式抽离成单个 CSS 文件
• css-loader: css支持,且支持模块化引入
• style-loader: 行内样式的支持,注入样式到 DOM

资源压缩

• terser-webpack-plugin:逐渐流行的压缩插件，用于取代UglifyJS
• compression-webpack-plugin:可以生成对应静态资源的 GZIP 文件，让请求体积更小（需要服务器支持 gz）

预加载

• PrefetchPlugin:预加载某部分模块，提高性能
• preload-webpack-plugin: 给 link增加preload属性，预请求对应资源。MDN:preload

未来待续，欢迎补充.