第1步

Question

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

我想知道哪个模块对大尺寸负责，发现语义 - 反应本身就是1.74M。

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

BindT

我能做些什么来缩小文件大小？

Answer 1

第1步

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

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

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

第2步

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

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

删除道具类型定义将节省更多空间。

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

语义 - 反应webpack大小是1.74M？

3 个答案:

第1步

第2步

第3步

结论