优化
专注应用全链路优化疑问，解答性能、代码、资源与体验优化中的各类优化问题。
-
0
回答
0浏览
为什么Vendor分离后vendor.js反而比main.js还大？
在用Webpack做Vendor分离时，配置了splitChunks按需拆分第三方包，但生成的vendor.chunk.js居然比app代码还大两倍，加载反而更慢了。按照文档设置了cacheGroup...
-
1
回答
1浏览
React路由懒加载后页面刷新为什么会失去代码分割效果？
我在用React和React Router做路由懒加载，按照文档写了类似这样的代码：const About = React.lazy(() => import('./About'))，配合Sus...
-
1
回答
10浏览
CSS拆分后为什么Chunk还是没变小？
我在用Webpack打包项目时，把组件的CSS单独抽离成动态导入的文件，但生产环境里这些CSS还是被打包到vendors_chunk里了。我按文档写了这样的CSS： /* Button.module....
-
1
回答
3浏览
React项目HMR更新后样式没变化怎么办？
在开发React组件时用了CSS Modules，配置了HMR但遇到问题。修改CSS后页面内容更新了，样式却没变： // vite.config.js export default defineCon...
-
1
回答
3浏览
代码分割后动态加载分包时，如何处理依赖模块重复加载的问题？
我在用React.lazy实现代码分割时遇到问题。页面A和页面B都引用了lodash，按路由拆分的两个分包里都包含了lodash代码。虽然配置了webpack的splitChunks，但动态加载时发现...
-
1
回答
14浏览
Hover预加载时如何避免重复请求和资源浪费？
我在给产品页的商品缩略图做Hover预加载时遇到了问题，当鼠标快速移进移出多个图片时，控制台显示重复请求了同一个资源。我用了下面的代码，但发现即使移开后又移回来，还是会触发新的请求，这样会不会导致带宽...
-
1
回答
40浏览
CDN加速后静态资源加载反而变慢，该怎么排查？
最近给项目配置了某云CDN，按官方文档改了CNAME和缓存策略，但测试发现图片和JS文件加载时间反而比直接访问源站慢了1-2秒。我尝试过清除浏览器缓存、检查CDN状态码（都是200），还对比了DNS解...
-
1
回答
9浏览
移动端滚动卡顿时，怎么用Passive监听优化事件？
在优化移动端页面时，我给触摸事件加了{ passive: true }，滚动确实流畅了，但有个问题：touchMove里调用event.preventDefault()阻止滚动时完全没反应了，这是为什...
-
1
回答
14浏览
Vite打包后为什么静态资源路径404？
用Vite开发的项目部署到服务器后，图片和字体文件都报404错误，明明在public目录里放了资源，也配置了publicDir: 'public'，生产构建后的dist里确实有这些文件，但页面访问时路...
-
1
回答
11浏览
为什么我的Webpack配置了Tree Shaking还是没摇掉未使用的代码？
我在项目里按教程配置了Webpack的Tree Shaking，把mode设成production，也设置了optimization.usedExports为true，但打包后的bundle里还是能看...
-
1
回答
20浏览
页面频繁交互时如何防止日志上报重复触发影响性能？
我在做按钮点击日志上报时遇到问题，用户快速连续点击会导致重复上报。之前用了防抖： _.debounce(reportLog, 500) 但发现关键操作会被延迟甚至丢失。改用节流后： function ...
-
1
回答
25浏览
Webpack并行构建时为什么某些CSS文件未被处理？
我在项目里用thread-loader做并行构建，但发现一个CSS文件里的变量没被处理。配置了多个loader，其他CSS文件正常，就这个文件会直接输出原始代码。试过调整thread数和loader顺...
-
1
回答
13浏览
WebP转换后图片模糊，怎么调整参数才能保持清晰？
我用cwebp把一批JPG转成WebP，发现转换后的图片边缘发虚，特别是文字logo区域。尝试过加-q 90参数，但模糊问题没改善。后来改用-m 6提高压缩质量，结果文件变大了20%还卡顿，怎么办？ ...
-
1
回答
13浏览
WebP转换后图片质量评估方法有哪些？如何避免模糊又保证压缩率？
最近在用Sharp库批量转WebP图片，发现设置quality: 80后图片边缘明显发虚。尝试过改chromaSubsampling和alphaQuality参数，但不确定哪个指标最合理。用Googl...
-
1
回答
20浏览
前端错误聚合时怎么区分不同环境的重复上报？
在用Sentry做错误监控时，测试环境和生产环境的同一错误会被合并成一个事件，导致看不到环境差异。比如同样的404错误，怎么才能让不同环境的报错分开统计呢？ 我尝试在初始化Sentry时添加了envi...
-
2
回答
52浏览
React列表滚动时启用GPU加速后为什么元素会闪烁？
最近在优化一个React列表滚动组件，给元素加了transform: translateZ(0)想启用GPU加速，但滚动时反而出现元素闪烁问题。尝试过设置will-change: transform和...
-
1
回答
13浏览
为什么用了HTTP/2多路复用后图片加载反而更慢了？
我在优化网站时启用了HTTP/2，按理说多路复用应该更快，但发现首页轮播图的加载时间反而比HTTP/1.1多了200ms左右。检查网络面板发现，虽然所有图片都走同一个连接，但请求顺序好像被打乱了。 尝...
-
1
回答
28浏览
为什么用了defer的JS还是阻塞了首屏渲染？
我在优化网站首屏加载时，把所有JS都加上了defer属性，但页面还是出现卡顿，DOMContentLoaded时间依然有3秒。用Lighthouse检测发现有多个JS文件被标记为"blocking"。...
-
2
回答
33浏览
Vue骨架屏在图片加载后为什么会闪一下消失？
我在做商品列表页首屏优化时用了骨架屏，但发现图片加载完成后骨架屏会闪一下才被替换。我用了v-if/v-else控制切换，骨架屏和真实图片的宽高比例也保持一致了，但问题还是存在： <div v-f...
-
2
回答
7浏览
为什么用lodash-es按需导入后Tree Shaking没减少打包体积？
我在项目里改用lodash-es想通过Tree Shaking减小体积，但打包后发现整个lodash都进去了... 按教程这样导入的： import { map, each } from '...
