Javascript 大型生产束

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.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（用于制作捆绑包）：

---

Antd日期时间功能的一些组件，如RangePicker也使用矩.js库，因此它可能会变得非常沉重

UPD：

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

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(),

---

更新

蚂蚁4出局了！它解决了SVG图标问题，比3.x版本小228kb。升级到4.0.X版本将大大减少我们的捆绑包大小

旧答案

目前，antd dist的很大一部分是svg图标

我相信我们还没有任何官方的方法来处理图标，但有一个解决办法。你可以找到它

因此，如果您删除此项并使用即时语言环境，则可以将库大小减少约20%

---

他们正在努力减少Antd4中的库大小，它已经在alpha上了（已经缩小了130kb）。

Hi，

moment

很大，如果可以，你可能想考虑使用另一个日期库，比如“代码>日期FNS ”，你也可以懒惰地加载你的组件，这不是使用AND时关于大输出包的第一个问题。有些组件，如RangePicker，也可以使用矩库，因此它可能会变得非常沉重。问题是，与许多其他DatePicker组件一样，antd DatePicker也依赖于moment.js。其次，矩的大小约为65KB。不是很小，但不是很大。你介意共享网页包配置文件吗？@aseempadhyay，更新了，他是如何减小包的大小的？请填写你的答案。你能解释一下它是如何工作的吗？我收到一个错误

“webpack.optimize.UglifyJsPlugin已被删除，请改用config.optimization.minimize。”

@user3599803 webpack使用了一系列优化插件，请查看它们。说到最小化，你也可以使用不同的缩小器，但uglify.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(),