taro主包超过2M - Githubissues

xiaoice commented 3 years ago

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

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

这个 API 长什么样？

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

icepy commented 3 years ago

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

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

这个 API 长什么样？

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

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

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

xiaoice commented 3 years ago

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

unforesndprson commented 3 years ago

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

xiaoice commented 3 years ago

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

xiaoice commented 3 years ago

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

wuchangming commented 3 years ago

@xiaoice

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

我们生产用的这个方案：https://github.com/NervJS/taro/pull/8135 ，但这个 PR 还没合，可以参考下。

xiaoice commented 3 years ago

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

wuchangming commented 3 years ago

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

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

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

SilentFlute commented 3 years ago

@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 commented 3 years ago

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

SilentFlute commented 3 years ago

@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 commented 3 years ago

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

wuchangming commented 3 years ago

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

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

SilentFlute commented 3 years ago

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

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

而taro官网的文档是:

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

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

wuchangming commented 3 years ago

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

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

而taro官网的文档是:

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

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

第二个应该是没更新吧

SilentFlute commented 3 years ago

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

wuchangming commented 3 years ago

getCacheGroups 可以参考下这个回复 https://github.com/NervJS/taro/pull/8135#issuecomment-881256057

@SilentFlute

SilentFlute commented 3 years ago

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

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

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

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

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

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

将项目目录结构稍作修改:

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

以往传统目录结构都是所有页面在/src/pages下, 但这里需要分包则不能这么做

修改配置文件/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 commented 2 years ago

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

NervJS / taro-docs

taro主包超过2M #102

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

这个 API 长什么样？

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

这个 API 长什么样？