前端性能优化实现方式

前端性能优化实现方式

缩小项目体积

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 将任务分发到多个线程中,提高运算效率,避免页面卡顿

避免使用全局变量

相关推荐
浪九天5 分钟前
Vue 不同大版本与 Node.js 版本匹配的详细参数
前端·vue.js·node.js
qianmoQ36 分钟前
第五章:工程化实践 - 第三节 - Tailwind CSS 大型项目最佳实践
前端·css
椰果uu1 小时前
前端八股万文总结——JS+ES6
前端·javascript·es6
微wx笑1 小时前
chrome扩展程序如何实现国际化
前端·chrome
~废弃回忆 �༄1 小时前
CSS中伪类选择器
前端·javascript·css·css中伪类选择器
CUIYD_19891 小时前
Chrome 浏览器(版本号49之后)‌解决跨域问题
前端·chrome
IT、木易1 小时前
跟着AI学vue第五章
前端·javascript·vue.js
薛定谔的猫-菜鸟程序员2 小时前
Vue 2全屏滚动动画实战:结合fullpage-vue与animate.css打造炫酷H5页面
前端·css·vue.js
晴空了无痕2 小时前
游戏客户端架构设计与实战:从模块化到性能优化
游戏·性能优化
春天姐姐2 小时前
vue3项目开发总结
前端·vue.js·git