优化
专注应用全链路优化疑问，解答性能、代码、资源与体验优化中的各类优化问题。
-
2
回答
49浏览
SWR预取数据时如何避免重复请求？
在列表页预取详情数据时，发现每次滚动加载新条目都会触发重复的SWR请求。我尝试用useEffect结合swr/mutate缓存数据，但控制台还是显示重复的GET请求，该怎么优化？ import use...
-
1
回答
28浏览
esbuild打包后代码体积反而变大了怎么办？
我之前用Webpack打包项目时代码压缩后的体积是800KB，换成esbuild后配置了treeShaking，但打包结果反而涨到1.2MB。尝试过把minify设为true，但没变化。查看输出代码发...
-
1
回答
55浏览
DLL入口文件引用CSS时出现‘Unexpected token’错误怎么办？
我在用webpack的DllPlugin打包常用库时，入口文件里引用了一个CSS文件：.box { border: 1px solid red; }但构建时提示“Unexpected token ‘....
-
2
回答
39浏览
采样率动态调整导致监控数据不准确怎么办？
最近在优化前端监控的采样策略，遇到个难题：我们给API请求设置了固定采样率10%，但业务高峰时日志量暴增到50万条，服务器扛不住，低峰期又只有几百条分析不出问题。尝试改成动态采样，根据QPS自动调整，...
-
2
回答
56浏览
Intersection Observer监听多个元素时为什么回调重复触发？
我在用Intersection Observer给图片列表做懒加载，当快速滚动时发现有些图片的回调会被重复触发，导致重复加载。已经给每个图片绑定了唯一的observer，也检查了entries.isI...
-
2
回答
86浏览
React动态高度列表滚动卡顿怎么优化？
在用React做商品列表时，每个列表项高度动态变化，滚动到300条左右就明显卡顿。尝试过用固定高度但内容溢出，用useState+useEffect实时计算总高度又导致渲染阻塞，有没有更好的解决办法？...
-
1
回答
47浏览
为什么Rollup打包后Tree Shaking没去掉未使用的CSS类？
在用Rollup打包Vue组件时遇到了奇怪的问题，明明代码里只用了CSS文件中的两个类，但打包后的样式文件里却包含了所有类。我检查过配置，已经设置了"sideEffects: false"，还试过在导...
-
1
回答
43浏览
浏览器不支持WebP图片时，如何优雅地实现降级回退到JPEG？
最近在做图片格式优化时，把所有图片换成了WebP格式，结果发现低版本IE和某些移动端浏览器直接显示不出来。我试过用标签配合： <picture> <source srcset="im...
-
2
回答
71浏览
如何根据网络状况动态调整CSS资源的预加载优先级？
我在移动端项目里用预加载公共CSS文件，但发现4G环境下首屏渲染反而更慢了。尝试用navigator.connection有效吗？ 现在这样写的预加载代码： /* 公共样式预加载 */ <lin...
-
2
回答
101浏览
Vue错误边界组件无法捕获异步子组件错误怎么办？
我在给Vue项目加错误边界时遇到个怪问题，父组件用errorCaptured钩子包裹了异步加载的子组件，但是发现当子组件在异步数据加载时触发错误，父组件的错误边界完全没反应... 代码是这样写的： &...
-
1
回答
64浏览
Vendor分离配置后为什么没生成独立的vendor chunk？
我在用Webpack做代码分割时配置了vendor分离，但打包后发现common chunk里全是第三方库代码，vendor chunk没生成。按照文档设置了optimization.splitChu...
-
1
回答
38浏览
IndexedDB存储对象时报错”Failed to execute ‘put’ on ‘IDBObjectStore’，该怎么解决？
在开发待办事项应用时，我尝试用IndexedDB存储包含日期的Task对象，但执行put操作就报错： Uncaught DOMException: Failed to execute 'put' on...
-
1
回答
42浏览
React错误边界无法捕获子组件异步错误怎么办？
我在用React错误边界处理组件异常时遇到个问题，同步报错能正常捕获，但子组件里setTimeout里的错误完全没反应。之前在父组件用了static getDerivedStateFromError，...
-
2
回答
52浏览
为什么Webpack Tree Shaking没摇掉未使用的CSS样式？
大家好，我在优化项目时遇到个奇怪的问题。我按文档配置了Tree Shaking，但打包后的CSS里还是有很多没用的样式类。 比如这个组件只用了.red类，但打包结果里blue和green类也存在： /...
-
2
回答
38浏览
Rollup打包后文件包含未使用的CSS类名怎么办？
在用Rollup打包Vue组件库时发现，即使组件未使用某些CSS类名，打包后的dist文件里还是包含了所有类名，导致体积变大。我尝试过动态导入CSS文件，但这样会导致样式无法按需加载： <tem...
-
2
回答
58浏览
图片懒加载时为什么部分图片加载后还是空白？
我用Intersection Observer给图片做了懒加载，把src替换成srcset后，滚动到可视区确实触发了加载，但有几张图片显示空白。我检查了网络请求都返回200了，路径也没问题。 尝试过把...
-
2
回答
44浏览
sessionStorage在页面刷新后数据突然丢失怎么办？
我在开发表单页面时，用sessionStorage.setItem('formData', JSON.stringify(data))保存了用户输入的数据。但用户偶尔刷新页面后，发现之前存的数据没了，...
-
2
回答
49浏览
cache-loader缓存失效后，如何手动清除旧缓存？
我在项目里用cache-loader优化构建速度，但今天改了个公共组件后发现旧文件还在被引用。检查node_modules/.cache目录发现确实存在旧版本文件，但删除整个缓存目录后重启构建，新文件...
-
2
回答
42浏览
为什么Tree Shaking没生效？按需引入后代码体积没减少
我按网上的教程把项目里所有lodash的全局引入都改成按需导入了，但打包后发现整体体积反而比之前更大？比如这样写： import _get from 'lodash/get'; import _cam...
-
2
回答
46浏览
React组件卸载后内存没释放是怎么回事？
在开发一个React表格组件时发现，切换页面后内存占用一直没降下来。我用Chrome的Memory面板做了heap snapshot对比，发现大量TableData实例还留在内存里... 代码结构大概...
