reactjs - 如何使用 webpack 使库真正实现 tree-shaking？

Question

我有一个包含多个 react 组件的库，我想让该库可摇树，以便当我导入像

这样的组件时

import { Checkbox } from 'my-react-components'

我不导入整个包。

我的index.js看起来像这样

export { default as Button } from './components/Button'
export { default as Checkbox } from './components/Checkbox'
export { default as FlexView } from './components/FlexView'
export { default as Radio } from './components/Radio'
export { default as Select } from './components/Select'
export { default as TextInput } from './components/TextInput'
export { default as Toggle } from './components/Toggle'

我使用 webpack 进行捆绑

module.exports = {
  mode: 'production',
  entry: './src/index.ts',
  output: {
    path: path.resolve('./lib'),
    filename: 'react-components.js',
    libraryTarget: 'commonjs2',
  },

  // loaders and stuff...
  // terser-webpack-plugin...

  externals: {
    // don't include react in the bundle
    react: {
      root: 'React',
      commonjs2: 'react',
      commonjs: 'react',
      amd: 'react',
    },
  },
  optimization: {
    splitChunks: false,
    sideEffects: false,
  },
}

当然在我的 babel 配置中我有

['@babel/preset-env', {
  modules: false,
}]

通过此设置，当我仅导入一个组件时，整个包都会被包含在内(当我导入它时，我也在使用 webpack)。我该如何防止这种情况发生？

Answer 1

截至 2020 年 2 月，Webpack 无法实现这一点。

因为 tree-shaking 机制严重依赖 ES6 import/export 并且 Webpack 目前在 output.libraryTarget 中不支持 ES2015 模块格式。

作为替代方案，您可以将您的库与其他 bundler (例如 Rollup)捆绑在一起(它支持库的 ES6 模块)。

您可以在此处跟踪此功能:https://github.com/webpack/webpack/issues/2933

更新:虽然有一个 hacky 解决方法:https://stackoverflow.com/a/60010871/921193