小编Nik*_*til的帖子

我制作了一个小型库，其中包含 20-25 个不同的组件，并为其制作了一个 npm 包。

我想在其中使用这些组件的 React 项目有许多页面[路由]使用延迟加载，因此每个页面都有自己的包。

但是当我在我的主页[App.js]上写下声明时。

    import { MyModal } from 'my-react-lib';

每个组件都被加载到主页包中。所以我的初始加载性能是最差的。[2Mb 初始包大小]

我已经阅读了 Tree Shaking 的概念，并尝试在 Webpack 中实现，甚至使用 Rollup 来实现，但它们只制作了 Bundle.js，但不符合我的要求。

我愿意像进出口一样实现精挑细选。与 date-fns 和 lodash 相同。

      import format from 'date-fns/format';
      import debounce from 'lodash/debounce';

如何实现这一目标？

   import MyModal from 'my-react-lib/MyModal';
   import OtherComponent from 'my-react-lib/OtherComponent';

在重复问题之前，请确保您阅读了我的问题

我在 2019 年问这个问题，React Js 文档指定我们可以在我们的 React 项目中使用 SASS链接

我想使用由用户单击控制的动态变量在浅色主题和深色主题之间切换

我的反应代码

import React from \'react\';\nimport \'./App.scss\';\n\nclass App extends React.Component {\n    render() {\n        return (\n            <div className="Home">\n                I\xe2\x80\x99m slow and smooth\n                <button onClick={() => console.log()}>Change theme</button>\n            </div>\n        );  \n    }\n}\n\nexport default App;\n

我的SASS代码：

$theme: light;  // I want to control this variable\n\n$bgcolor: #222222;\n\n@if($theme== light) {\n    $bgcolor: white;    \n}\n@else {\n    $bgcolor: black;    \n}\n\n.Home {\n    background-color: $bgcolor;\n    height: 100vh;\n}\n