WebPack 加载所有 semantic-ui 组件

Question

我目前正在做一个项目，我需要配置 WebPack。在项目中，我们也在使用ReactJS和Semantic-UI。这里是 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']
    },
};

在assets/js/index.jsx文件中，我们只有这些导入语句：

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

通过运行 webpack命令，输出两个文件：

react.js：779 KB
主页-[some_hash_number].js: 1.5 MB

使用 webpack-bundle-analyzer 插件，我们得到这个：

正如您在图片中看到的红色矩形，所有 语义-ui 反应组件都捆绑到 home.js 文件，尽管我刚刚从 assets/js/index.js 文件中导入了 Button 组件，这就是输出文件变得太大的原因。

有没有办法只捆绑需要的组件？

更新

阅读@Alexander Fedyashov回答，我安装了babel-plugin-lodash 并相应地更新了 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({
            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']
    },
};

现在一切正常，只加载了需要的组件。

Answer 1

Webpack 2 有一个新特性可以解决这个问题，阅读这篇文章 https://medium.com/@adamrackis/vendor-and-code-splitting-in-webpack-2-6376358f1923

Answer 2

应该是webpack拆分的，但实际上tree shaking不起作用。您可以按照 SUIR docs.

中的说明使用 babel-plugin-lodash

你应该记住，SUIR 的一些组件是相互依赖的，即：

Button 需要 Icon 和 Label
Label 需要 Icon 和 Image
Image 需要 Dimmer
Dimmer 需要 Portal.

但是，如果您不使用 Rail、Reveal 和 Advertisement 等组件，插件将允许删除它们。

WebPack 加载所有 semantic-ui 组件

WebPack loads all semantic-ui components

reactjs

webpack

babeljs

webpack-2

semantic-ui-react