tree-shaking：无用代码移除
Webpack2 引入的功能，DCE 的一个方法
tree-shaking：找到需要的代码，灌入最终结果
DCE：找到执行不到的代码，AST里清除
如何评价 Webpack 2 新引入的 Tree-shaking 代码优化技术？
scope hoisting：作用域提升
Webpack3 新功能，将所有模块都用函数包裹，自己实现模块加载、执行和缓存的功能。目的为了更容易实现Code Splitting(按需加载)、模块热替换
Code Splitting：按需加载
对于大型web应用，所有代码放在一个文件效率低下，特别是在加载一些特定环境下使用的阻塞代码时。
Webpack将代码分离成 Chunk，按需加载
Webpack中使用Code Splitting实现按需加载
intersection obsercer
目标元素和视口产生的交叉区，该 API 又叫“交叉观察器”，实现懒加载
clients hints：自动响应式图片
Automatic responsive images with Client Hints
css containment
新的css属性，允许开发者限制浏览器样式、布局和paint工作范围
service workers
实现离线页面，Service worker concepts and usage
性能必须被测量、监测和完善，度量会根据设备、浏览器、协议、网络类型和延迟而显着变化（CDN，ISP，缓存，代理，防火墙，负载均衡器和服务器）WPO Stats
WPO Stats 发布的案例研究和实验数据，帮助提高对性能和业务前潜在关系的认识，以及性能对用户体验和业务度量的影响
目标：至少比你最快的竞争对手还快 20%
创建预算
优化方案
- 测量实际环境的体验并设定适当的目标。一个好的目标是：第一次有意义的绘制 < 1 s，速度指数 < 1250，在慢速的 3G 网络上的交互 < 5s，对于重复访问，TTI < 2s。优化渲染开始时间和交互时间。
- 为您的主模板准备关键的 CSS，并将其包含在页面的 中。（你的预算是 14 KB）。对于 CSS/JS，文件大小不超过 170 KB gzipped（解压后 0.8-1 MB）。
- 延迟加载尽可能多的脚本，包括您自己的和第三方的脚本——特别是社交媒体按钮、视频播放器和耗时的 JavaScript 脚本。
- 添加资源提示，使用 dns-lookup、preconnect、prefetch 和 preload 加速传输。
- 分离 web 字体，并以异步方式加载它们（或切换到系统字体）。
- 优化图像，并在重要页面（例如登录页面）中考虑使用 WebP。
- 检查 HTTP 缓存头和安全头是否设置正确。
- 在服务器上启用 Brotli 或 Zopfli 压缩。（如果做不到，不要忘记启用 Gzip 压缩。）
- 如果 HTTP/2 可用，启用 HPACK 压缩并开启混合内容警告监控。如果您正在运行 LTS，也可以启用 OCSP stapling。
- 在 service worker 缓存中尽可能多的缓存资产，如字体、样式、JavaScript