在Create React App中导入的自定义UI库中的Webpack树摇晃

Question

我有自己的UI组件库。它包含大约40个组件。组件位于src文件夹中，由文件夹分隔。由babel编译：{{1​​}}。我的babel.config：

BABEL_ENV=production babel src -d lib

您会注意到，对于“摇树”，我使用了transform-imports插件。

我将该库导入到Create-React-App中。在我的构建上运行分析，看来我的风格指南仍在充分利用构建：

我确定我没有在构建中使用大图标，这意味着Webpack无法删除未导入的代码。我显然使用了顶级导入：module.exports = function (api) { api.cache(true); const presets = [ [ '@babel/preset-env', { targets: { node: 'current', }, }, ], '@babel/preset-react', '@babel/preset-flow' ]; const plugins = [ ['transform-imports', { '@material-ui/core': { transform: '@material-ui/core/esm/${member}', preventFullImport: true }, '@material-ui/icons': { transform: '@material-ui/icons/esm/${member}', preventFullImport: true } }] ]; return { presets, plugins }; }; 。

我想知道我在想什么。 CRA使用webpack 4.41.5。是项目还是库中的问题？