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

第一步

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

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

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

第 2 步

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

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

删除道具类型定义将节省额外空间。

第三步

将源代码缩减为仅包含您正在使用的组件，并且将这些组件缩减为仅生产代码，您现在应该缩小并压缩您的包。

检查 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 的 typescript 中，上面的方法不起作用（因为在这种情况下它不遵循 es 模块系统）。

您可以创建一个文件，该文件将一个一个拉出您正在使用的所有语义用户界面反应模块并重新导出它们。与在您的代码中相比，您只需从帮助文件而不是库本身中引入模块。

像这样：

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 };