taro主包超过2M #102

xiaoice · 2021-03-02T13:15:14Z

这个特性解决了什么问题？

1、分包里面的Component组件也会打到主包的common.js中，有没有办法规避这个问题，比如打到分包中
2、css的BEM规范会导致很多冗余字段，有没有自动压缩样式名字的解决方案呢
在项目里面使用splitChunks + addChunkPages抽离分包会报Please do not register multiple Pages这个错误，抽离node_modules模块是正常工作的，应该是我这个项目的问题，项目文件太多一时半会也不好拆出来，期待有更好的解决方案

这个 API 长什么样？

期待主包降下来的解决方案

icepy · 2021-03-03T03:05:44Z

这个特性解决了什么问题？

1、分包里面的Component组件也会打到主包的common.js中，有没有办法规避这个问题，比如打到分包中
2、css的BEM规范会导致很多冗余字段，有没有自动压缩样式名字的解决方案呢
在项目里面使用splitChunks + addChunkPages抽离分包会报Please do not register multiple Pages这个错误，抽离node_modules模块是正常工作的，应该是我这个项目的问题，项目文件太多一时半会也不好拆出来，期待有更好的解决方案

这个 API 长什么样？

期待主包降下来的解决方案

想问一下，taro 的分包，你是怎么做的？我看文档里没有描述这一块的事情。

我看到微信小程序本身的文档有描述分包这一块的事情，通过 subpackages 来做。

xiaoice · 2021-03-03T05:59:24Z

taro3.x app.config.js文件添加subpackages
参考：https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/basic.html

unforesndprson · 2021-03-03T06:42:58Z

友情提示：subpackages=> subPackages ，比如alipay不支持subpackages

xiaoice · 2021-03-05T10:53:21Z

分包里面的Component组件能不能默认不打到主包里面

xiaoice · 2021-03-05T10:53:41Z

分包里面的Component组件能不能默认不打到主包里面

wuchangming · 2021-03-18T04:42:28Z

@xiaoice

分包里面的Component组件也会打到主包的common.js中，有没有办法规避这个问题，比如打到分包中
这个原因是多个page 用到了同一个 Component，目前taro3会自动抽到common.js中。手工解决方案就是splitChunks + addChunkPages，代码多时工作量是比较大。

我们生产用的这个方案：NervJS/taro#8135 ，但这个 PR 还没合，可以参考下。

xiaoice · 2021-03-24T06:41:11Z

@wuchangming 感谢，您这个方案不知道怎么用的，目前taro分包的组件被单个页面引入不会打到主包common.js，被多个页面引入就会打入common.js，我们现在分包组件尽量避免被多个页面引入

wuchangming · 2021-05-24T10:54:17Z

@xiaoice ,最新版本已合入该特性。配置如下就能生效

module.exports = {
  // ...
  mini: {
    // ...
    optimizeMainPackage: {
      enable: true
    }
  }
}

详细文档地址：https://docs.taro.zone/docs/config-detail#minioptimizemainpackage

SilentFlute · 2021-07-07T06:27:06Z

@wuchangming 你好, 能帮忙看一下吗?我用taro开发小程序也遇到了包过大的问题, 无法真机调试, 使用你提供的这个方式配置了config/dev.js, 但运行yarn dev:weapp就报错了:
config/dev.js:

module.exports = {
  env: {
    NODE_ENV: '"development"'
  },
  defineConstants: {
  },
  mini: {
    optimizeMainPackage: {
      enable: true
    }
  },
  h5: {}
}

config/index.js:

import { resolve } from 'path'

const config = {
  projectName: 'myAppRedux',
  date: '2021-5-24',
  designWidth: 750,
  deviceRatio: {
    640: 2.34 / 2,
    750: 1,
    828: 1.81 / 2
  },
  sourceRoot: 'src',
  outputRoot: 'dist',
  plugins: [],
  defineConstants: {
  },
  alias: {
    '@': resolve(__dirname, '..', 'src')
  },
  copy: {
    patterns: [
    ],
    options: {
    }
  },
  framework: 'react',
  mini: {
    postcss: {
      pxtransform: {
        enable: true,
        config: {

        }
      },
      url: {
        enable: true,
        config: {
          limit: 1024 // 设定转换尺寸上限
        }
      },
      cssModules: {
        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
        config: {
          namingPattern: 'module', // 转换模式，取值为 global/module
          generateScopedName: '[name]__[local]___[hash:base64:5]'
        }
      }
    }
  },
  h5: {
    publicPath: '/',
    staticDirectory: 'static',
    postcss: {
      autoprefixer: {
        enable: true,
        config: {
        }
      },
      cssModules: {
        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
        config: {
          namingPattern: 'module', // 转换模式，取值为 global/module
          generateScopedName: '[name]__[local]___[hash:base64:5]'
        }
      }
    }
  }
}

module.exports = function (merge) {
  if (process.env.NODE_ENV === 'development') {
    return merge({}, config, require('./dev'))
  }
  return merge({}, config, require('./prod'))
}

package.json:

{
  "name": "myAppRedux",
  "version": "1.0.0",
  "private": true,
  "description": "taro redux",
  "templateInfo": {
    "name": "redux",
    "typescript": false,
    "css": "sass"
  },
  "scripts": {
    "build:weapp": "taro build --type weapp",
    "build:swan": "taro build --type swan",
    "build:alipay": "taro build --type alipay",
    "build:tt": "taro build --type tt",
    "build:h5": "taro build --type h5",
    "build:rn": "taro build --type rn",
    "build:qq": "taro build --type qq",
    "build:jd": "taro build --type jd",
    "build:quickapp": "taro build --type quickapp",
    "dev:weapp": "npm run build:weapp -- --watch",
    "dev:swan": "npm run build:swan -- --watch",
    "dev:alipay": "npm run build:alipay -- --watch",
    "dev:tt": "npm run build:tt -- --watch",
    "dev:h5": "npm run build:h5 -- --watch",
    "dev:rn": "npm run build:rn -- --watch",
    "dev:qq": "npm run build:qq -- --watch",
    "dev:jd": "npm run build:jd -- --watch",
    "dev:quickapp": "npm run build:quickapp -- --watch"
  },
  "browserslist": [
    "last 3 versions",
    "Android >= 4.1",
    "ios >= 8"
  ],
  "author": "",
  "license": "MIT",
  "dependencies": {
    "@babel/runtime": "^7.7.7",
    "@tarojs/components": "3.2.9",
    "@tarojs/react": "3.2.9",
    "@tarojs/runtime": "3.2.9",
    "@tarojs/taro": "3.2.9",
    "dva-core": "^2.0.4",
    "dva-loading": "^3.0.22",
    "dva-model-extend": "^0.1.2",
    "react": "^17.0.0",
    "react-dom": "^17.0.0",
    "react-redux": "^7.2.0",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",
    "taro-ui": "^3.0.0-alpha.10"
  },
  "devDependencies": {
    "@babel/core": "^7.8.0",
    "@tarojs/mini-runner": "3.2.9",
    "@tarojs/plugin-mock": "^0.0.7",
    "@tarojs/webpack-runner": "3.2.9",
    "@types/react": "^17.0.2",
    "@types/webpack-env": "^1.13.6",
    "babel-preset-taro": "3.2.9",
    "eslint": "^6.8.0",
    "eslint-config-taro": "3.2.9",
    "eslint-plugin-import": "^2.12.0",
    "eslint-plugin-react": "^7.8.2",
    "eslint-plugin-react-hooks": "^4.2.0",
    "stylelint": "9.3.0"
  }
}

报错信息:

Cannot read property 'getCacheGroups' of null


(node:22840) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'getCacheGroups' of null
    at D:\code\项目路径\node_modules\webpack\lib\optimize\SplitChunksPlugin.js:543:38
    at SyncBailHook.eval (eval at create (D:\code\项目路径\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:5:16)
    at SyncBailHook.lazyCompileHook (D:\code\项目路径\node_modules\tapable\lib\Hook.js:154:20)
    at Compilation.seal (D:\code\项目路径\node_modules\webpack\lib\Compilation.js:1336:38)
    at D:\code\项目路径\node_modules\webpack\lib\Compiler.js:675:18
    at D:\code\项目路径\node_modules\webpack\lib\Compilation.js:1261:4
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\code\项目路径\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:13:1)
    at AsyncSeriesHook.lazyCompileHook (D:\code\项目路径\node_modules\tapable\lib\Hook.js:154:20)
    at Compilation.finish (D:\code\项目路径\node_modules\webpack\lib\Compilation.js:1253:28)
    at D:\code\项目路径\node_modules\webpack\lib\Compiler.js:672:17
    at eval (eval at create (D:\code\项目路径\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:9:1)
    at TaroMiniPlugin.<anonymous> (D:\code\项目路径\node_modules\@tarojs\mini-runner\src\plugins\MiniPlugin.ts:153:7)       
    at Generator.next (<anonymous>)
    at fulfilled (D:\code\项目路径\node_modules\@tarojs\mini-runner\dist\plugins\MiniPlugin.js:5:58)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
(node:22840) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an 
async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:22840) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

操作系统是: win10

taro: 3.2.9, 全局和项目中的版本一致, 使用的是react来开发的

wuchangming · 2021-07-07T06:33:03Z

@SilentFlute , 更新到 3.2.12 以上的版本试试。3.2.9 在windows下应该是有 bug，见 NervJS/taro#9422

SilentFlute · 2021-07-07T07:17:01Z

@wuchangming 更新到了目前的最新版3.2.14, cli和项目中的都更新了, 但依旧报同样的错:

module.exports = {
  env: {
    NODE_ENV: '"development"'
  },
  defineConstants: {
  },
  mini: {
    optimizeMainPackage: {
      enable: true
    }
  },
  h5: {}
}

{
  "name": "myAppRedux",
  "version": "1.0.0",
  "private": true,
  "description": "taro redux",
  "templateInfo": {
    "name": "redux",
    "typescript": false,
    "css": "sass"
  },
  "scripts": {
    "build:weapp": "taro build --type weapp",
    "build:swan": "taro build --type swan",
    "build:alipay": "taro build --type alipay",
    "build:tt": "taro build --type tt",
    "build:h5": "taro build --type h5",
    "build:rn": "taro build --type rn",
    "build:qq": "taro build --type qq",
    "build:jd": "taro build --type jd",
    "build:quickapp": "taro build --type quickapp",
    "dev:weapp": "npm run build:weapp -- --watch",
    "dev:swan": "npm run build:swan -- --watch",
    "dev:alipay": "npm run build:alipay -- --watch",
    "dev:tt": "npm run build:tt -- --watch",
    "dev:h5": "npm run build:h5 -- --watch",
    "dev:rn": "npm run build:rn -- --watch",
    "dev:qq": "npm run build:qq -- --watch",
    "dev:jd": "npm run build:jd -- --watch",
    "dev:quickapp": "npm run build:quickapp -- --watch"
  },
  "browserslist": [
    "last 3 versions",
    "Android >= 4.1",
    "ios >= 8"
  ],
  "author": "",
  "license": "MIT",
  "dependencies": {
    "@babel/runtime": "^7.7.7",
    "@tarojs/components": "3.2.14",
    "@tarojs/react": "3.2.14",
    "@tarojs/runtime": "3.2.14",
    "@tarojs/taro": "3.2.14",
    "dva-core": "^2.0.4",
    "dva-loading": "^3.0.22",
    "dva-model-extend": "^0.1.2",
    "react": "^17.0.0",
    "react-dom": "^17.0.0",
    "react-redux": "^7.2.0",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",
    "taro-ui": "^3.0.0-alpha.10"
  },
  "devDependencies": {
    "@babel/core": "^7.8.0",
    "@tarojs/mini-runner": "3.2.14",
    "@tarojs/plugin-mock": "^0.0.7",
    "@tarojs/webpack-runner": "3.2.14",
    "@types/react": "^17.0.2",
    "@types/webpack-env": "^1.13.6",
    "babel-preset-taro": "3.2.14",
    "eslint": "^6.8.0",
    "eslint-config-taro": "3.2.14",
    "eslint-plugin-import": "^2.12.0",
    "eslint-plugin-react": "^7.8.2",
    "eslint-plugin-react-hooks": "^4.2.0",
    "stylelint": "9.3.0"
  }
}

SilentFlute · 2021-07-07T07:31:40Z

我更新了taro之后提交了代码, 和我一起用taro开发微信小程序的同事拉了代码, 更新了taro之后运行yarn dev:weapp也是报同样的错, 他的是mac...

wuchangming · 2021-07-07T08:49:13Z

我更新了taro之后提交了代码, 和我一起用taro开发微信小程序的同事拉了代码, 更新了taro之后运行yarn dev:weapp也是报同样的错, 他的是mac...

作者 @huangcj99 有空可以看看。估计是触发了什么bug

SilentFlute · 2021-07-07T09:31:39Z

@wuchangming 好的, 谢谢回复, 以及为何你上面贴出来的文档是:

https://docs.taro.zone/docs/config-detail#minioptimizemainpackage

而taro官网的文档是:

https://taro-docs.jd.com/taro/docs/README/index.html

为何域名不一样, 内容也不一样, 前者编译配置详情中有mini.optimizeMainPackage, 而后者没有

wuchangming · 2021-07-07T09:36:17Z

@wuchangming 好的, 谢谢回复, 以及为何你上面贴出来的文档是:

https://docs.taro.zone/docs/config-detail#minioptimizemainpackage

而taro官网的文档是:

https://taro-docs.jd.com/taro/docs/README/index.html

为何域名不一样, 内容也不一样, 前者编译配置详情中有mini.optimizeMainPackage, 而后者没有

第二个应该是没更新吧

SilentFlute · 2021-07-07T09:40:30Z

哦哦, 好的, 那第一个相当于是一个beta版本的文档是吗?

wuchangming · 2021-07-16T09:35:37Z

getCacheGroups
可以参考下这个回复 NervJS/taro#8135 (comment)

@SilentFlute

SilentFlute · 2021-07-20T08:39:32Z

这个问题目前我已经解决了, 现贴一下解决方法, 希望对遇到这个问题的人能起个借鉴参考的作用:

微信官方文档_分包加载中提到:

整个小程序所有分包大小不超过 20M

单个分包/主包大小不能超过 2M

开发过程中如果遇到包太大的情况, 需要做分包处理, 详情可参考taro文档_分包, mini.optimizeMainPackage, 微信官方文档_使用分包

首先需要明确的是app.config.js中pages字段配置的是主包, subpackages配置的才是分包, 单个分包/主包大小不能超过 2M, 那么可以使用一个首页做主包, 其他页面都各自是一个分包的情况, 处理方式如下:

├── src
│   └── pages
│       └── index
│           └── index
│   └── packageA
│       └── index
│   └── packageB
│       └── index
│   └── packageC
│       └── index
│   └── utils

以往传统目录结构都是所有页面在/src/pages下, 但这里需要分包则不能这么做
2. 修改配置文件/config/index.js:

mini: {
  //...
  optimizeMainPackage: {
    enable: true
  }
}

修改app.config.js文件:

export default {
  pages: [
    'pages/index/index'
  ],
  subpackages: [
    {
      root: "packageA",
      pages: [
        "index"
      ]
    },
    {
      root: "packageB",
      pages: [
        "index"
      ]
    },
    {
      root: "packageC",
      pages: [
        "index"
      ]
    }
  ],
  window: {
    backgroundTextStyle: 'light',
    navigationBarBackgroundColor: '#fff',
    navigationBarTitleText: 'WeChat',
    navigationBarTextStyle: 'black'
  }
}

这样的话就是/src/pages/index一个首页做主包, /src/packageA, /src/packageB, /src/packageC这3个页面各自是一个分包, 这4个页面(4个包)每个大小不超过2m, 总的加起来不超过20m, 这样就可以了, 同时需要注意各个页面中引用组件/资源或者路由跳转的路径问题, 不然可能导致无法正常引用组件或者资源的情况发生

PS: 这里的mini.optimizeMainPackage也可以不用配置, 这个配置的目的是优化主包的体积大小, 这里已经使用了分包了, 不配置问题也不大, 但推荐还是配置一下, 具体作用可查阅上方提到的文档

hauk0101 · 2022-09-29T07:36:41Z

SplitChunks 最低支持的版本是3.3.11，如果有需要从 Taro3.3.11 以下版本升级到此版本的同学，可以参考我的一些踩坑记录：https://juejin.cn/post/7148430666906992647

taro-bot2 bot added the enhancement New feature or request label Mar 2, 2021

taro-bot2 bot mentioned this issue Mar 6, 2021

项目周报 (2021 年 2 月 27 日 - 2021 年 3 月 6 日) NervJS/taro#8820

Closed

SilentFlute mentioned this issue Jul 20, 2021

feat(mini-runner/mini-split-chunks): （主包大小最优方案）添加小程序提取公共模块插件，主包没有引用的，且分包内引用的mod… NervJS/taro#8135

Merged

20 tasks

ZakaryCode transferred this issue from NervJS/taro Jun 15, 2023

ZakaryCode removed the enhancement New feature or request label Aug 3, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

taro主包超过2M #102

taro主包超过2M #102

xiaoice commented Mar 2, 2021 •

edited

icepy commented Mar 3, 2021

这个特性解决了什么问题？

这个 API 长什么样？

xiaoice commented Mar 3, 2021

unforesndprson commented Mar 3, 2021 •

edited

xiaoice commented Mar 5, 2021

xiaoice commented Mar 5, 2021

wuchangming commented Mar 18, 2021 •

edited

xiaoice commented Mar 24, 2021

wuchangming commented May 24, 2021 •

edited

SilentFlute commented Jul 7, 2021

wuchangming commented Jul 7, 2021

SilentFlute commented Jul 7, 2021

SilentFlute commented Jul 7, 2021

wuchangming commented Jul 7, 2021

SilentFlute commented Jul 7, 2021

wuchangming commented Jul 7, 2021

SilentFlute commented Jul 7, 2021

wuchangming commented Jul 16, 2021 •

edited

SilentFlute commented Jul 20, 2021

hauk0101 commented Sep 29, 2022

taro主包超过2M #102

taro主包超过2M #102

Comments

xiaoice commented Mar 2, 2021 • edited

这个特性解决了什么问题？

这个 API 长什么样？

icepy commented Mar 3, 2021

这个特性解决了什么问题？

这个 API 长什么样？

xiaoice commented Mar 3, 2021

unforesndprson commented Mar 3, 2021 • edited

xiaoice commented Mar 5, 2021

xiaoice commented Mar 5, 2021

wuchangming commented Mar 18, 2021 • edited

xiaoice commented Mar 24, 2021

wuchangming commented May 24, 2021 • edited

SilentFlute commented Jul 7, 2021

wuchangming commented Jul 7, 2021

SilentFlute commented Jul 7, 2021

SilentFlute commented Jul 7, 2021

wuchangming commented Jul 7, 2021

SilentFlute commented Jul 7, 2021

wuchangming commented Jul 7, 2021

SilentFlute commented Jul 7, 2021

wuchangming commented Jul 16, 2021 • edited

SilentFlute commented Jul 20, 2021

hauk0101 commented Sep 29, 2022

xiaoice commented Mar 2, 2021 •

edited

unforesndprson commented Mar 3, 2021 •

edited

wuchangming commented Mar 18, 2021 •

edited

wuchangming commented May 24, 2021 •

edited

wuchangming commented Jul 16, 2021 •

edited