因为没有使用路由懒加载，产生了一个难以寻找的bug 背景简介大家好，我是石小石，一个热爱技术分享的开源社区贡献者。写有《油猴脚本实战指南[1]》、《Vite 极速入门与进阶[2]》、《Threejs 极速入门》、《鸿蒙基础开发实践[3]》、《前端学 Java》等专栏。目前专注于微前端架构与 AI 相关技术的研究与工程实践。 前几天项目完成路由迁移后，原有页面突然出现了样式错乱的问题。如下图，侧弹窗原本应包含 “保存” 和“取消”两个按钮，但迁移后，“取消”按钮异常消失，布局错乱。 通过浏览器样式的调试定位问题，我最终发现是一个名为.line的全局样式，与弹窗底部容器.m-drawer-container-footer.line发生了冲突。 当我临时删除该全局.line样式后，页面恢复正常，说明问题确实出在样式冲突上。 继续追踪源码后发现，这个.line样式实际上来源于「另一个路由页面」，是那里的「写一了全局样式 line」，从而影响到了当前页面的组件。 什么情况路由页面样式会相互影响出现上述样式错乱的根本原因是「样式污染」。但让我感到疑惑的是：出问题的页面并没有被手动访问或激活，按理说它的样式文件应该不会被加载，怎么会影响到当前页面的显示呢？ 仔细梳理代码后，我终于发现了问题所在： import RectificationOrder from '@/views/rectificationOrder/index'; const RECTIFICATION_ORDER = [ { path: '/rectification-order', name: 'rectification-order', component: RectificationOrder, children: [] } ]; 原来，这段代码在定义路由时，「直接同步导入了页面组件」，这会导致该页面对应的 JS 和 CSS 文件在应用初始化时就立即加载，而不是等用户真正访问该页面时再加载。 这就引发了一个问题：「页面的样式在未激活的情况下已经注入到全局中」，从而影响了其他页面的组件样式，造成了意料之外的样式冲突。 import RectificationOrder from '@/views/rectificationOrder/index'; const RECTIFICATION_ORDER = [ { path: '/rectification-order', name: 'rectification-order', component: () = import('@/views/rectificationOrder/index'), children: [] } ]; 我们的正确做法应该是使用路由懒加载！我们只需将页面组件的加载方式从同步改为异步，也就是采用 Vue 路由的懒加载机制： const RECTIFICATION_ORDER = [ { path: '/rectification-order', name: 'rectification-order', component: () = import('@/views/rectificationOrder/index'), children: [], }, ]; 通过这种写法，组件的 JS 和 CSS 会在路由首次访问时再按需加载，从根本上避免了 “未使用页面影响当前页面样式” 的问题。 路由懒加载的好处？「路由懒加载（Route Lazy Loading）」是 Vue 路由的一种按需加载机制，它的主要作用是： 「优化首屏加载性能」：按需加载路由组件，避免一次性引入所有页面资源，提升首页加载速度。「降低初始化体积」：组件和样式只在真正访问时才会加载，减轻浏览器负担。「避免样式提前注入造成的污染」：如本案例，未懒加载的路由页面可能将其 CSS 提前注入，引发不必要的样式冲突。Vue Router 支持使用component: () = import(...)的语法，将页面组件封装为异步函数，底层会借助 Vite 的动态模块加载特性实现资源的拆分与延迟加载。 这也是现代前端项目中广泛推荐的做法，「特别是页面较多、组件较重或存在全局样式的项目」，懒加载几乎是必选项。 总结页面样式错乱的问题，有时候并不是写错了 CSS，而是「加载顺序和作用域控制不当」。本次案例正是同步引入组件导致样式提前注入，从而影响了当前页面的表现。 路由懒加载不仅可以优化性能，更是保障样式隔离的有力手段，建议所有项目都默认使用这一机制。 AI编程资讯AI Coding专区指南：https://aicoding.juejin.cn/aicoding 点击"阅读原文"了解详情~ 阅读原文