Question

Webpack输出非常大的捆绑包：最小化1.5MB 。

我根据文档导入单个组件，使用import'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()
        ]
    });

Answer 1

Antd日期时间功能的某些组件（例如 RangePicker ）也使用moment.js库，因此它可能变得很繁重。

UPD：

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

<?php
/**
* Created by PhpStorm.
* User: PC1
* Date: 9/18/2018
* Time: 11:57 AM
*/
include 'config.php';
include 'BefrestAuth.php';
include 'Publisher.php';
$memcahe = new Memcache();
$memcahe->connect("localhost", 11211);
$dataNew = json_decode($memcahe->get('keyNew'));
$memcahe->set('keyOld', json_encode($dataNew));
while (true) {
    $dataNew = json_decode($memcahe->get('keyNew'));
    $dataOld = json_decode($memcahe->get('keyOld'));

    if (!$dataNew[0]->price) {
        continue;
    } else {
        $str = "";
        $taskolu = array();
        for ($i = 0; $i < count($dataNew); $i++) {
            if ((int)$dataNew[$i]->price > (int)$dataOld[$i]->price) {
                echo "\n".$dataNew[$i]->price."/////".json_encode($dataOld[$i])."\n";
                $str .= "name:" . $dataNew[$i]->name . " type:" . $dataNew[$i]->type . " price:" . $dataNew[$i]->price."\n";
                array_push($taskolu, $dataNew[$i]);
            }
            if ((int)$dataOld->price > (int)$dataNew[$i]->price) {

                $str .= "name:" . $dataNew[$i]->name . " type:" . $dataNew[$i]->type . " price:" . $dataNew[$i]->price."\n";
                array_push($taskolu, $dataNew[$i]);
            }
        }
        if (!empty($str)) {
            $dbca = connection();
            $dbca->set_charset("utf8");
            $rate = "SELECT u.user_chid FROM users u";
            $result = $dbca->prepare($rate);
            $result->execute();
            $res = $result->get_result();
            while ($obj = $res->fetch_object()) {
                $auth = (string)BefrestAuth::generatePublishAuth($obj->user_chid);
                Publisher::publish(11812, $obj->user_chid, $auth, json_encode(array("messages" => $taskolu)));
                echo "\n";
            }
        }
        $memcahe->delete('keyOld');
        $data=json_encode($dataNew);
        $memcahe->set('keyOld', $data);
        $dataOld = json_decode($memcahe->get('keyOld'));

    }
}

Answer 2

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

我相信我们还没有任何官方方式来处理图标，但是存在解决方法。您可以找到它here。

因此，如果删除此设置和一时的语言环境，则可以将库大小减小20％。

他们正在努力减小antd 4中的lib大小，因为它已经在alpha上（最小化了130kb）。

与大型生产包反应

2 个答案: