树抖动不适用于使用命名导入的反应组件库

编程问答 2022-06-02

问题描述

我们公司的项目数量不断增长，因此我们决定将我们的 ui 套件移至单独的私有 npm 包。为了在发布之前构建工具包，我们决定使用汇总。 ui kit 的文件结构是非常标准的：

src
       - Components
         - Alert
         - Button
         - heading
         - ...
       HOC,static...

       - index.js

根 index.js 文件仅用于重新导出所有组件。

export {default as Alert} from './Components/Alert';
export {default as Button} from './Components/Button';
...

我们的主要目标是能够使用命名导入从我们的工具包中获取组件。

import {Alert,Button} from '@company/ui-kit';

正确工作的摇树也很重要，因为我们的一些项目仅使用套件中的 2/31 组件，因此我们希望在最终构建中仅查看已使用的组件，这是主要挑战。我们尝试了许多带有单个输出文件或块的汇总配置选项，并意识到，摇树仅适用于块，更有趣的是它仅适用于直接导入块，而不是从 index.js 命名导入。

import Alert from '@company/ui-kit/Alert'; // tree shaking works,only Alert get into build
import {Alert} from '@company/ui-kit'; // tree shaking not working,all kit components are got into the build

有人能解释一下为什么会这样吗？有什么方法可以通过正常工作的树摇动来使用命名导入。同样非常奇怪的是，我们尝试在一些流行的库（如 material ui）中使用命名导入来测试树抖动，但它也不起作用。摇树仅适用于从块直接导入。

还需要提到的是，我们仅在使用 create-react-app 创建的项目中测试了 tree震动。我真的不认为问题可能出在 create-react-app bundler 配置中，但也许它会有助于解决这个问题。

对于完整的图片，还附上了我们的汇总配置：

import multiInput from 'rollup-plugin-multi-input';
import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';
import external from 'rollup-plugin-peer-deps-external';
import resolve from 'rollup-plugin-node-resolve';
import copy from 'rollup-plugin-copy'
import postcss from 'rollup-plugin-postcss';
import postcssUrl from 'postcss-url';
import asset from "rollup-plugin-smart-asset";

export default {
    input: ['src/index.js','src/Components/**/*.js'],output: [
        {
            dir: './',format: 'cjs',sourcemap: true,exports: 'auto',chunkFileNames: '__chunks/[name]_[hash].js'
        }
    ],plugins: [
        multiInput({relative: 'src/'}),external(),postcss({
            modules: false,extract: true,minimize: true,sourceMap: true,plugins: [postcssUrl({url: 'inline',maxSize: 1000})],}),copy({targets: [{src: 'src/static/icons/fonts/*',dest: 'fonts'}]}),babel({exclude: 'node_modules/**'}),asset({url: 'copy',keepImport: true,useHash: false,keepName: true,assetsPath: 'assets/'}),resolve(),commonjs({include: 'node_modules/**'})
    ]
};

提前感谢您的回复！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

importimportimportreactjsreactjsreactjsreactjsrollupjstree-shakingwebpackwebpackwebpack