[需求] 自动按子包切分 chunk

[rikumi]

需求描述 有两个页面同时用到了一个很大的 SDK，这时这个 SDK 会被抽到 remax-vendors.js。由于这个 SDK 太大了，导致产物代码开始超过大小限制，于是我们希望把这两个页面放在同一个子包里，希望这两个子包同时依赖的 SDK 也能被输出到这个子包里。

解决方案 单个页面引入的模块：默认打包在页面 js 单个分包内多个页面引入的模块：打包在分包内的额外 js 跨分包引入的模块、或者不属于分包页面的模块：打包到 remax-vendors.js

其他信息 无

[jaluik]

我也遇到过这个问题

自己重写webpack的splitChunks配置就可以

    config.optimization.splitChunks({
      cacheGroups: {
        remaxVendors: {
          name: 'remax-vendors',
          test(module) {
            //remax origin-split
            const extensions = ['.mjs', '.js', '.jsx', '.ts', '.tsx'];
            const reg = new RegExp(`(${extensions.join('|')})$`);
            return (
              module.resource &&
              reg.test(module.resource) && 自己的判断条件
            );
          },
          chunks: 'initial',
          minChunks: 2,
          priority: -10,
          minSize: 0
        },
xxx: {
自己需要的分包配置
}
    })

[watsonhaw5566]

我也遇到过这个问题

自己重写webpack的splitChunks配置就可以

    config.optimization.splitChunks({
      cacheGroups: {
        remaxVendors: {
          name: 'remax-vendors',
          test(module) {
            //remax origin-split
            const extensions = ['.mjs', '.js', '.jsx', '.ts', '.tsx'];
            const reg = new RegExp(`(${extensions.join('|')})$`);
            return (
              module.resource &&
              reg.test(module.resource) && 自己的判断条件
            );
          },
          chunks: 'initial',
          minChunks: 2,
          priority: -10,
          minSize: 0
        },
xxx: {
自己需要的分包配置
}
    })

你们用了什么库嘛，都那么大的。这个方法我再看看

[jaluik]

我也遇到过这个问题 自己重写webpack的splitChunks配置就可以

    config.optimization.splitChunks({
      cacheGroups: {
        remaxVendors: {
          name: 'remax-vendors',
          test(module) {
            //remax origin-split
            const extensions = ['.mjs', '.js', '.jsx', '.ts', '.tsx'];
            const reg = new RegExp(`(${extensions.join('|')})$`);
            return (
              module.resource &&
              reg.test(module.resource) && 自己的判断条件
            );
          },
          chunks: 'initial',
          minChunks: 2,
          priority: -10,
          minSize: 0
        },
xxx: {
自己需要的分包配置
}
    })

你们用了什么库嘛，都那么大的。这个方法我再看看

不只是库呀。。有些子包用的公共组件也会被打包到根目录的remax-vendors.js 里面 ， 期望的肯定是子包的公共组件打包到子包的remax-vendors里面，主包的公共组件和库打包到根目录的remax-vendors.js 里

[fewoy]

同样遇到了这个问题，能否提供配置出来，有些公共的包不打包到remax-vendors中，我期望打包到对应子包中，这样可以减少主包大小

[WangXang]

同样的问题，分包中定义的组件，在这个分包的其他页面中使用该组件，同样打包到主包中去了？

[watsonhaw5566]

@WangXang @fewoy
重写 一下 webpack 的配置就好了，配置 @jaluik 已经给出来了。

[WangXang]

@watsonhaw5566 先这样吧，3.0会考虑解决这个问题么？

[watsonhaw5566]

@watsonhaw5566 先这样吧，3.0会考虑解决这个问题么？

会，想内置这个功能

[q759410559]

子包的公共组件打包到子包的remax-vendors里面 config.optimization.splitChunks 可不可以提供个demo

[watsonhaw5566]

子包的公共组件打包到子包的remax-vendors里面 config.optimization.splitChunks 可不可以提供个demo

就是 @jaluik 兄弟的那段代码，你拷贝在 remax.config.js 中就好了。

[q759410559]

config.optimization.splitChunks({
      cacheGroups: {
        remaxVendors: {
          name: 'remax-vendors',
          test(module) {
            const extensions = ['.mjs', '.js', '.jsx', '.ts', '.tsx']
            const reg = new RegExp(`(${extensions.join('|')})$`)

            const custom1 = /[\\/]node_modules[\\/](wxa-plugin-canvas|cheerio)[\\/]/
            const custom2 = /[\\/]src[\\/]packageA[\\/]components[\\/]/
            console.log('module.resource：', module.resource)
            return module.resource && reg.test(module.resource) && !custom1.test(module.resource) && !custom2.test(module.resource)
          },
          chunks: 'initial',
          minChunks: 2,
          priority: -10,
          minSize: 0
        },
        remaxVendorsA: {
          name: 'packageA/remax-vendors-a',
          test(module) {
            const extensions = ['.mjs', '.js', '.jsx', '.ts', '.tsx']
            const reg = new RegExp(`(${extensions.join('|')})$`)
            const custom1 = /[\\/]node_modules[\\/](wxa-plugin-canvas|cheerio)[\\/]/
            const custom2 = /[\\/]src[\\/]packageA[\\/]components[\\/]/
            return module.resource && reg.test(module.resource) && (custom1.test(module.resource) || custom2.test(module.resource))
          },
          chunks: 'initial',
          minChunks: 2,
          priority: 10,
          minSize: 0,
          reuseExistingChunk: true,
        }
      }
    })

配置后分包页面会同时引用remax-vendors，remax-vendors-a，比之前更大了。不知是哪里配置错了，所以想问问有没有完整的demo

[watsonhaw5566]

@q759410559 看一下这个 repo https://github.com/lee88688/remax-subpackage-code-split-plugin ,这个兄弟写了。你试试操作一波，mini-css-extract-plugin 的 bug 我复查一下