前端性能优化之资源的压缩与合并和 Webpack 优化

一、资源的压缩与合并

1. 对于资源的压缩与合并，如下所示：

• 减少 http 请求数量
• 减少请求资源的大小

2. HTML 压缩，如下所示：

• 使用在线工具进行压缩
• 使用 html-minifier 等 npm 工具

3. CSS 压缩，如下所示：

• 使用在线工具进行压缩
• 使用 clean-css 等 npm 工具

4. JS 压缩与混淆，如下所示：

• 使用在线工具进行压缩
• 使用 Webpack 对 JS 在构建时压缩

5. CSS JS 文件合并，如下所示：

• 若干个小文件
• 无冲突，服务相同的模块
• 优化加载

6. 图片格式比较，如下所示：

• JPEG/JPG 的优点
• JPEG/JPG 的使用场景
• JPEG/JPG 的缺陷
• PNG 的优点
• PNG 的使用场景
• PNG 的缺陷
• WebP 的优点
• 支持 WebP 的浏览器

7. 图片的懒加载，如下所示：

• 原生的图片懒加载方案
• 第三方图片懒加载方案，如 verlok/lazyload、yall.js、Blazy

8. 使用渐进式图片的解决方案，如下所示：

• progressive-image
• libjpeg
• jpeg-recompress
• ImageMagick
• jpegtran
• imagemin

9. 使用响应式图片，如下所示：

• Srcset 属性的使用
• Sizes 属性的使用
• picture 的使用

10. FOIT 和 FOUT，如下所示：

• 字体未下载完成时，浏览器隐藏或自动降级，导致字体闪烁
• Flash Of Invisible Text
• Flash Of Unstyled Text

11. 对于字体优化可以使用 AJAX + Base64，解决兼容性问题，但缺陷是缓存问题。

二、Webpack 优化

1. Tree-shaking，如下所示：

• 上下文未用到的代码 dead code
• 基于 ES6 import export
• package.json 中配置 sideEffects
• 注意 Babel 默认配置的影响

2. JS 压缩，如下所示：

• Webpack 4 后引入 uglifyjs-webpack-plugin
• 支持 ES6 替换为 terser-webpack-plugin
• 减少 JS 文件体积

3. 作用域提升，如下所示：

• 代码体积减小
• 提高执行效率
• 同样注意 Babel 的 modules 配置

4. Babel7 优化配置，如下所示：

• 在需要的地方引入 polyfill
• 辅助函数的按需引入
• 根据目标浏览器按需转换代码

5. 对于 Webpack 的依赖优化，可以使用 noParse，如下所示：

• 提高构建速度
• 直接通知 webpack 忽略较大的库
• 被忽略的库不能有 import、require、define 的引入方式

6. Dllplugin，如下所示：

• 避免打包时对不变的库重复构建
• 提高构建速度

7. Webpack 的代码拆分，如下所示：

• 把单个 bundle 文件拆分成若干个小 bundles/chunks
• 缩短首屏加载时间

8. Webpack 代码拆分的方法，如下所示：

• 手工定义入口
• splitChunks 提取公有代码，拆分业务代码与第三方库

9. Wepack 的资源压缩，如下所示：

• Terser 压缩 JS
• mini-css-extract-plugin 压缩 CSS
• HtmlWebpackPlugin-minify 压缩 HTML

10. Webpack 的资源持久化缓存，持久化缓存方案，如下所示：

• 每个打包的资源文件有唯一的 hash 值
• 修改后只有受影响的文件 hash 变化
• 充分利用浏览器缓存

11. Webpack 的应用大小监测与分析，如下所示：

• Stats 分析与可视化视图
• webpack-bundle-analyzer 进行体积分析
• speed-measure-webpack-plugin 速度分析

12. React 按需加载的实现方式，如下所示：

• React router 基于 webpack 动态引入
• 使用 Reloadable 高级组件