BizCharts Version:4.1.11
Platform:react@17.0.2
请在 peerDependencies 中加入 react 等用户共用包依赖,并请尽快支持react 17。
另外:代码中有引用 @AntV **/esm 的代码,也有 @AntV **/lib 的代码,这是包过大的原因之一,请加强 code review,个人建议可以统一引用 @AntV **/es 的代码,通过编译工具可以将体积优化下600kb左右。
想要看下怎么自给自足,减小包大小的看这里:
plugin.js
const fs = require('fs');
const path = require('path');
module.exports = function select(rootPath) {
const dirPath = path.resolve(rootPath,'node_modules','@antv');
const subs = fs.readdirSync(dirPath);
// 把 @antv/${sub}/lib 映射成 @antv/${sub}/esm,供 webpack alias 使用
return subs.reduce((r,sub)=>{
const source =`@antv/${sub}/lib`;
const target = `@antv/${sub}/esm`;
return {...r,[source]:target};
},{});
}
webpack.config.js
const antvSelect = require('./plugin.js');
// 强制把bizcharts 中关于 @antv/${sub}/lib 的包引用映射成 @antv/${sub}/esm 包引用
const antv = antvSelect(__dirname);
module.exports = {
resolve: {
// 自己的配置
...... ,
alias: {
// 为后续由使用者自行编译做准备
...antv,
// 把我们引入的 bizcharts 统一指向 bizcharts/es
// 如: import {xxx} from 'bizcharts' => import {xxx} from 'bizcharts/es'
'bizcharts':'bizcharts/es'
}
},
module: {
rules: [
// 自己的配置
...... ,
// 直接编译 node_modules 中的 bizcharts/es 和 @antv,
// 这时候,webpack 会按照我们设定的 antv 映射对象,把 bizcharts 中引入的
// @antv/${sub}/lib 的包引用映射成 @antv/${sub}/esm 包。
{
test: /\.js$/,
include:
/(node_modules\/bizcharts\/es|node_modules\/@antv)/,
use: [
{
loader: 'babel-loader',
options: {
cacheDirectory: true
}
}
]
}
])
},
};
实测,可将包大小减少大约 600 kb 左右。
3条答案
按热度按时间4smxwvx51#
试了一下 没有好用 能把具体webpack配置发一下吗
cmssoen22#
试了一下 没有好用 能把具体webpack配置发一下吗
https://github.com/filefoxper/opBizCharts4.1.11
可以下载下来试试,里面有全量配置和实例。顺便说下,这套配置只能优化体积,对react版本没有什么帮助
imzjd6km3#
这里有配置实例: https://github.com/filefoxper/opBizCharts4.1.11