框架应用维护技巧：让项目更稳定高效

定期更新依赖，别让漏洞钻空子

做前端开发的朋友都知道，一个项目刚搭起来时干净利落，可过几个月再打开，node_modules 文件夹大得吓人，还一堆安全警告。这时候别拖，赶紧检查 package.json 里的依赖版本。像 React、Vue、Webpack 这类核心库，官方通常会发布补丁修复安全问题或性能缺陷。用 npm outdated 或 yarn outdated 查一下哪些包需要升级，配合 npm audit fix 自动修复已知漏洞。

举个例子，你公司官网用的是 Vue 2，结果某个第三方组件爆出 XSS 漏洞，而 Vue 3 已经修复了相关机制。这时候不升级，用户登录页就可能被插恶意脚本。别觉得“现在能跑就行”，小问题拖成大雷。

拆分配置文件，别全塞在一个地方

新手常犯的错误是把所有配置都堆在 webpack.config.js 或 vue.config.js 里，几百行代码混在一起，改个路径都怕出错。建议按环境拆分：development、production、staging 各一个配置文件，共用部分抽成 base 配置。

<!-- webpack.base.js -->
module.exports = {
  resolve: {
    extensions: ['.js', '.vue'],
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
  module: {
    rules: [
      {
        test: /.vue$/,
        loader: 'vue-loader'
      }
    ]
  }
};

这样 dev 和 prod 分别继承 base 再叠加自己的规则，逻辑清晰，团队协作也不容易冲突。

日志监控不能少

线上系统挂了没人知道？那太被动了。框架层面可以集成 Sentry 或自建日志上报。比如在 React 的 Error Boundary 组件中捕获异常：

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // 上报到服务器
    logErrorToService(error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      return <div>页面出错了</div>;
    }
    return this.props.children;
  }
}

一旦用户遇到白屏，后台马上收到记录，定位问题快得多。

自动化测试保底线

功能越改越多，每次上线前手动点一遍？效率低还容易漏。用 Jest + Vue Test Utils 或 React Testing Library 写单元测试和组件测试。比如一个按钮点击后要调接口，写个测试验证是否正确触发：

test('点击提交按钮应发送请求', () => {
  const mockFn = jest.fn();
  const wrapper = mount(SubmitButton, {
    methods: { submit: mockFn }
  });
  wrapper.find('button').trigger('click');
  expect(mockFn).toHaveBeenCalled();
});

配上 GitHub Actions，每次 push 自动跑测试，红了就不能合并，避免低级错误流入生产环境。

文档别只留给自己看

项目交接最头疼的就是“这谁写的？怎么用？” 别指望别人猜。根目录放个 README.md，说明启动命令、环境变量、关键目录结构。如果用了 NestJS 这种模块化框架，画个简图标明 Controller、Service、Module 的关系，新人上手至少省半天。

维护不是一个人的事，工具和习惯决定了项目寿命。把这些细节做扎实，下次重构时你会感谢现在的自己。