8

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

我想看看哪个模块负责大尺寸，发现语义-ui-react 本身占用了 1.74M。

react-vendor.js 1.74 MB 2 [发出] [大] react-vendor

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

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

有什么办法可以让文件变小吗？

4

3 回答 3

9

步骤1

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

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

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

第2步

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

您应该已经这样做了，因为在生产模式下对 bundle 做出反应是必需的。以防万一，以下是有关如何执行此操作的说明：如何打开/关闭 ReactJS '开发模式'？

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

第 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

于 2017-04-07T22:56:00.430 回答
2

因为存在一些问题所以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"
        ]
      }
    ]
  ]
于 2017-06-16T17:57:29.030 回答
2

In typescript when targeting es5 the recipes above don't work (because it doesn't follow es module system in this case).

You can create a file which will pull all semantic-ui-react modules you are using one by one and reexport them. Than in your code you just bring modules from the helper file rather than from the library itself.

Like this:

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 };
于 2017-11-28T19:04:11.710 回答