优化
专注应用全链路优化疑问，解答性能、代码、资源与体验优化中的各类优化问题。
-
2
回答
52浏览
为什么我的Vue路由懒加载没有实现代码分割？
我在Vue3项目里按教程配置了路由懒加载，但打包后main.js还是有1MB，根本没分割。检查过代码： const routes = [ { path: '/about', com...
-
2
回答
39浏览
React部署到HTTPS后为什么出现混合内容警告？
最近把React项目部署到HTTPS服务器后，页面加载时老是报“Mixed Content”错误。明明所有资源路径都用了相对地址，但控制台还是提示标签引用了HTTP资源。我检查了public文件夹里的...
-
2
回答
80浏览
为什么我的页面在Android上字体显示模糊？
最近在优化移动端页面，发现同样的字体在iOS显示很清晰，但Android设备上却特别模糊。已经试过加了-webkit-font-smoothing和-moz-osx-font-smoothing，还调...
-
2
回答
87浏览
picture元素的srcset和sizes在移动端显示有问题怎么办？
我在用picture元素做响应式图片适配时遇到了问题，移动端不同分辨率下图片显示比例不对。尝试用srcset设置不同尺寸图片，但手机横竖屏切换时还是拉伸变形： <picture> <...
-
2
回答
93浏览
如何根据资源优先级动态调整预加载策略？
我在开发一个单页应用时发现，虽然用了预加载了一些资源，但页面加载时关键资源还是被其他低优先级的图片阻塞了。比如视频封面图比产品详情的CSS更早加载，导致页面白屏时间变长。尝试过设置as和media属性...
-
2
回答
79浏览
WebP有损压缩后图片模糊，怎么调整参数保持清晰？
在项目里用Sharp库把图片转WebP时，发现有损压缩到70%后人物面部和文字边缘明显模糊。试过改quality参数到85还是不够清楚，但压缩率又不能太低，该怎么平衡画质和体积？ 之前用的代码是这样的...
-
2
回答
61浏览
WebP图片回退时旧浏览器显示空白怎么办？
我在项目里用picture标签做WebP回退，代码写成这样： <picture> <source srcset="logo.webp" type="im...
-
2
回答
36浏览
使用DLL动态链接后为什么vendors包还是重复打包？
在React项目里用DLL优化打包，按教程配置了webpack.DllPlugin和DllReferencePlugin，但发现打包后的vendors包里还是包含了react和react-dom的重复...
-
2
回答
47浏览
Service Worker缓存策略更新后页面还是加载旧资源怎么办？
最近给项目加了Service Worker做静态资源缓存，但今天部署新版本后发现用户还是在加载旧资源。我尝试过清除浏览器缓存和用cache-first策略，但页面内容就是不更新，这是什么情况啊？ 我设...
-
2
回答
74浏览
React动态页面怎么设置Open Graph标签？SEO没效果
我在用React开发博客页面时遇到了Open Graph标签的问题。每个文章页都需要动态生成og:title和og:description，但分享到社交媒体时显示的还是默认内容，用SEO检测工具也提示...
-
2
回答
75浏览
React代码分割后为什么没有生成独立的chunk文件？
我在用React.lazy和Suspense做代码分割时遇到了问题。按照文档把组件用动态导入包裹： const Component = React.lazy(() => import('...
-
2
回答
43浏览
为什么我的IntersectionObserver在长列表滚动时频繁触发回调？
我在用IntersectionObserver做长列表懒加载时遇到了问题。设置rootMargin为"200px"后，滚动到可视区域外时回调确实能触发，但快速滚动时会连续触发好几次，导致重复请求数据。...
-
2
回答
89浏览
Angular组件卸载后rxjs订阅没清理导致内存泄漏怎么办？
我在Angular项目里用Subject订阅了服务端数据，按官方教程在ngOnDestroy里调用了unsubscribe，但内存还是持续上涨。明明组件卸载了，为什么订阅没断开？ 代码是这样写的：th...
-
2
回答
79浏览
页面关闭时日志上报总失败怎么办？
最近在做监控优化，发现用户关闭页面时上报的日志经常丢失。我在window.unload事件里用了fetch加keepalive: true，还试过把请求放在setTimeout里，但有时候还是会丢失数...
-
2
回答
84浏览
为什么在CSS里用dns-prefetch预加载图片域名没效果？
我在做页面优化时，想用dns-prefetch预加载第三方图片域名，但发现DNS查询还是延迟了。之前在CSS文件里这样写的： /* 图片资源预加载 */ @dns-prefetch images.ex...
-
2
回答
90浏览
React代码分割预获取后为什么路由切换还是卡顿？
我在用React.lazy和Suspense做代码分割，想用import()预获取组件，但切换路由时还是有明显延迟。按照文档在路由变化前调用了import('组件路径')，但控制台显示模块还是在切换时...
-
2
回答
64浏览
为什么我的Tree Shaking没生效？providedExports配置有问题吗？
我在项目里用rollup打包时遇到了奇怪的问题。明明只导入了utils.js里的add函数，但打包结果里却包含了整个math模块： // utils.js import { add } from '....
-
2
回答
94浏览
图片懒加载时占位容器高度塌陷怎么办？
在做图片列表懒加载时，用了Intersection Observer，但图片未加载时占位容器高度会塌陷，导致页面布局跳动。试过给图片设置固定高度，但不同图片尺寸差异大，效果不好： <div cl...
-
2
回答
83浏览
为什么我的React组件无法通过Tree Shaking移除未使用的导入？
我在开发React组件时遇到了奇怪的问题。我按照文档在组件里只用了lodash的_.each方法，但打包后发现整个lodash库都被包含了。明明代码里没用到其他函数啊！ 我尝试过这样写： import...
-
2
回答
50浏览
为什么我的页面内存持续增长，Performance面板显示大量DOM节点？
在开发一个实时数据图表时，我用了setInterval每秒生成新的DOM元素，但看Performance面板的Memory快照，DOM节点数一直在涨，手动调用removeChild好像没起作用，这是怎...
