react antd 大型生产包

Posted 2023-03-08

【中文标题】react antd 大型生产包

【英文标题】：react antd large production bundle

【发布时间】：2019-02-22 08:34:00

【问题描述】：

Webpack 输出一个非常大的包：1.5MB 最小化。

我根据文档导入单个组件，使用 imports 'antd/lib/...' 这些是我的导入：

import React from "react";
import ReactDOM from "react-dom";

import TreeSelect from 'antd/lib/tree-select';
const TreeNode = TreeSelect.TreeNode;
import 'antd/lib/tree-select/style/css';

import moment from 'moment';
import LocaleProvider from 'antd/lib/locale-provider';

import DatePicker from 'antd/lib/date-picker';
import 'antd/lib/date-picker/style/css'
const  RangePicker  = DatePicker;

import Menu from 'antd/lib/menu';
import 'antd/lib/menu/style/css'

import Dropdown from 'antd/lib/dropdown';
import 'antd/lib/dropdown/style/css';

import Modal from 'antd/lib/modal';
import 'antd/lib/modal/style/css';

import './styles.css';

我只使用了 5 个组件。捆绑包大小这么大有意义吗？ 我自己的代码相当小 - 大约 15KB 没有缩小。

更新：暂时使用IgnorePlugin() 后，我的包大小减小了 300KB。 1.5MB 还是很大的。

下面是 webpack 配置文件。

webpack.config.js：

  const config = 
        entry: 
            main: path.resolve(SRC_DIR, "index.js"),
        ,
        mode: 'development',
        devtool: 'cheap-eval-source-map',
        output: 
            path: DIST_DIR,
            filename: "bundle.js",
            publicPath: "/static/bundles/",
        ,
        resolve: 
            extensions: [".js", ".json", ".css"]
        ,
        module: 
            rules: [
                
                    test: /\.js?/,
                    include: SRC_DIR,
                    loader: "babel-loader",
                    options: 
                        babelrc: true
                    
                ,
                
                    test: /\.css$/,
                    use: [
                        "style-loader", "css-loader"
                    ]
                
            ]
        ,
      plugins: [
        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NamedModulesPlugin(),
        //new webpack.LoaderOptionsPlugin( debug: true),
      ]
    ;

    module.exports = config;

webpack.prod.js（用于制作捆绑包）：

const common = require('./webpack.config.js');
   module.exports = Object.assign(common, 
        entry: 
            main: path.resolve(SRC_DIR, "index.js"),
        ,
        mode: 'production',
        devtool: false,
        output: 
            publicPath: '/static/dist/',
            path: DIST_DIR,
            filename: 'bundle.js'
        ,
        plugins: [
            new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
            new BundleAnalyzerPlugin()
        ]
    );

【问题讨论】：

嗨，moment 很大，如果可以的话，您可能要考虑使用另一个日期库，例如 date-fnsdate-fns.org 您也可以延迟加载组件

在使用 antd 时，关于大输出包的问题并不是 SO 上的第一个问题。 RangePicker等一些组件也可以使用moment lib，所以会变得很重

问题在于，antd DatePicker 和很多其他的 datepicker 组件一样，依赖于 moment.js。其次，moment 缩小了大约 65KB。不是很小，但不是很大

你介意分享 webpack 配置文件吗？

@AseemUpadhyay，已更新

【参考方案1】：

RangePicker 等 Antd 日期时间功能的一些组件也使用了 moment.js 库，因此它会变得相当繁重。

更新：

尝试使用插件对其进行优化：

new webpack.optimize.UglifyJsPlugin(
  compress: 
    warnings: false,
    screw_ie8: true,
    conditionals: true,
    unused: true,
    comparisons: true,
    sequences: true,
    dead_code: true,
    evaluate: true,
    if_return: true,
    join_vars: true,
  ,
  comments: false,
  sourceMap: true,
  minimize: true,
  exclude: [/\.min\.js$/gi],
),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.AggressiveMergingPlugin(),
new webpack.optimize.ModuleConcatenationPlugin(),

【讨论】：

以及他如何减小该捆绑包的大小？请填写您的答案。

你能解释一下它是如何工作的吗？我收到一个错误"webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead."

@user3599803 Webpack 使用了一系列优化插件，随便看看。当涉及到最小化时，您还可以使用不同的缩小器，但 uglify.js 是最常见的。不知道为什么他们从 webpack 中删除了它，这里是它的解决方案。 ***.com/a/34018909/10098471

【参考方案2】：

更新

Antd 4 出来了！它解决了 SVG 图标问题，比 3.x 版本小 228kb。更新到 4.0.X 版本将大大减少我们的包大小。

老答案

目前，antd dist 的很大一部分是 svg 图标。 16.3% to be exact (current version)。

我相信我们已经没有任何官方方法来处理图标，但存在一种解决方法。你可以找到它here。

因此，如果您删除此和 moment 语言环境，您可以将 lib 大小减少约 20%。

他们正在努力减少 antd 4 中的库大小，它已经处于 alpha 阶段（已经缩小了 130kb）。