semantic-ui-react webpack大小是1.74M？

Question

我发现我的项目的通用供应商非常大。

我想看看是哪个模块造成了大尺寸，发现semantic-ui-react 本身占用了1.74M。

react-vendor.js 1.74 MB 2 [emitted] [big] react-vendor

'react-vendor': [
   'semantic-ui-react',
 ],

  new CommonsChunkPlugin({
    name: "react-vendor",
    filename: "react-vendor.js",
    minChunks: Infinity,
  }),

我可以做些什么来减小文件大小吗？

Answer 1

步骤 1

默认情况下，导入库将导入每个组件。如果您使用的是 webpack 1，那么您可以按照此处显示的捆绑器使用部分中的说明进行操作：

http://react.semantic-ui.com/usage#bundlers

示例配置展示了如何使用 babel-plugin-lodash（尽管有名称）自动将导入语句转换为单独的组件导入。显式导入单个组件将确保您只捆绑您正在使用的组件。未使用的组件将不会包含在您的捆绑包中。

第 2 步

每个组件都包含一个 propTypes 定义。这些仅在开发中有用。它们也非常庞大和冗长。我们包装我们的 prop 类型定义，以便在缩小过程中通过死代码消除自动删除它们，前提是 process.env.NODE_ENV 设置为 "production" 并作为全局公开。

您应该已经这样做了，因为在生产模式下对捆绑做出反应需要这样做。为了以防万一，以下是有关如何执行此操作的说明：How to turn on/off ReactJS 'development mode'?

删除 prop 类型定义将额外节省 space。

步骤 3

随着源代码减少到只包含您正在使用的组件，并且这些组件减少到只包含生产代码，您现在应该缩小并压缩您的包。

检查 webpack 文档以启用生产，因为这将缩小您的代码并使用无用代码消除，这非常简单。然后你可以压缩你的包：https://github.com/webpack-contrib/compression-webpack-plugin。

结论

自从我这样做以来，库已经有了一些更新，但我以 UMD 格式实现了整个库的 81.8 kB，这有稍微大的开销。

此处显示完整设置的 PR：https://github.com/webpack-contrib/compression-webpack-plugin

这里的统计数据：https://github.com/Semantic-Org/Semantic-UI-React/blob/3aa72bc76aac05c526e2b14a6ed4687995cd11af/stats-library.md

Answer 2

因为there are some issues和Webpack 2所以不支持tree shaking优化导入，我暂时使用下面的设置来处理这个问题：

webpack.config.js

plugins: [
  new webpack.DefinePlugin({
    'process.env': {
      NODE_ENV: JSON.stringify('production')
    }
  }),
  new webpack.LoaderOptionsPlugin({
    minimize: true,
    debug: false
  }),
  new webpack.optimize.UglifyJsPlugin(), // Minify everything
  new webpack.optimize.AggressiveMergingPlugin() // Merge chunks
]

.babelrc

  "plugins": [
    "transform-react-jsx",
    [
      "lodash",
      {
        "id": [
          "lodash",
          "semantic-ui-react"
        ]
      }
    ]
  ]

Answer 3

在以 es5 为目标的打字稿中，上面的方法不起作用（因为在这种情况下它不遵循 es 模块系统）。

您可以创建一个文件，该文件将逐一提取您正在使用的所有语义-ui-react 模块并重新导出它们。与在您的代码中相比，您只需从辅助文件而不是库本身引入模块。

像这样：

import Button = require('semantic-ui-react/dist/es/elements/Button');
import Icon = require('semantic-ui-react/dist/es/elements/Icon');
import Image = require('semantic-ui-react/dist/es/elements/Image');
import Input = require('semantic-ui-react/dist/es/elements/Input');
import Label = require('semantic-ui-react/dist/es/elements/Label');

import Form = require('semantic-ui-react/dist/es/collections/Form');
import Menu = require('semantic-ui-react/dist/es/collections/Menu');
import Message = require('semantic-ui-react/dist/es/collections/Message');
import Table = require('semantic-ui-react/dist/es/collections/Table');

import Checkbox = require('semantic-ui-react/dist/es/modules/Checkbox');
import Dropdown = require('semantic-ui-react/dist/es/modules/Dropdown');
import Modal = require('semantic-ui-react/dist/es/modules/Modal');

import Confirm = require('semantic-ui-react/dist/es/addons/Confirm');
import TextArea = require('semantic-ui-react/dist/es/addons/TextArea');

import { DropdownItemProps, CheckboxProps, InputProps,
  MenuItemProps, ModalProps, TextAreaProps } from 'semantic-ui-react/index.d';


export { Button, Dropdown, Confirm, Icon, Input, Modal, Label,
  Table, Checkbox, TextArea, Form, Menu, Image, Message };
export { DropdownItemProps, CheckboxProps, InputProps, MenuItemProps, ModalProps, TextAreaProps };

semantic-ui-react webpack大小是1.74M？

semantic-ui-react webpack size is 1.74M?

semantic-ui

webpack