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

Posted 2023-02-22

【中文标题】WebPack 加载所有语义用户界面组件

【英文标题】：WebPack loads all semantic-ui components

【发布时间】：2018-01-05 07:30:50

【问题描述】：

我目前正在做一个项目，我需要配置 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 插件，我们得到：

正如你在图片中看到的红色矩形，所有的 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']
    ,
;

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

【参考方案1】：

应该是被Webpack拆分的，但实际上tree Shaking是不行的。您可以使用babel-plugin-lodash，如 SUIR docs 中所述。

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

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

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

【讨论】：

我照你说的做了并更新了帖子，但 babel-plugin-lodash 没有删除未使用的组件。请检查我是否做错了什么。谢谢

你不检查 SUIR 存储库中的示例配置，你应该在插件中定义转换的导入：["lodash", "id": ["lodash", "semantic-ui-react"] ]

【参考方案2】：

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

【讨论】：

我已经通过分离 App 和 ReactJS 代码在我的 webpack 配置中完成了代码拆分。我阅读了链接，但找不到删除不必要的捆绑模块的方法。请提供更多信息。