在之前的实际项目中发现了一种 React.js 中非常低效的导入策略。在本文中，将向你介绍这个问题，以及如何通过 Wrapper（封装）模式 创建一种更灵活的方式，成功解决这一问题的。

 问题所在
在一个项目中，我发现 lodash 和 Framer Motion 这样的库被以下方式导入：

import _ from 'lodash'; // 导入了整个 lodash（71.78KB）
import { motion } from 'framer-motion'; // 导入了整个 framer-motion（111.19KB）

这种方式的问题显而易见：
1.你直接导入了整个库，导致包的体积激增。

2.如果你的项目总体积是 1MB，那么仅这两个库就占了约 18%（~180KB）。

更好的解决方案：直接导入特定方法
要降低包体积，应该具体导入所需方法：

// before:
import _ from 'lodash'; // 71.78KB
// 堆代码 duidaima.com
// after:
import debounce from 'lodash/debounce'; // 仅 3.41KB
import merge from 'lodash/merge';       // 仅 16KB

但，这样就够了吗？尽管这种导入方式节省了空间，但在实际开发中可能面临以下问题：
重构成本：如果 lodash 被十几个文件引用，你就需要修改每个文件中的导入语句，这不仅麻烦而且容易出错。
容易漏掉修改：容易遗漏某些文件，导致代码不一致或产生难以排查的问题。

合并冲突麻烦：当多个分支都修改了相同的导入方式，合并时可能出现繁琐的冲突。

更灵活的方式：Wrapper 模式（封装模式）
为了解决这些问题，可以使用一个简单的封装文件（Wrapper）：

LodashWrapper.tsx：
import debounce from 'lodash/debounce';
const lodashWrapper = {
  debounce,
};
export default lodashWrapper;

使用时直接导入封装文件：

import lodashWrapper from './lodashWrapper';
const SearchInput = () => {
  const [query, setQuery] = useState('');
  const handleSearch = useCallback(
    lodashWrapper.debounce((searchTerm) => {
      console.log('Searching for:', searchTerm);
    }, 500),
    []
  );
  return <input onChange={(e) => setQuery(e.target.value)} />;
};

注意：Wrapper 本身并不能减少包的体积（需要具体导入才能减少体积），但能提高代码的维护性和灵活性。

可视化结果（使用 vite-bundle-visualizer 生成）

优化后的导入方式：
原本大小：71.78KB

优化后：仅导入 debounce 为 3.41KB（gzip 压缩后只有 1.2KB）

为什么总是建议使用 Wrapper？
使用 Wrapper 的优点显而易见：
1.开发者更容易管理导入：所有人使用预定义的优化方式导入库。
2.避免冗余导入：统一管理导入方式，避免重复导入相同内容。

3.维护简单：如果某个库的导入方式改变，只需要修改封装文件即可。

但也有一些缺点：
1.增加了抽象层：可能会略微增加代码复杂性。

2.增加了文件数量：封装多个库可能导致项目中出现大量额外的封装文件。

如何选择合适的库？
在选择第三方库时，也需要注意它们是否支持单独导入：
比如 Recharts，目前不支持单独导入，会导入整个库。

import { BarChart } from 'recharts'; // 导入整个库

而 Nivo 则支持树摇（tree-shake）导入，可以只导入特定图表组件。

import { ResponsiveBar } from '@nivo/bar'; // 只导入特定组件

这种差别，会极大影响应用的性能表现与最终打包体积。

如何快速查看导入大小？
推荐在 VS Code 中使用 Import Cost 插件，可以直观看到每个导入语句带来的体积增加。
优化后的 vite 配置文件
分享我的 vite.config.ts，内置了压缩、手动分块（manual chunk splitting）、路径别名（alias）等优化方式：

// vite.config.ts 示例
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            if (id.includes('lodash')) return 'lodash';
            if (id.includes('framer-motion')) return 'framer-motion';
            return 'vendor';
          }
        },
      },
    },
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      components: path.resolve(__dirname, './src/components'),
    },
  },
});

总结（Key Takeaways）
1.不要直接导入整个库，使用具体方法导入减小体积。
2.使用 Wrapper 封装库，可以提高代码维护性、降低修改成本。
3.选择支持具体导入（树摇优化）的库，确保应用性能。
4.使用 VS Code 插件监控导入体积，及时优化。