Open filefoxper opened 3 years ago
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 左右。
试了一下 没有好用 能把具体webpack配置发一下吗
https://github.com/filefoxper/opBizCharts4.1.11
可以下载下来试试,里面有全量配置和实例。顺便说下,这套配置只能优化体积,对react版本没有什么帮助
这里有配置实例: https://github.com/filefoxper/opBizCharts4.1.11
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
webpack.config.js
实测,可将包大小减少大约 600 kb 左右。