前端性能优化方法

打包构建

  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多线程
相关推荐
傻球4 分钟前
Jotai 使用详解:React 轻量级状态管理库
前端·react.js
Json_5 分钟前
Vue 构造器 Vue.extend
前端·vue.js·深度学习
伶俜monster6 分钟前
UV 法向量实验室:Threejs 纹理与光照炼金术
前端·webgl·three.js
小old弟6 分钟前
老生常谈: 谈谈对vue的理解?vue3有而vue2没有的东西或者说特性?
前端·vue.js
蔓越莓9 分钟前
[Electron] win.setSize 在RTL布局下的表现,是否需要适配?
前端·electron
Json_14 分钟前
Vue 实例方法
前端·vue.js·深度学习
数据攻城小狮子14 分钟前
Java Spring Boot 与前端结合打造图书管理系统:技术剖析与实现
java·前端·spring boot·后端·maven·intellij-idea
阿鲁冶夫28 分钟前
最佳实践初始化项目公用cli
前端
Json_42 分钟前
实例入门 实例属性
前端·深度学习
Json_42 分钟前
JS中的apply和arguments小练习
前端·javascript·深度学习