自研npm React组件库导致主项目打包体积过大问题排查

核心问题分析 #

1. react-icons全量打包：当前导入{ FaTimes } from 'react-icons/fa'会触发Webpack打包整个Font Awesome图标库，而非仅FaTimes单个图标。
2. 模块格式不兼容：my-library的Babel配置默认输出CommonJS（CJS）格式，主项目依赖ES模块（ESM）才能有效执行Tree Shaking，导致无用代码无法被剔除。
3. 依赖重复打包：my-library将react-icons放在dependencies中，会导致主项目重复打包该库，进一步增大体积。

具体优化步骤 #

1. 修复react-icons的按需导入 #

修改my-library中CrossButton组件的导入方式，直接导入单个图标文件，避免全量打包：

// my-library CrossButton component
import React from 'react'
// 直接导入单个图标文件，而非从fa包导入
import FaTimes from 'react-icons/fa/FaTimes'
import PropTypes from 'prop-types'

const CrossButton = ({ text = "" }) => {
    return (
        <button type="button">
         <FaTimes size={20} />
         {text}
        </button>
    )
}

CrossButton.propTypes = {
    text: PropTypes.string,
}

export default CrossButton // 修正原代码的导出错误：应为CrossButton而非Button

2. 调整my-library的Babel配置，输出ESM格式 #

修改babel.config.js，根据环境生成CJS和ESM两种格式产物，确保Tree Shaking生效：

// my-library babel.config.js
module.exports = {
    env: {
        cjs: {
            presets: [
                ["@babel/preset-env", { modules: "commonjs" }],
                "@babel/preset-react"
            ]
        },
        esm: {
            presets: [
                ["@babel/preset-env", { modules: false }], // 保留ESM格式
                "@babel/preset-react"
            ]
        }
    }
}

3. 更新my-library的package.json，区分模块入口 #

拆分打包脚本，分别指定CJS和ESM入口，并将react-icons移至peerDependencies避免重复打包：

// my-library package.json
{
  "name": "my-library",
  "version": "3.9.0",
  "description": "",
  "main": "dist/cjs/index.js", // CJS产物入口
  "module": "dist/esm/index.js", // ESM产物入口
  "scripts": {
     "build:cjs": "babel src --out-dir dist/cjs --env-name cjs",
     "build:esm": "babel src --out-dir dist/esm --env-name esm",
     "build": "npm run build:cjs && npm run build:esm"
  },
  "peerDependencies": {
     "react-icons": "^4.4.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"
  },
  "devDependencies": {
     "@babel/preset-env": "^7.20.0",
     "@babel/preset-react": "^7.18.6",
     "babel-cli": "^6.26.0"
  }
}

4. 调整主项目Webpack配置，支持Tree Shaking #

修改规则，让Webpack处理my-library的代码，确保ESM格式的代码能被Tree Shaking：

// Project's Webpack config
module: {
    rules: [
        {
            test: /\.(js|jsx)$/,
            // 排除node_modules但保留my-library
            exclude: /node_modules\/(?!my-library)/,
            use: {
                loader: "babel-loader"
            }
        },
    ]
},
// 启用生产模式下的Tree Shaking
optimization: {
    usedExports: true,
    sideEffects: false
}

5. 验证优化效果 #

重新构建my-library和主项目，再次用webpack-bundle-analyzer分析，确认react-icons的体积大幅降低，仅包含FaTimes单个图标。

内容的提问来源于stack exchange，提问作者Mormen