taro@2.0.5如何将echart.js文件分离出公共组件(common.js)，并在子包中引用

[Super-Bin]

问题描述

图表库引入问题。引入了echart.js文件，造成主包体积超过2M，现在想把echart相关组件和库放进子包，减少主包体积。但taro打包会自动把子包中的库合并进common.js文件，造成主包过大。按照文档配置webpack，并没有效果。

// config/index.js
const UserChunkName = 'subPackage/sub';

mini: {
    postcss: {
      autoprefixer: {
        enable: true,
        config: {
          browsers: [
            'last 3 versions',
            'Android >= 4.1',
            'ios >= 8'
          ]
        }
      },
      pxtransform: {
        enable: true,
        config: {

        }
      },
      url: {
        enable: true,
        config: {
          limit: 10240 // 设定转换尺寸上限
        }
      },
      cssModules: {
        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
        config: {
          namingPattern: 'module', // 转换模式，取值为 global/module
          generateScopedName: '[name]__[local]___[hash:base64:5]'
        }
      }
    },
    webpackChain (chain, webpack) {
      // todo 暂时关闭
      chain.plugin('analyzer')
        .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, []);
    },
    addChunkPages (pages, pagesNames) {
      pages.set('subPackage/pages/index/index', [UserChunkName]);
    },
    commonChunks(commonChunks) {
      commonChunks.push(UserChunkName);
      return commonChunks;
    },
    splitChunks: {
      cacheGroups: {
        [UserChunkName]: {
          name: UserChunkName,
          priority: 50,
          test(module) {
            return /subPackage[\\/]compnents[\\/]ec-canvas/.test(module.resource);
          }
        }
      }
    }
  },

app.tsx配置路径，主包中的pages/home/index，就一个按钮，跳转到子包中的pages/index/index，在子包中使用图表库

config: Config = {
    pages: [
      'pages/home/index',
    ],
    subPackages: [
      {
        root: "subPackage",
        pages: [
          "pages/index/index"
        ]
      }
    ],
}

期望行为

希望能把echart.js比较大的库，从common.js中分离，并且放入子包模块中。能正确被引用

报错信息

主包common.js中依然引用了echart.js文件

系统信息

Taro CLI 2.0.5 environment info:
System:
OS: macOS 10.15.3
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.16.0 - ~/.nvm/versions/node/v10.16.0/bin/node
Yarn: 1.17.3 - ~/.nvm/versions/node/v10.16.0/bin/yarn
npm: 6.9.0 - ~/.nvm/versions/node/v10.16.0/bin/npm
npmPackages:
@tarojs/components: 2.0.5 => 2.0.5
@tarojs/components-qa: 2.0.5 => 2.0.5
@tarojs/mini-runner: 2.0.5 => 2.0.5
@tarojs/redux: 2.0.5 => 2.0.5
@tarojs/redux-h5: 2.0.5 => 2.0.5
@tarojs/router: 2.0.5 => 2.0.5
@tarojs/taro: 2.0.5 => 2.0.5
@tarojs/taro-alipay: 2.0.5 => 2.0.5
@tarojs/taro-h5: 2.0.5 => 2.0.5
@tarojs/taro-qq: 2.0.5 => 2.0.5
@tarojs/taro-quickapp: 2.0.5 => 2.0.5
@tarojs/taro-swan: 2.0.5 => 2.0.5
@tarojs/taro-tt: 2.0.5 => 2.0.5
@tarojs/taro-weapp: 2.0.5 => 2.0.5
@tarojs/webpack-runner: 2.0.5 => 2.0.5
eslint-config-taro: 2.0.5 => 2.0.5
eslint-plugin-taro: 2.0.5 => 2.0.5
nerv-devtools: ^1.5.6 => 1.5.6
nervjs: ^1.5.6 => 1.5.6
stylelint-config-taro-rn: 2.0.5 => 2.0.5
stylelint-taro-rn: 2.0.5 => 2.0.5

补充信息

在微信群问了好几遍，也没有得到回复。希望能给出解决方

子包代码附件

subPackage.zip

[taro-bot]

CC @luckyadam

[taro-bot]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[luckyadam]

splitChunks 配错了位置
https://nervjs.github.io/taro/docs/migrate-to-2.html#%E6%8B%86%E5%88%86%E7%9A%84%E5%85%AC%E5%85%B1%E6%96%87%E4%BB%B6-vendorsjs-%E8%BF%87%E5%A4%A7

[conkyliu]

不用抽，直接copy

[Super-Bin]

@conkyliu 怎么操作

[conkyliu]

@conkyliu 怎么操作

const echarts = __non_webpack_require__('./echarts.js');

再把文件copy到相应位置

[luckyadam]

Duplicate of #5645

[Smi1e96]

@Super-Bin 你好:heart: 你现在处理方案是copy 还是使用分包拆离:smile:

[Super-Bin]

@Super-Bin 你好❤️ 你现在处理方案是copy 还是使用分包拆离😄

现在是拆包，可以看这个 #5645

[Smi1e96]

@Super-Bin 非常感谢🙏🙏🙏