为什么我的 React 组件库不可摇树？

Question

我有一个与汇总捆绑在一起的React 组件库。然后我在使用 create-react-app 的应用程序设置中使用该库，该应用程序在后台使用 Webpack。我希望 Webpack 对组件库进行 tree-shake。在构建应用程序包并对其进行分析后，我发现该库要么根本没有摇树，要么摇树在库上不起作用，因为它首先不可摇树。为什么摇树不起作用？我究竟做错了什么？

? rollup.config.js（React 组件库的打包配置）

import babel from 'rollup-plugin-babel'
import commonjs from 'rollup-plugin-commonjs'
import autoExternal from 'rollup-plugin-auto-external'
import resolve from 'rollup-plugin-node-resolve'
import reactSvg from 'rollup-plugin-react-svg'
import url from 'rollup-plugin-url'
import string from 'rollup-plugin-string'
import pureanno from 'rollup-plugin-pure-annotation'

import pkg from './package.json'
const { getSVGOConfig } = require('./scripts/getSVGOConfig')

const MAX_INLINE_FILE_SIZE_KB = 100

export default {
  input: 'src/index.js',
  output: [
    {
      file: pkg.module,
      format: 'es',
    },
  ],
  plugins: [
    autoExternal(),
    babel({
      babelrc: false,
      exclude: 'node_modules/**',
      plugins: [
        'external-helpers',
        'babel-plugin-transform-react-jsx',
        'babel-plugin-transform-class-properties',
        'babel-plugin-transform-object-rest-spread',
        'transform-react-remove-prop-types',
        [
          'babel-plugin-root-import',
          {
            'rootPathSuffix': 'src',
          },
        ],
        'babel-plugin-styled-components',
        'transform-decorators-legacy',
        [
          'ramda',
          {
            'useES': true,
          },
        ],
      ],
    }),
    resolve(),
    commonjs(),
    reactSvg({
      svgo: getSVGOConfig(),
    }),
    url({
      limit: MAX_INLINE_FILE_SIZE_KB * 1024,
      include: ['**/*.woff', '**/*.woff2'],
    }),
    string({
      include: '**/*.css',
    }),
    pureanno({
      includes: ['**/*.js'],
    }),
  ],
  watch: {
    chokidar: false,
  },
}

React 组件库的src/index.js

export { default as Theme } from './Theme'
export { default as Badge } from './components/Badge'
...

App.js（使用库的应用程序）

import React from 'react';
import { Theme, Badge } from 'my-react-component-library'

function App() {
  return (
    <Theme>
      <Badge>Hello</Badge>
    </Theme>
  )
}

export default App

React 组件库的package.json（相关部分）

{
  "name": "my-react-component-library",
  "version": "1.1.1",
  "main": "dist/index.js",
  "module": "dist/index.es.js",
  "scripts": {
    ...
    "build": "rollup -c",
  },
  "dependencies": {
    ...
  },
  "peerDependencies": {
    "react": "^15.0.0 || ^16.0.0",
    "react-dom": "^15.0.0 || ^16.0.0"
  },
  "devDependencies": {
    ...
  },
  "sideEffects": false
}

使用库的应用程序的package.json（相关部分）

{
  "name": "my-app",
  "version": "0.1.0",
  "dependencies": {
    "my-react-component-library": "^1.1.1",
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  },
  "scripts": {
    ...
    "analyze": "source-map-explorer build/static/js/*chunk*.js build/static/js/*chunk*.js.map",
    "build": "react-scripts build",
    "serve": "serve -s build"
  },
  "devDependencies": {
    ...
    "serve": "^11.3.0",
    "source-map-explorer": "^2.2.2"
  }
}

index.es.js（捆绑的React组件库）

https://gist.github.com/borisdiakur/ae376738955f15fb5079b5acb2ac83ad

Answer 1

我找到了一种可能的解决方案来解决我的问题。不过，这与摇树无关。我只是通过使用 rollup 的一个相当新的特性（我必须升级一堆依赖项才能使其工作）并提供一个对象，将名称映射到入口点，将库分成几个独立的块汇总配置的输入属性。它看起来像这样：

input: {
    index: 'src/index.js',
    theme: 'src/Theme',
    badge: 'src/components/Badge',
    contentCard: 'src/components/ContentCard',
    card: 'src/elements/Card',
    icon: 'src/elements/Icon',
    ...

这是汇总的文档：https : //rollupjs.org/guide/en/#input

输出设置为一个目录：

output: [
  {
    dir: 'dist/es',
    format: 'es',
  },
],

然后我在 package.json 中声明入口点如下：

"module": "dist/es/index.js",

在我的测试应用程序中，我导入了组件，就好像没有任何变化一样：

import React from 'react';
import { Theme, Badge } from 'my-react-component-library'

到目前为止，这似乎有效，尽管它再次不是摇树，我仍然想知道如何使我的组件库可摇树。

更新：

事实证明，摇树一直有效！这是图书馆的“错误”：

1. Icon 组件会导入所有图标，因此只要您使用了至少一个图标或使用某个图标的组件，所有 svg 文件就会在包中结束。
2. Theme 组件将字体作为 base-64 字符串内联到包中。

我通过在需要时动态导入每个图标解决了第一个问题，通过减少 rollup-plugin-url 的 MAX_INLINE_FILE_SIZE_KB 参数以拆分字体并将其作为资产加载来解决第二个问题。

所以，对于像我这样开始相信 tree-shaking 行不通的人，这是我的建议，仅仅因为包大得离谱：仔细检查你的包分析报告（即使用 source-map-explorer），寻找大家伙，仔细检查你的进口。