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
home- [some_hash_number] .js：1.5 MB

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

当您在图片中看到红色矩形时，所有 semantic-ui 反应组件都捆绑到 home.js 文件中，尽管我刚刚导入了{{1}来自 assets / js / index.js 文件中的组件，这就是输出文件太大的原因。

有没有办法捆绑所需的组件？

更新

阅读 @Alexander Fedyashov 回答，我安装了 babel-plugin-lodash 并更新了 webpack .config.js 相应地：

Button

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

Answer 1

它应该被Webpack拆分，但实际上树摇动并不起作用。您可以使用SU docs中描述的babel-plugin-lodash。

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

WebPack加载所有语义ui组件

2 个答案: