@taro-minify-pack/plugin-async-pack 0.0.1-alpha.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/dist/index.js +4 -11
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/index.ts +5 -6
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
|
+
```
|
package/dist/index.js
CHANGED
|
@@ -1,15 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
3
|
const webpack_sources_1 = require("webpack-sources");
|
|
7
4
|
const transform_webpack_runtime_1 = require("./transform-webpack-runtime");
|
|
8
5
|
const transform_before_compression_plugin_1 = require("./transform-before-compression-plugin");
|
|
9
6
|
const merge_output_1 = require("./merge-output");
|
|
10
7
|
const transform_app_stylesheet_1 = require("./transform-app-stylesheet");
|
|
11
|
-
const fs_1 = __importDefault(require("fs"));
|
|
12
|
-
const path_1 = __importDefault(require("path"));
|
|
13
8
|
const dynamicPackOptsDefaultOpt = {
|
|
14
9
|
dynamicModuleJsDir: 'dynamic-common',
|
|
15
10
|
dynamicModuleStyleFile: 'dynamic-common'
|
|
@@ -63,12 +58,10 @@ exports.default = (ctx, pluginOpts) => {
|
|
|
63
58
|
return;
|
|
64
59
|
const curAppJSONContent = JSON.parse(curAppJSON.source());
|
|
65
60
|
const dynamicPackagesConfig = { root: finalOpts.dynamicModuleJsDir, pages: [] };
|
|
66
|
-
const hasDynamicModule = (() => {
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
})();
|
|
70
|
-
const { resolveAlias = {}, subpackages = [] } = curAppJSONContent;
|
|
71
|
-
const newAppJSONContent = Object.assign(Object.assign({}, curAppJSONContent), { subpackages: hasDynamicModule ? [...subpackages, dynamicPackagesConfig] : subpackages, resolveAlias: Object.assign(Object.assign({}, resolveAlias), { [`${finalOpts.dynamicModuleJsDir}/*`]: `/${finalOpts.dynamicModuleJsDir}/*` }) });
|
|
61
|
+
const hasDynamicModule = Object.keys(assets).some((key) => key.startsWith(`${finalOpts.dynamicModuleJsDir}/`));
|
|
62
|
+
const { resolveAlias = {}, subPackages, subpackages } = curAppJSONContent;
|
|
63
|
+
const finalSubPackages = subPackages || subpackages || [];
|
|
64
|
+
const newAppJSONContent = Object.assign(Object.assign({}, curAppJSONContent), { subPackages: hasDynamicModule ? [...finalSubPackages, dynamicPackagesConfig] : finalSubPackages, resolveAlias: Object.assign(Object.assign({}, resolveAlias), { [`${finalOpts.dynamicModuleJsDir}/*`]: `/${finalOpts.dynamicModuleJsDir}/*` }) });
|
|
72
65
|
assets['app.json'] = new webpack_sources_1.RawSource(JSON.stringify(newAppJSONContent, null, 2));
|
|
73
66
|
});
|
|
74
67
|
};
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
package/src/index.ts
CHANGED
|
@@ -86,16 +86,15 @@ export default (ctx: IPluginContext, pluginOpts: AsyncPackOpts) => {
|
|
|
86
86
|
|
|
87
87
|
const dynamicPackagesConfig = { root: finalOpts.dynamicModuleJsDir, pages: [] }
|
|
88
88
|
|
|
89
|
-
const hasDynamicModule = (() => {
|
|
90
|
-
const isDynamicModuleDirExist = fs.existsSync(path.join(ctx.paths.outputPath, finalOpts.dynamicModuleJsDir))
|
|
91
|
-
return isDynamicModuleDirExist && fs.readdirSync(path.join(ctx.paths.outputPath, finalOpts.dynamicModuleJsDir)).length > 0
|
|
92
|
-
})()
|
|
89
|
+
const hasDynamicModule = Object.keys(assets).some((key) => key.startsWith(`${finalOpts.dynamicModuleJsDir}/`))
|
|
93
90
|
|
|
94
|
-
const { resolveAlias = {}, subpackages
|
|
91
|
+
const { resolveAlias = {}, subPackages, subpackages } = curAppJSONContent
|
|
92
|
+
|
|
93
|
+
const finalSubPackages = subPackages || subpackages || []
|
|
95
94
|
|
|
96
95
|
const newAppJSONContent = {
|
|
97
96
|
...curAppJSONContent,
|
|
98
|
-
|
|
97
|
+
subPackages: hasDynamicModule ? [...finalSubPackages, dynamicPackagesConfig] : finalSubPackages,
|
|
99
98
|
resolveAlias: {
|
|
100
99
|
...resolveAlias,
|
|
101
100
|
[`${finalOpts.dynamicModuleJsDir}/*`]: `/${finalOpts.dynamicModuleJsDir}/*`
|