React Semantic-ui 带有 webpack 的包大小太大

Question

我正在使用 semantic-ui 与 webpack 4 反应但是当我运行 build 我得到这个错误：

    WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
    This can impact web performance.
    Assets: 
      node_modules/semantic-ui-css/themes/default/assets/fonts/icons.svg (382 KiB)
      node_modules/semantic-ui-css/themes/default/assets/fonts/brand-icons.svg (496 KiB)
main.css (620 KiB)
  bundle.js (559 KiB)

有办法解决这个问题吗？我用谷歌搜索但找不到任何有用的东西。在我的 webpack 文件中，我简单地设置了：

mode: "production"

在反应文件中，我为默认主题导入 css，如下所示：

import 'semantic-ui-css/semantic.min.css';

但仍然添加了这些资产，在他们的 react-semantic-ui 网站上，他们说默认支持 tree shacking（我安装了最新版本），而且我知道 webpack 4 有 tree 运行在生产模式下，默认情况下也会出现shacking。

Answer 1

这些资产是通过导入添加到 semantic-ui-css/semantic.min.css，tree-shaking 在 css 模块中不起作用（在您的情况下是导入到 semantic-ui-css/semantic.min.css）。

React Semantic-ui 带有 webpack 的包大小太大

React Semantic-ui bundle size with webpack is too big

reactjs

semantic-ui

webpack