@taro-minify-pack/plugin-async-pack 0.1.3-alpha.0 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +28 -10
- package/dist/utils.js +3 -2
- package/dist/utils.js.map +1 -1
- package/package.json +1 -1
- package/src/utils.ts +3 -2
package/README.md
CHANGED
|
@@ -129,8 +129,11 @@ const AsyncComponent = defineAsyncComponent(() => import('./async-component')
|
|
|
129
129
|
- 修改 `runtime.js` 输出，确保异步模块的`js`文件能通过`require.async`正确引入
|
|
130
130
|
|
|
131
131
|
2. **样式处理**：
|
|
132
|
-
-
|
|
133
|
-
-
|
|
132
|
+
- 默认会先把未开启异步样式的分包样式合并成 `${dynamicPackageNamePrefix}.wxss`
|
|
133
|
+
- 编译 `app.wxss` 时自动补上一条 `@import './${dynamicPackageNamePrefix}.wxss'`，让这部分样式继续跟随主包同步加载
|
|
134
|
+
- 当 `customDynamicPackages[].asyncStyle = true` 时，会在对应自定义分包下额外生成一个 `inject-style` 组件
|
|
135
|
+
- 这个组件会收集该分包目录下的所有 `.wxss` 文件，并生成多个 `@import './xxx.wxss'` 引用，让样式跟随分包一起下发
|
|
136
|
+
- 构建结束后会继续改写 `app.json` 和页面 `wxml`：把 `inject-style` 注册到 `usingComponents` / `componentPlaceholder`，再把组件节点追加到页面模板中，借此触发该分包样式的异步加载
|
|
134
137
|
|
|
135
138
|
3. **小程序配置修改**：
|
|
136
139
|
- 自动修改 `app.json`，添加异步分包配置
|
|
@@ -142,7 +145,6 @@ const AsyncComponent = defineAsyncComponent(() => import('./async-component')
|
|
|
142
145
|
3. **Babel 配置**：需要正确配置 Babel 的 `dynamic-import-node` 选项
|
|
143
146
|
4. **Webpack 版本**：仅支持 Webpack 5 编译器
|
|
144
147
|
5. **分包数量**：根据项目实际情况配置 `dynamicPackageCount`，过多的分包可能会影响性能
|
|
145
|
-
6. **版本要求**：插件版本`0.0.5-alpha.x`尝试实现样式文件异步加载受微信机制影响存在无法优化的「闪屏样式丢失」,故`0.0.5`及以后版本不支持样式文件异步加载。
|
|
146
148
|
|
|
147
149
|
## 🔧 配置选项
|
|
148
150
|
|
|
@@ -175,12 +177,12 @@ plugins: [
|
|
|
175
177
|
dynamicPackageCount: 2,
|
|
176
178
|
customDynamicPackages: [
|
|
177
179
|
{
|
|
178
|
-
name: '
|
|
179
|
-
test: /[\\/]
|
|
180
|
+
name: 'sync-style',
|
|
181
|
+
test: (module) => /src[\\/]pages[\\/]sync-style[\\/]/.test(module.identifier()),
|
|
180
182
|
},
|
|
181
183
|
{
|
|
182
|
-
name: '
|
|
183
|
-
test: (module) => /src[\\/]pages[\\/]
|
|
184
|
+
name: 'async-style',
|
|
185
|
+
test: (module) => /src[\\/]pages[\\/]async-style[\\/]/.test(module.identifier()),
|
|
184
186
|
asyncStyle: true
|
|
185
187
|
}
|
|
186
188
|
]
|
|
@@ -188,7 +190,7 @@ plugins: [
|
|
|
188
190
|
]
|
|
189
191
|
```
|
|
190
192
|
|
|
191
|
-
上述配置会额外生成 `dynamic-package-
|
|
193
|
+
上述配置会额外生成 `dynamic-package-sync-style` 和 `dynamic-package-async-style` 两个异步分包；其中 `async-style` 分包会同时产出 `inject-style` 组件，并在编译时自动追加到 `app.json` 与页面模板中。
|
|
192
194
|
|
|
193
195
|
## 🤝 常见问题
|
|
194
196
|
|
|
@@ -198,8 +200,24 @@ plugins: [
|
|
|
198
200
|
- 确认使用了 Webpack 5 编译器
|
|
199
201
|
- 确保代码中使用了 `import()` 动态导入语法
|
|
200
202
|
|
|
201
|
-
### 2.
|
|
202
|
-
-
|
|
203
|
+
### 2. 为什么样式文件没有异步？
|
|
204
|
+
- 先检查 `customDynamicPackages[].test` 是否真的命中了目标模块；如果没有命中，样式会走默认同步合并逻辑，而不会进入对应自定义异步分包
|
|
205
|
+
- 再检查该自定义分包的 `asyncStyle` 是否为 `true`；只有开启后才会额外生成 `inject-style` 组件，并触发异步样式注入
|
|
206
|
+
- `module.identifier()` 代表 webpack 给当前模块生成的唯一标识，通常会包含 loader 链、查询参数和源文件绝对路径，比单纯看文件名更适合排查 `test` 是否命中
|
|
207
|
+
- 排查时可以先在 `test` 回调里临时打印 `module.identifier()`，确认真实值后再收窄正则规则，例如只匹配其中稳定的源码路径片段：
|
|
208
|
+
|
|
209
|
+
```js
|
|
210
|
+
const customDynamicPackageConfig = {
|
|
211
|
+
name: 'async-style',
|
|
212
|
+
test: (module) => {
|
|
213
|
+
console.log(module.identifier())
|
|
214
|
+
return /src[\\/]pages[\\/]async-style[\\/]/.test(module.identifier())
|
|
215
|
+
},
|
|
216
|
+
asyncStyle: true
|
|
217
|
+
}
|
|
218
|
+
```
|
|
219
|
+
|
|
220
|
+
- 如果打印出来的内容带有 `css-loader`、`sass-loader`、`?taro` 之类前缀或查询参数，通常是正常现象，优先匹配其中稳定的业务目录路径即可
|
|
203
221
|
|
|
204
222
|
### 3. 配置后编译失败？
|
|
205
223
|
- 请检查配置选项是否正确
|
package/dist/utils.js
CHANGED
|
@@ -16,7 +16,7 @@ const generateKeyByOrder = (order) => {
|
|
|
16
16
|
exports.generateKeyByOrder = generateKeyByOrder;
|
|
17
17
|
const generateDefaultDynamicPackageName = (opt) => {
|
|
18
18
|
if (!(0, exports.isNumber)(opt.order) || opt.dynamicPackageCount <= 1)
|
|
19
|
-
return opt.dynamicPackageNamePrefix
|
|
19
|
+
return `${opt.dynamicPackageNamePrefix}-default`;
|
|
20
20
|
return `${opt.dynamicPackageNamePrefix}-${(0, exports.generateKeyByOrder)(opt.order)}`;
|
|
21
21
|
};
|
|
22
22
|
exports.generateDefaultDynamicPackageName = generateDefaultDynamicPackageName;
|
|
@@ -53,7 +53,8 @@ const isDynamicPackageAsset = (opt, assetName) => {
|
|
|
53
53
|
};
|
|
54
54
|
exports.isDynamicPackageAsset = isDynamicPackageAsset;
|
|
55
55
|
const isAsyncStyleDynamicPackageAsset = (opt, assetName) => {
|
|
56
|
-
const
|
|
56
|
+
const asyncStyleDynamicPackages = opt.customDynamicPackages.filter(item => item.asyncStyle);
|
|
57
|
+
const asyncStylDynamicPackageNames = asyncStyleDynamicPackages.map(item => (0, exports.generateCustomDynamicPackageName)(opt, item.name));
|
|
57
58
|
if (!asyncStylDynamicPackageNames.length)
|
|
58
59
|
return false;
|
|
59
60
|
return new RegExp(`^(${asyncStylDynamicPackageNames.join('|')})/`).test(assetName);
|
package/dist/utils.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":";;;AAGO,MAAM,aAAa,GAAG,CAAC,IAAY,EAAE,GAAW,EAAE,EAAE;IACzD,IAAI,CAAC,IAAI,IAAI,GAAG,IAAI,CAAC;QAAE,OAAO,CAAC,CAAA;IAC/B,OAAO,MAAM,CAAC,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAA;AAClD,CAAC,CAAA;AAHY,QAAA,aAAa,iBAGzB;AAEM,MAAM,kBAAkB,GAAG,CAAC,KAAa,EAAE,EAAE;IAClD,MAAM,QAAQ,GAAG,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,CAAA;IAClC,MAAM,WAAW,GAAG,MAAM,CAAC,YAAY,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC,CAAC,CAAA;IAC1E,MAAM,YAAY,GAAG,MAAM,CAAC,YAAY,CAAC,QAAQ,GAAG,KAAK,GAAG,EAAE,CAAC,CAAA;IAC/D,OAAO,GAAG,WAAW,GAAG,YAAY,EAAE,CAAA;AACxC,CAAC,CAAA;AALY,QAAA,kBAAkB,sBAK9B;AAEM,MAAM,iCAAiC,GAAG,CAAC,GAAuC,EAAE,EAAE;IAC3F,IAAI,CAAC,IAAA,gBAAQ,EAAC,GAAG,CAAC,KAAK,CAAC,IAAI,GAAG,CAAC,mBAAmB,IAAI,CAAC;QAAE,OAAO,GAAG,CAAC,wBAAwB,CAAA;
|
|
1
|
+
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
package/src/utils.ts
CHANGED
|
@@ -14,7 +14,7 @@ export const generateKeyByOrder = (order: number) => {
|
|
|
14
14
|
}
|
|
15
15
|
|
|
16
16
|
export const generateDefaultDynamicPackageName = (opt: AsyncPackOpts & { order?: number }) => {
|
|
17
|
-
if (!isNumber(opt.order) || opt.dynamicPackageCount <= 1) return opt.dynamicPackageNamePrefix
|
|
17
|
+
if (!isNumber(opt.order) || opt.dynamicPackageCount <= 1) return `${opt.dynamicPackageNamePrefix}-default`
|
|
18
18
|
return `${opt.dynamicPackageNamePrefix}-${generateKeyByOrder(opt.order!)}`
|
|
19
19
|
}
|
|
20
20
|
|
|
@@ -49,7 +49,8 @@ export const isDynamicPackageAsset = (opt: AsyncPackOpts, assetName: string) =>
|
|
|
49
49
|
}
|
|
50
50
|
|
|
51
51
|
export const isAsyncStyleDynamicPackageAsset = (opt: AsyncPackOpts, assetName: string) => {
|
|
52
|
-
const
|
|
52
|
+
const asyncStyleDynamicPackages = opt.customDynamicPackages.filter(item => item.asyncStyle)
|
|
53
|
+
const asyncStylDynamicPackageNames = asyncStyleDynamicPackages.map(item => generateCustomDynamicPackageName(opt, item.name))
|
|
53
54
|
if (!asyncStylDynamicPackageNames.length) return false
|
|
54
55
|
return new RegExp(`^(${asyncStylDynamicPackageNames.join('|')})/`).test(assetName)
|
|
55
56
|
}
|