优化
专注应用全链路优化疑问，解答性能、代码、资源与体验优化中的各类优化问题。
-
2
回答
83浏览
Vue项目HMR更新后样式没变化是怎么回事？
在用Vue3+Vite开发时，修改组件样式后HMR虽然触发了更新，但页面样式就是不生效，得手动刷新才看得见变化，这正常吗？ 比如这个组件： <template> <div class...
-
2
回答
41浏览
移动端视频加载卡顿，自动播放设置有问题吗？
折腾了好几天移动端视频优化，发现视频在iPhone上加载特别卡顿，而且自动播放时偶尔会黑屏。我按照网上的方法设置了poster和muted，但效果不好。这是我的代码： <video class=...
-
2
回答
28浏览
短路求值时变量未定义报错该怎么处理？
在渲染列表时遇到问题，想用短路求值简化判断，但老是报错。比如写成item && item.name，当item是null时还能正常返回null，但如果item根本未定义就会报错。我试过...
-
2
回答
43浏览
如何减少字体子集导致的额外HTTP请求？
在项目里用Web字体时发现，每个字体文件都会单独发起HTTP请求，比如这样：@font-face{src:url('font.woff2')}，这样首屏加载好慢啊。 试过把字体文件转成base64内联...
-
2
回答
56浏览
React列表滚动卡顿，如何优化移动端性能？
大家好，我在开发一个移动端React列表页时遇到性能问题。当列表项超过50条后滚动就明显卡顿，尝试用React.memo和useCallback优化过，但效果不明显... 代码结构大概是这样（简化版）...
-
2
回答
205浏览
为什么Vendor分离后vendor.js反而比main.js还大？
在用Webpack做Vendor分离时，配置了splitChunks按需拆分第三方包，但生成的vendor.chunk.js居然比app代码还大两倍，加载反而更慢了。按照文档设置了cacheGroup...
-
2
回答
38浏览
React路由懒加载后页面刷新为什么会失去代码分割效果？
我在用React和React Router做路由懒加载，按照文档写了类似这样的代码：const About = React.lazy(() => import('./About'))，配合Sus...
-
2
回答
67浏览
CSS拆分后为什么Chunk还是没变小？
我在用Webpack打包项目时，把组件的CSS单独抽离成动态导入的文件，但生产环境里这些CSS还是被打包到vendors_chunk里了。我按文档写了这样的CSS： /* Button.module....
-
2
回答
31浏览
React项目HMR更新后样式没变化怎么办？
在开发React组件时用了CSS Modules，配置了HMR但遇到问题。修改CSS后页面内容更新了，样式却没变： // vite.config.js export default defineCon...
-
2
回答
42浏览
代码分割后动态加载分包时，如何处理依赖模块重复加载的问题？
我在用React.lazy实现代码分割时遇到问题。页面A和页面B都引用了lodash，按路由拆分的两个分包里都包含了lodash代码。虽然配置了webpack的splitChunks，但动态加载时发现...
-
1
回答
101浏览
Hover预加载时如何避免重复请求和资源浪费？
我在给产品页的商品缩略图做Hover预加载时遇到了问题，当鼠标快速移进移出多个图片时，控制台显示重复请求了同一个资源。我用了下面的代码，但发现即使移开后又移回来，还是会触发新的请求，这样会不会导致带宽...
-
2
回答
90浏览
CDN加速后静态资源加载反而变慢，该怎么排查？
最近给项目配置了某云CDN，按官方文档改了CNAME和缓存策略，但测试发现图片和JS文件加载时间反而比直接访问源站慢了1-2秒。我尝试过清除浏览器缓存、检查CDN状态码（都是200），还对比了DNS解...
-
2
回答
43浏览
移动端滚动卡顿时，怎么用Passive监听优化事件？
在优化移动端页面时，我给触摸事件加了{ passive: true }，滚动确实流畅了，但有个问题：touchMove里调用event.preventDefault()阻止滚动时完全没反应了，这是为什...
-
2
回答
79浏览
Vite打包后为什么静态资源路径404？
用Vite开发的项目部署到服务器后，图片和字体文件都报404错误，明明在public目录里放了资源，也配置了publicDir: 'public'，生产构建后的dist里确实有这些文件，但页面访问时路...
-
2
回答
56浏览
为什么我的Webpack配置了Tree Shaking还是没摇掉未使用的代码？
我在项目里按教程配置了Webpack的Tree Shaking，把mode设成production，也设置了optimization.usedExports为true，但打包后的bundle里还是能看...
-
2
回答
86浏览
页面频繁交互时如何防止日志上报重复触发影响性能？
我在做按钮点击日志上报时遇到问题，用户快速连续点击会导致重复上报。之前用了防抖： _.debounce(reportLog, 500) 但发现关键操作会被延迟甚至丢失。改用节流后： function ...
-
2
回答
72浏览
Webpack并行构建时为什么某些CSS文件未被处理？
我在项目里用thread-loader做并行构建，但发现一个CSS文件里的变量没被处理。配置了多个loader，其他CSS文件正常，就这个文件会直接输出原始代码。试过调整thread数和loader顺...
-
2
回答
52浏览
WebP转换后图片模糊，怎么调整参数才能保持清晰？
我用cwebp把一批JPG转成WebP，发现转换后的图片边缘发虚，特别是文字logo区域。尝试过加-q 90参数，但模糊问题没改善。后来改用-m 6提高压缩质量，结果文件变大了20%还卡顿，怎么办？ ...
-
2
回答
51浏览
WebP转换后图片质量评估方法有哪些？如何避免模糊又保证压缩率？
最近在用Sharp库批量转WebP图片，发现设置quality: 80后图片边缘明显发虚。尝试过改chromaSubsampling和alphaQuality参数，但不确定哪个指标最合理。用Googl...
-
2
回答
51浏览
前端错误聚合时怎么区分不同环境的重复上报？
在用Sentry做错误监控时，测试环境和生产环境的同一错误会被合并成一个事件，导致看不到环境差异。比如同样的404错误，怎么才能让不同环境的报错分开统计呢？ 我尝试在初始化Sentry时添加了envi...
