3

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

我根据文档导入单个组件，使用导入 '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 还是很大的。

Bellow 是 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()
        ]
    });
4

2 回答 2

1

更新

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

旧答案

目前，antd dist 的很大一部分是 svg 图标。准确地说是 16.3%（当前版本）。

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

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

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

于 2019-08-21T05:48:42.180 回答
1

Antd 日期时间功能的一些组件（如RangePicker）也使用了 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(),
于 2018-09-18T11:19:35.233 回答