1、Classic架构回顾：理解传统Classic架构的核心设计理念与局限性

聊到从Classic迁移到Adaptive，咱们得先搞清楚一件事——Classic架构到底是个什么东西？

我接触Classic架构大概是在七八年前，那时候刚入行没多久。说实话，第一次看到它的设计文档，我内心是有点懵的。但用了一段时间后，我慢慢理解了它的设计哲学。说白了，Classic架构就是一套「约定大于配置」的体系。

1.1 Classic架构的核心设计理念

Classic架构的设计初衷，是为了解决前端项目「从零搭建」的痛点。它把很多常见的配置和流程都固化下来了。我个人习惯把它总结为三个关键词：

• 约定路径：所有页面、组件、路由都有固定的存放位置
• 静态配置：大部分配置在构建时就确定了，运行时很少改动
• 分层明确：视图、逻辑、数据三层严格分离

举个例子，在Classic架构里，你新建一个页面通常只需要三步：

// 1. 在 pages 目录下新建文件
// pages/user/profile.js

// 2. 在路由配置里注册
// router.js
{
  path: '/user/profile',
  component: () => import('./pages/user/profile')
}

// 3. 页面组件直接使用
export default {
  template: '<div>用户资料页</div>',
  data() {
    return { userInfo: {} }
  }
}

你看，是不是很简单？这种模式在中小型项目里跑得飞快。我记得有个电商项目，团队五个人，两周就搭完了整个管理后台。当时觉得这架构真香。

1.2 它解决了什么问题

Classic架构之所以能火，是因为它确实解决了一些实际问题：

痛点	Classic的解法
项目结构混乱	强制目录规范，新人上手快
配置繁琐	内置webpack、babel等配置，开箱即用
状态管理复杂	统一使用store模式，数据流清晰
构建流程不统一	封装构建脚本，团队保持一致

嗯，这里要注意一点——这些解法在2018年左右是非常先进的。那时候前端生态还没现在这么成熟，Classic架构相当于给团队定了一套「标准作业流程」。

1.3 但问题也慢慢暴露了

随着项目越做越大，我开始感受到Classic架构的局限性。有一次我接手一个三年历史的后台系统，代码量已经超过20万行。打开项目一看，pages目录下密密麻麻两百多个文件。你想想看，光找一个页面就要翻半天。

具体来说，Classic架构有这几个硬伤：

• 构建速度越来越慢：全量构建一次要等两三分钟，热更新也卡
• 代码复用困难：组件之间耦合严重，想抽离公共逻辑得改一堆文件
• 运行时灵活性差：所有配置都是静态的，想动态加载个模块得写一堆hack代码
• 测试成本高：因为分层太死板，写单元测试时mock数据特别麻烦

1.4 一个典型的性能瓶颈案例

我记得有个报表页面，里面引了十几个图表组件。每次打开这个页面，浏览器都要加载整个图表库的代码。其实用户只看两个图表，但Classic架构的打包策略是「一个页面一个chunk」，没法做更细粒度的拆分。

// Classic架构的打包结果
// 页面A的chunk包含了所有依赖
chunk-pageA.js (2.3MB)
  ├── 图表库完整包 (1.8MB)
  ├── 表格组件 (0.3MB)
  └── 业务逻辑 (0.2MB)

// 用户实际只需要
chunk-pageA-optimized.js (0.5MB)
  ├── 图表库按需加载 (0.2MB)
  ├── 表格组件 (0.3MB)
  └── 业务逻辑 (0.2MB)

你看，差了将近4倍。这就是Classic架构「全量加载」模式带来的问题。在移动端或者弱网环境下，这种体验简直是灾难。

1.5 架构僵化带来的维护成本

还有一个让我头疼的问题——升级依赖。Classic架构把很多配置都写死了，比如webpack版本、babel插件列表。你想升级某个库？得先看看它跟现有配置冲不冲突。

我曾经花了两天时间，就为了把项目里的webpack从4升级到5。因为Classic架构的构建脚本里硬编码了很多webpack的API，升级后一堆报错。说白了，这种「黑盒配置」虽然方便，但也让你失去了对构建流程的控制权。

1.6 小结：Classic架构的得与失

说了这么多，并不是要全盘否定Classic架构。它确实在特定时期发挥了重要作用。但咱们得认清一个事实：

• 适合的场景：中小型项目、团队人数少、需求相对稳定
• 不适合的场景：大型项目、频繁迭代、需要高度定制化

如果你现在的项目已经出现了构建慢、代码耦合、升级困难这些问题，那就说明——是时候考虑迁移到Adaptive架构了。

下一章，我会详细讲讲Adaptive架构是怎么解决这些痛点的。咱们到时候见。