前端性能优化方法

打包构建

  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多线程
相关推荐
无尽的大道12 分钟前
Java字符串深度解析:String的实现、常量池与性能优化
java·开发语言·性能优化
superman超哥35 分钟前
04 深入 Oracle 并发世界:MVCC、锁、闩锁、事务隔离与并发性能优化的探索
数据库·oracle·性能优化·dba
熊的猫1 小时前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
瑶琴AI前端1 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
会发光的猪。1 小时前
如何在vscode中安装git详细新手教程
前端·ide·git·vscode
我要洋人死3 小时前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人3 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人3 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR3 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香3 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel