前端性能优化方法

打包构建

  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多线程
相关推荐
Senar3 小时前
如何判断浏览器是否开启硬件加速
前端·javascript·数据可视化
HtwHUAT3 小时前
实验四 Java图形界面与事件处理
开发语言·前端·python
利刃之灵3 小时前
01-初识前端
前端
codingandsleeping3 小时前
一个简易版无缝轮播图的实现思路
前端·javascript·css
天天扭码3 小时前
一分钟解决 | 高频面试算法题——最大子数组之和
前端·算法·面试
全宝4 小时前
🌏【cesium系列】01.vue3+vite集成Cesium
前端·gis·cesium
拉不动的猪4 小时前
简单回顾下插槽透传
前端·javascript·面试
烛阴4 小时前
Fragment Shader--一行代码让屏幕瞬间变黄
前端·webgl
爱吃鱼的锅包肉5 小时前
Flutter路由模块化管理方案
前端·javascript·flutter
哈哈幸运5 小时前
MySQL运维三部曲初级篇:从零开始打造稳定高效的数据库环境
linux·运维·数据库·mysql·性能优化