使用 webpack 的 React Semantic-ui 包大小太大答案

【问题标题】：React Semantic-ui bundle size with webpack is too big使用 webpack 的 React Semantic-ui 包大小太大
【发布时间】：2019-06-09 15:11:02
【问题描述】：

我正在使用语义 UI 与 webpack 4 反应，但是当我运行构建时，我得到了这个错误：

    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处于生产模式。

【问题讨论】：

标签： reactjs webpack semantic-ui

【解决方案1】：

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

【讨论】：