如何为React组件库的package.json设置默认入口优化导入体积

我没法让React组件库的package.json默认导出正常工作。导入时：

import { Component } from 'packagename/'; // 体积22kb
// 或者
import { Component } from 'packagename/dist' // 体积22kb;

但如果用下面的方式导入，体积直接飙到3mb：

import { Component } from 'packagename'; // 体积3mb

我不能要求用户每次都在包名后面加/。以下是我的package.json内容：

{
  "version": "1.0.0",
  "license": "MIT",
  "main": "dist/index.js",
  "typings": "dist/index.d.ts",
  "engines": {
    "node": ">=10"
  },
  "files": [
    "dist"
  ],
  "exports": {
    ".": {
      "require": "./dist/index.js",
      "import": "./dist/index.js"
    },
    "./*": "./dist/*",
    "./mylib": "./dist/index.js"
  },
  "scripts": {
    "start": "tsdx watch",
    "build": "NODE_ENV=production tsdx build",
    "build-size": "yarn build && yarn size",
    "build-static-webapp": "npx expo export:web",
    "test": "tsdx test --passWithNoTests",
    "lint": "tsdx lint",
    "prepare": "tsdx build",
    "size": "size-limit",
    "analyze": "size-limit --why",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },
  "peerDependencies": {
    "react": ">=16"
  },
  "husky": {
    "hooks": {
      "pre-commit": "tsdx lint"
    }
  },
  "prettier": {
    "printWidth": 80,
    "semi": true,
    "singleQuote": true,
    "trailingComma": "es5"
  },
  "name": "packagename",
  "author": "me",
  "module": "dist/packagename.esm.js",
  "size-limit": [
    {
      "path": "dist/packagename.cjs.production.min.js",
      "limit": "10 KB"
    },
    {
      "path": "dist/packagename.esm.js",
      "limit": "10 KB"
    }
  ],
  "devDependencies": {
    "@babel/core": "^7.19.1",
    "@expo/webpack-config": "^0.17.0",
    "@headlessui/react": "^1.7.2",
    "@size-limit/preset-small-lib": "^8.1.0",
    "@size-limit/webpack": "^8.1.0",
    "@size-limit/webpack-why": "^8.1.0",
    "@storybook/addon-essentials": "^6.5.12",
    "@storybook/addon-info": "^5.3.21",
    "@storybook/addon-links": "^6.5.12",
    "@storybook/addons": "^6.5.12",
    "@storybook/react": "^6.5.12",
    "@tailwindcss/forms": "^0.5.3",
    "@tailwindcss/postcss7-compat": "^2.2.17",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@types/react": "^18.0.20",
    "@types/react-dom": "^18.0.6",
    "autoprefixer": "^10.4.11",
    "babel-loader": "^8.2.5",
    "clsx": "^1.2.1",
    "expo": "^46.0.10",
    "husky": "^8.0.1",
    "identity-obj-proxy": "^3.0.0",
    "postcss": "^8",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.35.0",
    "react-is": "^18.2.0",
    "react-native-web": "~0.18.7",
    "rollup-plugin-postcss": "^4.0.2",
    "size-limit": "^8.1.0",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat",
    "tsdx": "^0.14.1",
    "tslib": "^2.4.0",
    "typescript": "^4.8.3"
  },
  "jest": {
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|less|scss|sass)$": "identity-obj-proxy"
    }
  },
  "dependencies": {}
}

问题原因与解决方案 #

核心问题

你的exports配置和module字段存在冲突，导致直接导入包名时，模块解析器没有正确指向tsdx构建的优化产物，反而拉取了未压缩的源码或错误的文件，引发体积暴增。

修复步骤

1. 统一exports的产物指向
   修改exports中.的import字段，指向tsdx构建的ESM优化产物，同时保留require指向CJS产物，删除冗余的./mylib配置：

   "exports": {
     ".": {
       "require": "./dist/packagename.cjs.production.min.js",
       "import": "./dist/packagename.esm.js",
       "types": "./dist/index.d.ts"
     },
     "./*": "./dist/*"
   },
   

2. 修正main字段
   将main指向tsdx生成的压缩后CJS文件，替代原来的dist/index.js：

   "main": "dist/packagename.cjs.production.min.js",
   

3. 重新构建并测试
   执行yarn build重新打包，此时用户直接使用import { Component } from 'packagename'时，会自动匹配对应模块规范的优化产物，体积将恢复到正常的22kb左右。

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