前端极致性能优化手册大全

前端极致性能优化手册大全

原文链接

前端优化之路必不可少的知识点。

• 浏览器输入url到页面的展现，具体发生了些什么，前端能做哪些优化

1. DNS 递归查询解析 —— DNS优化prefetch；
2. TCP 三次握手、四次挥手 —— http1.0/1.1/2.0 的区别，http/s的区别；
3. http 缓存 —— 304 与 CDN；
4. 浏览器渲染机制 —— CSS、JS顺序的重要性，@import的损耗，防抖、节流、重排、重绘，GPU加速等；
5. 如何优化JS主线程 —— web worker，时间分片
6. …

• 图片你优化了吗，雪碧图、webp、svg；
• webpack 等打包优化
• 运维的基本知识 nginx

本文按一定顺序总结与前端性能优化的基本点，大家可以按步骤逐一检查自己的项目，找出性能的瓶颈。如有错误遗漏欢迎补充纠正。

文章有些原理细节都在参考文章中，价值较高建议读一读。

webpack

默认的 webpack4 很多优化内部已经做到很好了，但无法满足所有的业务场景，
如果发现开发时打包慢、打包体积太大，这是你就要审视下配置了。

代码分块分析插件 webpack-bundle-analyzer

npm i webpack-bundle-analyzer -D

• 修改 webpack.config.js

// 在头部添加
const {
    BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

// 在plugins: [] 中新增配置如下
new BundleAnalyzerPlugin({
   
  analyzerMode: 'server',
  analyzerHost: '127.0.0.1',
  analyzerPort: 8000,
  reportFilename: 'report.html',
  defaultSizes: 'parsed',
  openAnalyzer: true,
  generateStatsFile: false,
  statsFilename: 'stats.json',
  statsOptions: null,
  logLevel: 'info'
})

• 启动本地开发服务，浏览器中打开 http://127.0.0.1:8000

• webpack4 默认代码分割策略

1. 新的 chunk 是否被共享或者是来自 node_modules 的模块
2. 新的 chunk 体积在压缩之前是否大于 30kb
3. 按需加载 chunk 的并发请求数量小于等于 5 个
4. 页面初始加载时的并发请求数量小于等于 3 个

比如，由于业务中频繁 antd 中的UI组件，但他们都小于 30kb 不会被独立打包，导致过多重复的代码打入不同 chunk 中。