The semantic-ui-reactive web package size is 1.74 M?

Question

I believe that the overall supplier for my project is very large.

I'm trying to figure out which module is responsible for the large size, and found that semantic-ui-react accepts 1.74M by itself.

response-vendor.js 1.74 MB 2 [emitted] [large] responsive provider

'react-vendor': [ 'semantic-ui-react', ], new CommonsChunkPlugin({ name: "react-vendor", filename: "react-vendor.js", minChunks: Infinity, }), 

Is there anything I can do to make the file size smaller?

Answer 1

Step 1

By default, library imports will import each component. If you are using webpack 1, then you can follow the directions given here in the usage section for packages:

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

The configuration example shows how you can use babel-plugin-lodash (despite the name) to automatically convert your import statements into separate component imports. Explicitly importing individual components ensures that you only combine the components you use. Unused components will not be included in your kit.

Step 2

Each component includes a propTypes definition. They are only useful during development. They are also quite large and verbose. We assure our prop type definitions that they are automatically deleted during minimization with dead code removed, provided that process.env.NODE_ENV is set to "production" and set to global.

You should already do this, as it is required to respond to the package in production mode. Just in case, here are instructions on how to do this: How to enable / disable ReactJS 'development mode?

Removing prop type definitions will save extra space.

Step 3

If the source code is shortened to include only the components that you use, and these components are cut only for production code, you should now minimize and compress your package.

Check the webpack docs for production capability, as this will reduce your code and eliminate dead code, it is very simple. You can then compress your package using https://github.com/webpack-contrib/compression-webpack-plugin .

Conclusion

Since then I have received some updates in the library, but I have reached 81.8 kB for the entire library in UMD format, which has a slightly large overhead.

The PR here shows the full setup: https://github.com/webpack-contrib/compression-webpack-plugin

Statistics here: https://github.com/Semantic-Org/Semantic-UI-React/blob/3aa72bc76aac05c526e2b14a6ed4687995cd11af/stats-library.md

Answer 2

Since there are some problems with Webpack 2 , therefore it does not support tree shaking for import optimization, I temporarily use the settings below to solve the problem:

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

In typescript, when targeting es5, the recipes above do not work (because in this case they do not follow the es-module system).

You can create a file that pulls out all the semantic ui response modules that you use one by one and re-export them. Then in your code, you simply add modules from the auxiliary file, not 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 };