JavaScript 性能优化之框架 / 工程层面的优化

JavaScript 的性能优化不仅仅是在代码层面修修补补，更重要的是在工程化和框架层面建立一套高效的开发体系。一个好的框架设计和工程配置可以从源头上减少性能问题的发生，让你的项目跑得又快又稳。

本文将详细介绍 JavaScript 性能优化在框架和工程方面的具体做法，并附上易懂的例子和说明。

1️⃣ 合理选择前端框架和技术栈

❖ 优化点：避免“重炮打蚊子”

有时候项目较简单，不需要引入像 React、Vue 这样的大型框架。例如只是展示静态内容或少量交互页面时，用 Vanilla JS 或轻量框架（如 Preact）能显著减小包体积、提高加载速度。

✅ 建议：

• 简单场景：使用原生 JavaScript、Alpine.js、htmx 等微型框架。
• 中等复杂度：使用 Preact、Vue + Vite。
• 大型项目：React/Vue/Angular + 模块拆分 + SSR/CSR 配置优化。

2️⃣ 开启 Tree Shaking 移除无用代码

❖ 优化点：减小构建产物体积

Tree Shaking 是现代构建工具（如 Webpack、Rollup、Vite）自动移除未使用代码的技术。尤其是使用第三方库时，可能仅使用其中一两个函数，但如果未启用 Tree Shaking，会打包整个库。

✅ 使用示例：

如果你只用 lodash 的 debounce，不要这样写：

import _ from 'lodash'; // ❌ 会引入整个 lodash
const fn = _.debounce(() => {}, 300);

正确做法是：

import debounce from 'lodash/debounce'; // ✅ 只引入 debounce 函数
const fn = debounce(()