@taro-minify-pack/plugin-async-pack 0.0.1 → 0.0.2
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 +64 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
## @taro-minify-pack/plugin-async-pack
|
|
2
|
+
> 异步加载主包代码, 优化主包体积
|
|
3
|
+
>
|
|
4
|
+
> 注：异步模块样式文件无法异步加载，已默认在主包样式文件中引入
|
|
5
|
+
|
|
6
|
+
### 安装
|
|
7
|
+
|
|
8
|
+
#### npm 安装
|
|
9
|
+
```bash
|
|
10
|
+
npm install @taro-minify-pack/plugin-async-pack
|
|
11
|
+
```
|
|
12
|
+
#### yarn 安装
|
|
13
|
+
```bash
|
|
14
|
+
yarn add @taro-minify-pack/plugin-async-pack
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
#### pnpm 安装
|
|
18
|
+
```bash
|
|
19
|
+
pnpm add @taro-minify-pack/plugin-async-pack
|
|
20
|
+
```
|
|
21
|
+
### 配置
|
|
22
|
+
|
|
23
|
+
#### `babel`配置
|
|
24
|
+
```ts
|
|
25
|
+
// babel-preset-taro 更多选项和默认值：
|
|
26
|
+
// https://docs.taro.zone/docs/next/babel-config
|
|
27
|
+
module.exports = {
|
|
28
|
+
presets: [
|
|
29
|
+
['taro', {
|
|
30
|
+
framework: 'react',
|
|
31
|
+
ts: true,
|
|
32
|
+
compiler: 'webpack5',
|
|
33
|
+
// 在原有基础上添加这个配置即可
|
|
34
|
+
'dynamic-import-node': process.env.TARO_ENV !== 'weapp',
|
|
35
|
+
}]
|
|
36
|
+
]
|
|
37
|
+
}
|
|
38
|
+
```
|
|
39
|
+
#### `Taro` 配置
|
|
40
|
+
```js
|
|
41
|
+
// config/index.js
|
|
42
|
+
module.exports = {
|
|
43
|
+
compiler: {
|
|
44
|
+
type: 'webpack5',
|
|
45
|
+
prebundle: {
|
|
46
|
+
// 关闭预打包,这里和分包异步编译有冲突，当然如果只是 production 环境用异步分包的话就无所谓了
|
|
47
|
+
enable: false,
|
|
48
|
+
}
|
|
49
|
+
},
|
|
50
|
+
plugins: [
|
|
51
|
+
['@taro-minify-pack/plugin-async-pack', {
|
|
52
|
+
// js 异步分包名
|
|
53
|
+
dynamicModuleJsDir: 'dynamic-common',
|
|
54
|
+
// 异步模块样式文件名
|
|
55
|
+
dynamicModuleStyleFile: 'dynamic-common'
|
|
56
|
+
}],
|
|
57
|
+
],
|
|
58
|
+
};
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
### 使用
|
|
62
|
+
```ts
|
|
63
|
+
const module = await import('./dynamic-module')
|
|
64
|
+
```
|