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()
]
});
答案 0 :(得分: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'));
}
}
答案 1 :(得分:1)
目前,antd dist的很大一部分是svg图标。 16.3% to be exact (current version)。
我相信我们还没有任何官方方式来处理图标,但是存在解决方法。您可以找到它here。
因此,如果删除此设置和一时的语言环境,则可以将库大小减小20%。
他们正在努力减小antd 4中的lib大小,因为它已经在alpha上(最小化了130kb)。