前端性能优化实现方式

前端性能优化实现方式

缩小项目体积

treeshaking消除冗余代码

(webpack配置文件module.exports配置optimization.minimize,package.json中配置"sideEffects": false,或者"sideEffects": [".css"," .less"])

使用插件压缩文件(compression-webpack-plugin、uglifyjs-webpack-plugin)

减少网络请求次数和体积

图片懒加载

路由懒加载link (resolve、require异步组件;es6import;Vite的rollupOptions配置)

使用http缓存link

(强制缓存Expires和Cache-Control、协商缓存Last-Modified和If-Modified-Since、ETag和If-None-Match)

nginx配置http缓存link

http压缩

(gzip br压缩算法,Accept-Encoding 请求标头 Content-Encoding 响应标头体现)

减少dom操作,最小化重绘和重排:documentFragment等
使用 Web Workers

对于一些计算密集型任务,可以使用 Web Workers 将任务分发到多个线程中,提高运算效率,避免页面卡顿

避免使用全局变量

相关推荐
展程3 分钟前
重构shi山工程,却遇到全局的1000+ts问题...
前端
凌晨两点的菜鸡4 分钟前
前端部署-CICD
前端·nginx
林太白16 分钟前
NestJS-字典类型模块
前端·javascript·nestjs
林太白18 分钟前
NestJS-字典数据模块
前端·javascript·nestjs
林太白27 分钟前
Rust搜索优化
前端·后端·rust
用户38022585982436 分钟前
vue3源码解析:编译之解析器实现原理
前端·vue.js·源码阅读
Ygrowly37 分钟前
搭建 Mock 服务,实现前端自调
前端
火车叼位41 分钟前
threejs api速查表, 你的下一个鼠标垫图案素材
前端·api·three.js
铃铃六43 分钟前
typescript中tpye和interface的区别
前端·typescript
页面魔术1 小时前
🔥来听听尤雨溪是怎么亲述无虚拟dom的吧
前端·vue.js·前端框架