WebPack加载所有语义-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命令，它输出两个文件：

1. react.js: 779 KB
2. home-some_hash_number.js. MB :1.5MB

使用webpack-bundle-analyzer插件，我们可以得到以下内容：

​

​

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

有任何方法只捆绑所需的组件吗？

更新

通过阅读@Alexander 的答案，我安装了并相应地更新了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来分割，但实际上树的摇晃是行不通的。您可以使用babel-plugin-lodash，如SUIR 文档中所述。

您应该记住，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。