WebPack loads all semantic-ui components

Question

I am currently working on a project and I need to configure WebPack . In the project, we also use ReactJS and Semantic-UI . Here is webpack.config.js :

var path = require("path"); var webpack = require('webpack'); var BundleTracker = require('webpack-bundle-tracker'); var BundleAnalyzer = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; module.exports = { context: __dirname, entry: { react: ["react", "react-dom"], home: './assets/js/index.jsx', }, output: { path: path.resolve('./assets/bundles/'), filename: "[name].js", }, plugins: [ new BundleTracker({filename: './webpack-stats.json'}), new webpack.optimize.CommonsChunkPlugin({ names: ["react"], }), new webpack.optimize.CommonsChunkPlugin({ name: "home", chunks: ['home'], filename: "[name]-[hash].js", }), new BundleAnalyzer(), ], module: { loaders: [ { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader', options: { presets: ["es2015", "react"] } }, ], }, resolve: { modules: ['node_modules', 'bower_components'], extensions: ['*', '.js', '.jsx'] }, }; 

In the assets / js / index.jsx file , we have only these import statements:

 import React from "react"; import ReactDOM from 'react-dom'; import { Button } from 'semantic-ui-react'; 

Running the webpack command, it issues two files:

• react.js: 779KB
• home- [some_hash_number] .js: 1.5 MB

Using the webpack-bundle-analyzer plugin, we get the following:

As you see the red rectangle in the picture, all semantic-ui interaction components are inserted into the home.js file, although I just imported the Button component from the assets / js / index.js file and therefore the output file is getting too big.

Is it possible to simply link the necessary components?

UPDATE

Reading @Alexander Fedyashov's answer, I installed babel-plugin-lodash and updated webpack.config.js accordingly:

 var path = require("path"); var webpack = require('webpack'); var BundleTracker = require('webpack-bundle-tracker'); var BundleAnalyzer = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; module.exports = { context: __dirname, entry: { react: ["react", "react-dom"], home: './assets/js/index.jsx', }, output: { path: path.resolve('./assets/bundles/'), filename: "[name].js", }, plugins: [ new BundleTracker({filename: './webpack-stats.json'}), new webpack.optimize.CommonsChunkPlugin({ name: "react", }), new webpack.optimize.CommonsChunkPlugin({ name: "home", chunks: ['home'], filename: "[name]-[hash].js", }), new BundleAnalyzer(), ], module: { loaders: [ { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader', options: { plugins: ["lodash", { "id": ["lodash", "semantic-ui-react"] }], presets: ["es2015", "react"], } }, ], }, resolve: { modules: ['node_modules', 'bower_components'], extensions: ['*', '.js', '.jsx'] }, }; 

Now everything works and only the necessary components are loaded.

Answer 1

It should be broken on Webpack, but actually the tree tremor does not work. You can use babel-plugin-lodash as described in SUIR docs .

You should keep in mind that some of the components of SUIR are interdependent, i.e.:

• Button requires Icon and Label
• Label required Icon and Image
• Image Dimmer required
• Dimmer required by Portal .

However, the plugin will allow you to separate components such as Rail , Reveal and Advertisement , if you do not use them.

Answer 2

Webpack 2 has a new feature to solve this problem, read this article https://medium.com/@adamrackis/vendor-and-code-splitting-in-webpack-2-6376358f1923