前端性能优化方法

打包构建

  1. 代码压缩(html, js, css)
javascript 复制代码
module.exports = {
  optimization: {
    minimize: true
  },
};
  1. resolve 优化
  2. tree shaking
  3. 代码分块
javascript 复制代码
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};
  1. 提取组件的 CSS
shell 复制代码
npm install mini-css-extract plugin

资源加载

  1. 避免CSS阻塞
    尽快加载CSS
  2. 避免JS阻塞
    使用 async、defer 进行异步加载
  3. 减少回流和重绘
  4. 图片压缩、雪碧图
  5. 预加载 prefetch
  6. CDN、浏览器缓存

代码编写

  1. 事件委托
  2. 节流和防抖
  3. 路由懒加载
  4. 图片懒加载
  5. 组件按需引入、异步加载
  6. web worker多线程
相关推荐
brzhang4 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止4 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms4 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登4 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
Lin Hsüeh-ch'in5 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome
augenstern4166 小时前
HTML面试题
前端·html
张可6 小时前
一个KMP/CMP项目的组织结构和集成方式
android·前端·kotlin
顾林海7 小时前
Android 性能优化:启动优化全解析
android·java·面试·性能优化·zygote
G等你下课7 小时前
React 路由懒加载入门:提升首屏性能的第一步
前端·react.js·前端框架
蓝婷儿8 小时前
每天一个前端小知识 Day 27 - WebGL / WebGPU 数据可视化引擎设计与实践
前端·信息可视化·webgl