因为没有使用路由懒加载,产生了一个难以寻找的bug

背景简介

大家好,我是石小石!


前几天项目完成路由迁移后,原有页面突然出现了样式错乱的问题。如下图,侧弹窗原本应包含"保存"和"取消"两个按钮,但迁移后,"取消"按钮异常消失,布局错乱。

通过浏览器样式的调试定位问题,我最终发现是一个名为 .line 的全局样式,与弹窗底部容器 .m-drawer-container-footer.line 发生了冲突。

当我临时删除该全局 .line 样式后,页面恢复正常,说明问题确实出在样式冲突上。

继续追踪源码后发现,这个 .line 样式实际上来源于另一个路由页面 ,是那里的写一了全局样式line,从而影响到了当前页面的组件。

什么情况路由页面样式会相互影响

出现上述样式错乱的根本原因是样式污染。但让我感到疑惑的是:出问题的页面并没有被手动访问或激活,按理说它的样式文件应该不会被加载,怎么会影响到当前页面的显示呢?

仔细梳理代码后,我终于发现了问题所在:

js 复制代码
import RectificationOrder from '@/views/rectificationOrder/index';

const RECTIFICATION_ORDER = [
    {
        path: '/rectification-order',
        name: 'rectification-order',
        component: RectificationOrder,
        children: []
    }
];

原来,这段代码在定义路由时,直接同步导入了页面组件,这会导致该页面对应的 JS 和 CSS 文件在应用初始化时就立即加载,而不是等用户真正访问该页面时再加载。

这就引发了一个问题:页面的样式在未激活的情况下已经注入到全局中,从而影响了其他页面的组件样式,造成了意料之外的样式冲突。

js 复制代码
import RectificationOrder from '@/views/rectificationOrder/index';

const RECTIFICATION_ORDER = [
    {
        path: '/rectification-order',
        name: 'rectification-order',
        component: () => import('@/views/rectificationOrder/index'),
        children: []
    }
];

我们的正确做法应该是使用路由懒加载!我们只需将页面组件的加载方式从同步改为异步,也就是采用 Vue 路由的懒加载机制:

js 复制代码
const RECTIFICATION_ORDER = [
  {
    path: '/rectification-order',
    name: 'rectification-order',
    component: () => import('@/views/rectificationOrder/index'),
    children: [],
  },
];

通过这种写法,组件的 JS 和 CSS 会在路由首次访问时再按需加载,从根本上避免了"未使用页面影响当前页面样式"的问题。

路由懒加载的好处?

路由懒加载(Route Lazy Loading) 是 Vue 路由的一种按需加载机制,它的主要作用是:

  1. 优化首屏加载性能:按需加载路由组件,避免一次性引入所有页面资源,提升首页加载速度。
  2. 降低初始化体积:组件和样式只在真正访问时才会加载,减轻浏览器负担。
  3. 避免样式提前注入造成的污染:如本案例,未懒加载的路由页面可能将其 CSS 提前注入,引发不必要的样式冲突。

Vue Router 支持使用 component: () => import(...) 的语法,将页面组件封装为异步函数,底层会借助 Vite 的动态模块加载特性实现资源的拆分与延迟加载。

这也是现代前端项目中广泛推荐的做法,特别是页面较多、组件较重或存在全局样式的项目,懒加载几乎是必选项。

总结

页面样式错乱的问题,有时候并不是写错了 CSS,而是加载顺序和作用域控制不当。本次案例正是同步引入组件导致样式提前注入,从而影响了当前页面的表现。

路由懒加载不仅可以优化性能,更是保障样式隔离的有力手段,建议所有项目都默认使用这一机制。

相关推荐
不浪brown15 分钟前
开源!矢量建筑白模泛光特效以及全国77个大中城市的矢量shp数据获取!
前端·cesium
山有木兮木有枝_16 分钟前
JavaScript 数据类型与内存分配机制探究
前端
小小小小宇22 分钟前
前端 异步任务并发控制
前端
bysking36 分钟前
【27-vue3】vue3版本的"指令式弹窗"逻辑函数createModal-bysking
前端·vue.js
LuckySusu36 分钟前
【HTML篇】script`标签中的 defer 与 async:深入解析异步加载 JavaScript 的差异
前端·html
CAD老兵37 分钟前
在 TypeScript 中复用已有 Interface 的部分属性:完整指南
前端
龚思凯42 分钟前
Vue 3 中 watch 监听引用类型的深度解析与全面实践
前端·vue.js
于冬恋1 小时前
Web后端开发(请求、响应)
前端
red润1 小时前
封装hook,复刻掘金社区,暗黑白天主题切换功能
前端·javascript·vue.js
Fly-ping1 小时前
【前端】vue3性能优化方案
前端·性能优化