优化
专注应用全链路优化疑问，解答性能、代码、资源与体验优化中的各类优化问题。
-
1
回答
8浏览
为什么Webpack Tree Shaking没摇掉未使用的CSS样式？
大家好，我在优化项目时遇到个奇怪的问题。我按文档配置了Tree Shaking，但打包后的CSS里还是有很多没用的样式类。 比如这个组件只用了.red类，但打包结果里blue和green类也存在： /...
-
1
回答
9浏览
Rollup打包后文件包含未使用的CSS类名怎么办？
在用Rollup打包Vue组件库时发现，即使组件未使用某些CSS类名，打包后的dist文件里还是包含了所有类名，导致体积变大。我尝试过动态导入CSS文件，但这样会导致样式无法按需加载： <tem...
-
1
回答
14浏览
图片懒加载时为什么部分图片加载后还是空白？
我用Intersection Observer给图片做了懒加载，把src替换成srcset后，滚动到可视区确实触发了加载，但有几张图片显示空白。我检查了网络请求都返回200了，路径也没问题。 尝试过把...
-
1
回答
12浏览
sessionStorage在页面刷新后数据突然丢失怎么办？
我在开发表单页面时，用sessionStorage.setItem('formData', JSON.stringify(data))保存了用户输入的数据。但用户偶尔刷新页面后，发现之前存的数据没了，...
-
2
回答
12浏览
cache-loader缓存失效后，如何手动清除旧缓存？
我在项目里用cache-loader优化构建速度，但今天改了个公共组件后发现旧文件还在被引用。检查node_modules/.cache目录发现确实存在旧版本文件，但删除整个缓存目录后重启构建，新文件...
-
1
回答
19浏览
为什么Tree Shaking没生效？按需引入后代码体积没减少
我按网上的教程把项目里所有lodash的全局引入都改成按需导入了，但打包后发现整体体积反而比之前更大？比如这样写： import _get from 'lodash/get'; import _cam...
-
2
回答
16浏览
React组件卸载后内存没释放是怎么回事？
在开发一个React表格组件时发现，切换页面后内存占用一直没降下来。我用Chrome的Memory面板做了heap snapshot对比，发现大量TableData实例还留在内存里... 代码结构大概...
-
2
回答
9浏览
如何实现请求失败后的指数退避重试并监控重试次数？
在开发支付接口时遇到请求失败自动重试的问题。现在用递归实现指数退避重试，但发现重试次数没有正确记录到监控系统，导致无法统计真实失败率。 尝试过给每个Promise链添加.then(() => r...
-
1
回答
10浏览
媒体查询在移动端适配时，为什么元素间距会忽大忽小？
我按设计稿750px写媒体查询调整间距，但在iPhone 12和13上看起来差距很大。比如侧边栏padding在12上正常，到13就撑出来了 尝试过用rem单位和vw百分比替代，但换算起来容易出错。现...
-
1
回答
23浏览
TypeScript项目中Tree Shaking没生效，如何排查配置问题？
我按照官方文档配置了TypeScript项目，打包时发现没摇树，打包体积还是很大。检查了tsconfig.json的module和target设置，也用了rollup打包，但导出的代码里还是包含未使用...
-
1
回答
49浏览
为什么我的Service Worker缓存策略导致页面刷新后内容没更新？
最近给项目加了Service Worker做静态资源缓存，但发现更新了JS文件后页面一直显示旧版本。明明已经用cache.first策略，还手动调用了clients.claim()和skipWaiti...
-
1
回答
27浏览
为什么设置了Cache-Control还是频繁请求资源？
我在开发单页应用时给API接口设置了Cache-Control:max-age=30，但发现每次页面刷新都会重新请求JSON数据，明明应该缓存30秒才对。 代码是这样写的：fetch('/a...
-
1
回答
18浏览
如何判断WebP图片在不同质量设置下的压缩效果？
我在用sharp库把JPG转WebP时，quality参数设成80和90，文件大小差了30%，但肉眼看不出明显区别。有没有科学点的方法能自动评估不同quality值的压缩效果？特别是怎么平衡文件体积和...
-
1
回答
18浏览
Vue组件点击事件监控导致性能问题怎么办？
在Vue项目里给按钮加了点击监控，发现页面卡顿，代码用了防抖还是没用。这是为什么啊？ 我给所有按钮加了统一的点击上报逻辑，代码像这样写的： 购买 export default { methods: {...
-
1
回答
62浏览
拖拽组件频繁计算坐标，如何用缓存优化性能？
我在做一个可拖拽的卡片组件，每次鼠标移动都会触发坐标计算，发现控制台提示性能警告。尝试用 useMemo 缓存计算结果，但好像没起作用，还是在频繁重新计算： const calculatePositi...
-
2
回答
12浏览
React路由切换时过渡动画卡顿怎么办？
大家好，我在用React Router做页面切换过渡动画时遇到问题。我给路由组件加了Animate.css的fadeIn动画，但切换页面时动画有时候会卡顿或者直接跳过。我尝试在useEffect里手动...
-
2
回答
16浏览
使用react-virtualized滚动到底部时列表内容突然错位怎么办？
我在用react-virtualized的List组件渲染长列表时遇到个奇怪问题。当快速滚动到列表底部后松手，列表内容会突然错开两行的高度，看起来像数据渲染位置偏移了。我用了CellMeasurer自...
-
2
回答
13浏览
图片懒加载没效果，怎么调整资源加载优先级？
大家好，我在做首屏优化时发现图片加载还是卡顿，虽然用了loading="lazy"属性，但页面加载时图片还是阻塞了其他资源。我尝试给图片加了loading="lazy"和decoding="async...
-
1
回答
16浏览
瀑布流加载时滚动卡顿，IntersectionObserver优化无效怎么办？
我在用IntersectionObserver实现瀑布流布局时，发现滚动到加载区时页面会卡顿半秒。之前用了虚拟滚动只渲染可视区元素，但瀑布流布局高度不固定，改用观察器动态加载后问题依旧。代码逻辑应该是...
-
2
回答
15浏览
边缘计算服务优化图片加载时为什么会卡顿？
我在用Cloudflare Workers做边缘计算处理图片请求，发现当同时加载多张图片时会出现卡顿。代码是这样写的： <img src="/edge-worker/resize?width=3...
