拒绝模块化（所有代码写在一个 'main.js' 里）

模块化的优势与必要性

现代前端开发中，模块化已成为标配。React、Vue等框架默认采用模块化结构，ES6也原生支持import/export语法。模块化带来的好处显而易见：

1. 代码组织清晰：不同功能拆分为独立文件
2. 依赖管理明确：模块间依赖关系可视化
3. 可维护性强：修改单个模块不影响其他部分
4. 复用性高：模块可在不同项目中重复使用
5. 团队协作方便：多人开发互不干扰

// 模块化示例
// utils/formatDate.js
export function formatDate(date) {
  return new Date(date).toLocaleDateString()
}

// components/UserCard.js
import { formatDate } from '../utils/formatDate'

export default function UserCard({ user }) {
  return (
    <div>
      <h3>{user.name}</h3>
      <p>注册时间: {formatDate(user.createdAt)}</p>
    </div>
  )
}

单一文件的灾难性后果

将所有代码塞进main.js会导致诸多问题：

命名冲突：变量和函数名必须全局唯一，随着代码量增加极易冲突：

// 在同一个文件中
function calculateTotal() { /* 订单计算逻辑 */ }
function calculateTotal() { /* 购物车计算逻辑 */ } // 覆盖前一个函数

代码臃肿：万行级的main.js导致：

• IDE卡顿
• 查找功能困难
• Git冲突频繁
• 加载性能下降

依赖混乱：无法清晰看到各功能间的依赖关系：

// 难以追踪的依赖
const user = fetchUser() // 来自第30行
const orders = getOrders(user.id) // 来自第1500行
renderProfile(user, orders) // 来自第2300行

实际开发中的痛点

调试困难：错误堆栈指向同一个文件，难以定位问题：

Error at main.js:5432
   at main.js:1287
   at main.js:4321

测试障碍：无法单独测试特定功能，必须加载整个巨型文件。

性能优化困难：无法实现按需加载，首屏必须加载全部代码。

协作噩梦：团队成员同时修改main.js时，合并冲突概率100%。

模块化的正确实践

按功能拆分：

src/
├── api/          # API请求
├── components/   # 公共组件
├── hooks/        # 自定义Hook
├── pages/        # 页面组件
├── store/        # 状态管理
└── utils/        # 工具函数

合理划分模块粒度：

• 过细：导致import地狱
• 过粗：失去模块化意义

动态导入优化性能：

// 按需加载组件
const HeavyComponent = React.lazy(() => import('./HeavyComponent'))

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <HeavyComponent />
    </Suspense>
  )
}

历史项目的改造策略

对于遗留的巨型main.js文件，可以逐步改造：

1. 提取工具函数：

// 原main.js
function formatPrice(price) {
  return '$' + price.toFixed(2)
}

// 改为 utils/currency.js
export function formatPrice(price) {
  return '$' + price.toFixed(2)
}

2. 拆分UI组件：

// 原main.js中的DOM操作
const userList = document.createElement('div')
// ...100行创建用户列表的代码

// 改为 components/UserList.js
export function createUserList(users) {
  const container = document.createElement('div')
  // ...实现逻辑
  return container
}

3. 使用IIFE隔离作用域（过渡方案）：

// 在完全模块化前临时方案
(function() {
  // 用户相关代码
  const currentUser = {}
  function login() {...}
})();

(function() {
  // 商品相关代码
  const products = []
  function addToCart() {...}
})();

模块化开发的工具支持

打包工具配置：

// webpack.config.js
module.exports = {
  entry: {
    main: './src/main.js',
    vendor: './src/vendor.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}

模块热替换(HMR)：修改模块后局部更新而非刷新整个页面。

Tree Shaking：消除未使用代码，webpack和Rollup都支持：

// 只导入需要的函数
import { debounce } from 'lodash-es' // 而不是整个lodash

常见误区与解决方案

过度拆分：每个函数一个文件反而增加管理成本。合理做法是将相关功能组织在一起：

utils/
├── date.js       # 所有日期相关工具
├── string.js     # 字符串处理
└── dom.js        # DOM操作辅助

循环依赖：模块A依赖B，B又依赖A。解决方案：

1. 提取公共逻辑到第三个模块
2. 使用依赖注入
3. 动态导入打破循环

// 解决循环依赖
// auth.js
import { validate } from './validator'

export function login() {
  // 使用validate
}

// validator.js
import { login } from './auth' // 导致循环

// 改为：
// auth.js
export function login(validator) {
  // 通过参数传入validator
}

模块化与性能的平衡

代码分割策略：

• 路由级拆分
• 组件级拆分
• 动态导入非关键资源

共享依赖处理：

// 避免重复打包
optimization: {
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors'
      }
    }
  }
}

长期维护考量：模块化虽然初始成本略高，但长期看：

• 新人上手更快
• 功能扩展更容易
• Bug定位更精准
• 重构风险更低