@taro-minify-pack/plugin-async-pack 0.1.3-alpha.0 → 0.1.3-alpha.1
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 +10 -8
- package/package.json +1 -1
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.resource || ''),
|
|
180
182
|
},
|
|
181
183
|
{
|
|
182
|
-
name: '
|
|
183
|
-
test: (module) => /src[\\/]pages[\\/]
|
|
184
|
+
name: 'async-style',
|
|
185
|
+
test: (module) => /src[\\/]pages[\\/]async-style[\\/]/.test(module.resource || ''),
|
|
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
|
|