前端性能优化方法

打包构建

  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多线程
相关推荐
Json_1817901448022 分钟前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
风尚云网1 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子02041 小时前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing1 小时前
React核心功能详解(一)
前端·react.js·前端框架
捂月1 小时前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆1 小时前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China1 小时前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
秦老师Q1 小时前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge
滴水可藏海1 小时前
Chrome离线安装包下载
前端·chrome
m51271 小时前
LinuxC语言
java·服务器·前端