gpt4 book ai didi

javascript - react antd 大型生产包

转载 作者:行者123 更新时间:2023-11-29 20:50:06 24 4
gpt4 key购买 nike

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 个组件。 bundle 的大小有那么大有意义吗?我自己的代码相当小 - 大约 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()
]
});

最佳答案

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

关于javascript - react antd 大型生产包,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52384320/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com