WebPack 加载所有语义用户界面组件

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 命令，它会输出两个文件：

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

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

正如你在图片中看到的红色矩形，所有的 semantic-ui react 组件都被捆绑到 home.js 文件中，虽然我只是导入了Button 组件来自 assets/js/index.js 文件，这就是输出文件变得太大的原因。

有什么方法可以捆绑所需的组件吗？

更新

阅读 @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拆分的，但实际上tree Shaking是不行的。您可以使用babel-plugin-lodash，如 SUIR docs 中所述。

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

• Button 需要 Icon 和 Label
• Label 需要 Icon 和 Image
• Image 需要 Dimmer
• Dimmer 需要 Portal。

但是，如果您不使用这些组件，插件将允许剥离 Rail、Reveal 和 Advertisement。

Answer 2

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