BizCharts [problem & resolve]编译问题,版本支持问题,同时给出当前包大小优化方案,供 webpack 使用者参考

vof42yt1  于 2022-11-19  发布在  Webpack
关注(0)|答案(3)|浏览(180)

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 左右。

4smxwvx5

4smxwvx51#

试了一下 没有好用 能把具体webpack配置发一下吗

cmssoen2

cmssoen22#

试了一下 没有好用 能把具体webpack配置发一下吗

https://github.com/filefoxper/opBizCharts4.1.11

可以下载下来试试,里面有全量配置和实例。顺便说下,这套配置只能优化体积,对react版本没有什么帮助

相关问题