tps

taro-plugin-subpackage-optimize

Taro 小程序分包打包优化

Showing:

Popularity

Downloads/wk

3

GitHub Stars

10

Maintenance

Last Commit

4mos ago

Contributors

0

Package

Dependencies

0

Size (min+gzip)

1.8KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

taro-plugin-subpackage-optimize

Taro 3.x 小程序端分包优化

背景

默认情况下,任意一个模块只要被引用两次以上都会被提取到主包中。比如:

subPackages
  package-1    # 分包根目录
    components
      share
    pages
      foo
      bar

假设 foobar 都引用了 share,那么 share 默认会被提取到主包的 common.js 中, 尽管它只在分包中用到。

这无疑给寸土寸金的主包空间造成较大的压力。


理想情况下,只在分包中引用到的模块应该放在分包中, 没有必要放在主包:

node_modules
  some-npm-package
src
  app.tsx
  pages
    # ...
  components
    button.tsx
  subPackages
    # ...
    package-1    # 分包根目录
      components
        share.tsx
      pages
        foo.tsx
        bar.tsx

如果 some-npm-packagecomponents/button.tsx、 以及 package-1 下的所有模块,只在 package-1下的模块引用,那么这些依赖模块就应该放在 package-1 分包根目录下。


taro-plugin-subpackage-optimize 就是做这个工作。开启 taro-plugin-subpackage-optimize 输出结果如下:

src
  app.js
  app.json
  pages
    # ...
  subPackages
    # ...
    package-1    # 分包根目录
      __subpackage_shared__.js
      pages
        foo.js
        foo.wxml
        foo.json
        bar.js
        bar.wxml
        bar.json

Usage

$ yarn add taro-plugin-subpackage-optimize -D # npm i taro-plugin-subpackage-optimize  --save-dev

配置:

// config/index.js
const config = {
  // ...
  plugins: ['taro-plugin-subpackage-optimize'],
  // ...
}

支持的配置项:

配置项默认值
enableInDevfalse是否在 development 环境开启, 默认只在 production 环境开启
priority20分包 cacheGroup 的优先级,默认是 20,即高于 Taro 默认的 vendor 和 common

// config/index.js
const config = {
  // ...
  plugins: [
    [
      'taro-plugin-subpackage-optimize',
      {
        enableInDev: true,
      },
    ],
  ],
  // ...
}

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100