@taro-minify-pack/plugin-async-pack 0.0.5-alpha.4 → 0.0.5-alpha.6
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 +120 -13
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,24 +1,36 @@
|
|
|
1
|
-
|
|
2
|
-
> 异步加载主包代码, 优化主包体积（包含异步模块`js`与样式文件）
|
|
1
|
+
# @taro-minify-pack/plugin-async-pack
|
|
3
2
|
|
|
4
|
-
|
|
3
|
+
异步加载主包代码，优化主包体积（包含异步模块`js`与样式文件）
|
|
5
4
|
|
|
6
|
-
|
|
5
|
+
## ✨ 功能特性
|
|
6
|
+
|
|
7
|
+
- **主包体积优化**：将动态导入的模块自动拆分到异步分包，有效减少主包体积
|
|
8
|
+
- **样式文件异步加载**：支持异步模块的样式文件同步异步加载
|
|
9
|
+
- **自动转换 React.lazy**：无需手动修改代码，自动将 React.lazy 转换为增强版实现
|
|
10
|
+
- **灵活配置**：可自定义异步分包名称前缀和数量
|
|
11
|
+
- **自动化处理**：自动修改小程序配置文件和页面WXML，无需手动操作
|
|
12
|
+
- **性能提升**：减少小程序启动时间，提升用户体验
|
|
13
|
+
|
|
14
|
+
## 📦 安装
|
|
15
|
+
|
|
16
|
+
### npm 安装
|
|
7
17
|
```bash
|
|
8
18
|
npm install @taro-minify-pack/plugin-async-pack @taro-minify-pack/react-lazy-enhanced
|
|
9
19
|
```
|
|
10
|
-
|
|
20
|
+
|
|
21
|
+
### yarn 安装
|
|
11
22
|
```bash
|
|
12
23
|
yarn add @taro-minify-pack/plugin-async-pack @taro-minify-pack/react-lazy-enhanced
|
|
13
24
|
```
|
|
14
25
|
|
|
15
|
-
|
|
26
|
+
### pnpm 安装
|
|
16
27
|
```bash
|
|
17
28
|
pnpm add @taro-minify-pack/plugin-async-pack @taro-minify-pack/react-lazy-enhanced
|
|
18
29
|
```
|
|
19
|
-
### 配置
|
|
20
30
|
|
|
21
|
-
|
|
31
|
+
## ⚙️ 配置
|
|
32
|
+
|
|
33
|
+
### `babel`配置
|
|
22
34
|
```ts
|
|
23
35
|
// babel-preset-taro 更多选项和默认值：
|
|
24
36
|
// https://docs.taro.zone/docs/next/babel-config
|
|
@@ -34,29 +46,124 @@ module.exports = {
|
|
|
34
46
|
]
|
|
35
47
|
}
|
|
36
48
|
```
|
|
37
|
-
|
|
49
|
+
|
|
50
|
+
### `Taro` 配置
|
|
38
51
|
```js
|
|
39
52
|
// config/index.js
|
|
40
53
|
module.exports = {
|
|
41
54
|
compiler: {
|
|
42
55
|
type: 'webpack5',
|
|
43
56
|
prebundle: {
|
|
44
|
-
//
|
|
57
|
+
// 关闭预打包,这里和分包异步编译有冲突
|
|
45
58
|
enable: false,
|
|
46
59
|
}
|
|
47
60
|
},
|
|
48
61
|
plugins: [
|
|
49
62
|
['@taro-minify-pack/plugin-async-pack', {
|
|
50
|
-
//
|
|
63
|
+
// 异步分包名前缀，默认为 'dynamic-common'
|
|
51
64
|
dynamicPackageNamePrefix: 'dynamic-common',
|
|
52
|
-
//
|
|
65
|
+
// 异步分包数量，默认为 1
|
|
53
66
|
dynamicPackageCount: 2
|
|
54
67
|
}],
|
|
55
68
|
],
|
|
56
69
|
};
|
|
57
70
|
```
|
|
58
71
|
|
|
59
|
-
|
|
72
|
+
## 🚀 使用
|
|
73
|
+
|
|
74
|
+
### 基本使用
|
|
60
75
|
```ts
|
|
76
|
+
// 动态导入模块
|
|
61
77
|
const module = await import('./dynamic-module')
|
|
62
78
|
```
|
|
79
|
+
|
|
80
|
+
### React 组件懒加载
|
|
81
|
+
```tsx
|
|
82
|
+
// 插件会自动将 React.lazy 转换为使用 @taro-minify-pack/react-lazy-enhanced 的实现
|
|
83
|
+
import { lazy, Suspense } from 'react'
|
|
84
|
+
|
|
85
|
+
const DynamicComponent = lazy(() => import('./DynamicComponent'))
|
|
86
|
+
|
|
87
|
+
function App() {
|
|
88
|
+
return (
|
|
89
|
+
<Suspense fallback={<div>Loading...</div>}>
|
|
90
|
+
<DynamicComponent />
|
|
91
|
+
</Suspense>
|
|
92
|
+
)
|
|
93
|
+
}
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
## 📝 工作原理
|
|
97
|
+
|
|
98
|
+
1. **Webpack 配置修改**：
|
|
99
|
+
- 覆盖 `splitChunks` 规则，使`common`与`vendors`只处理同步模块
|
|
100
|
+
- 配置 `chunkFilename` 生成规则，确保异步模块正确输出到指定分包
|
|
101
|
+
- 修改 `miniCssExtractPlugin` 配置，确保异步模块的样式文件也能正确拆分到指定分包
|
|
102
|
+
|
|
103
|
+
2. **Babel 转换**：
|
|
104
|
+
- 自动将所有 `React.lazy` 调用转换为使用 `@taro-minify-pack/react-lazy-enhanced` 的实现
|
|
105
|
+
- 无需手动修改代码即可获得增强功能
|
|
106
|
+
|
|
107
|
+
3. **样式处理**：
|
|
108
|
+
- 为每个异步分包生成样式组件
|
|
109
|
+
- 自动收集该分包下的所有样式文件并通过 `@import` 引入
|
|
110
|
+
- 确保异步模块的样式在组件加载时同步加载
|
|
111
|
+
|
|
112
|
+
4. **小程序配置修改**：
|
|
113
|
+
- 自动修改 `app.json`，添加异步分包配置
|
|
114
|
+
- 添加异步组件到全局 `usingComponents`
|
|
115
|
+
- 设置 `componentPlaceholder` 以优化渲染性能
|
|
116
|
+
- 更新页面 `WXML` 文件，在每个页面中自动添加样式组件引用
|
|
117
|
+
|
|
118
|
+
## ⚠️ 注意事项
|
|
119
|
+
|
|
120
|
+
1. **仅支持微信小程序**：当前插件仅适用于微信小程序环境
|
|
121
|
+
2. **关闭预打包**：必须关闭 Taro 的预打包功能，否则可能与异步分包功能冲突
|
|
122
|
+
3. **Babel 配置**：需要正确配置 Babel 的 `dynamic-import-node` 选项
|
|
123
|
+
4. **Webpack 版本**：仅支持 Webpack 5 编译器
|
|
124
|
+
5. **自动转换**：插件会自动转换所有 `React.lazy` 调用，无需手动使用 `@taro-minify-pack/react-lazy-enhanced` 包中的懒加载函数
|
|
125
|
+
6. **分包数量**：根据项目实际情况配置 `dynamicPackageCount`，过多的分包可能会影响性能
|
|
126
|
+
|
|
127
|
+
## 🔧 配置选项
|
|
128
|
+
|
|
129
|
+
| 选项名 | 类型 | 默认值 | 描述 |
|
|
130
|
+
|----------------------------|----------|--------------------|----------|
|
|
131
|
+
| `dynamicPackageNamePrefix` | `string` | `'dynamic-common'` | 异步分包名称前缀 |
|
|
132
|
+
| `dynamicPackageCount` | `number` | `1` | 异步分包数量 |
|
|
133
|
+
|
|
134
|
+
## 🤝 常见问题
|
|
135
|
+
|
|
136
|
+
### 1. 异步模块没有被拆分到分包？
|
|
137
|
+
- 请检查是否正确配置了 `dynamic-import-node` 选项
|
|
138
|
+
- 确保已关闭 Taro 的预打包功能
|
|
139
|
+
- 确认使用了 Webpack 5 编译器
|
|
140
|
+
- 确保代码中使用了 `import()` 动态导入语法
|
|
141
|
+
|
|
142
|
+
### 2. 异步组件的样式没有加载？
|
|
143
|
+
- 请确保已正确安装 `@taro-minify-pack/react-lazy-enhanced` 包
|
|
144
|
+
- 检查是否有编译错误或警告信息
|
|
145
|
+
|
|
146
|
+
### 3. 配置后编译失败？
|
|
147
|
+
- 请检查配置选项是否正确
|
|
148
|
+
- 确认 Taro 版本与插件版本兼容
|
|
149
|
+
- 查看编译日志，排查具体错误原因
|
|
150
|
+
|
|
151
|
+
### 4. 页面加载时出现白屏？
|
|
152
|
+
- 请检查是否正确使用了 `Suspense` 组件包裹异步组件
|
|
153
|
+
- 确保异步组件的导入路径正确
|
|
154
|
+
- 检查网络请求是否正常
|
|
155
|
+
|
|
156
|
+
### 5. 分包数量配置后没有生效？
|
|
157
|
+
- 请确保 `dynamicPackageCount` 配置的值大于0
|
|
158
|
+
- 检查是否有足够的动态导入模块来拆分到多个分包
|
|
159
|
+
|
|
160
|
+
## 📄 许可证
|
|
161
|
+
|
|
162
|
+
MIT License
|
|
163
|
+
|
|
164
|
+
## 🤝 贡献
|
|
165
|
+
|
|
166
|
+
欢迎提交 Issue 和 Pull Request！
|
|
167
|
+
|
|
168
|
+
> 该插件是 @taro-minify-pack 系列插件的一部分，致力于提供完整的 Taro 项目优化解决方案。
|
|
169
|
+
|