@taro-minify-pack/plugin-bundle-analyzer 0.0.5-alpha.5 → 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 +139 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
# @taro-minify-pack/plugin-bundle-analyzer
|
|
2
|
+
|
|
3
|
+
> 集成 webpack-bundle-analyzer 到 Taro 项目，可视化分析打包结果，帮助优化代码体积和依赖关系。
|
|
4
|
+
|
|
5
|
+
该插件将 webpack-bundle-analyzer 无缝集成到 Taro 项目的构建流程中，提供直观的打包结果可视化分析，帮助开发者识别和优化大型依赖、重复代码和不必要的资源，从而减少项目体积，提升应用性能。
|
|
6
|
+
|
|
7
|
+
## ✨ 功能特性
|
|
8
|
+
|
|
9
|
+
* 📊 直观的打包结果可视化分析
|
|
10
|
+
* 📦 展示各模块、依赖的大小和占比
|
|
11
|
+
* 🔍 支持放大缩小、拖拽、搜索等交互功能
|
|
12
|
+
* 🚀 自动在浏览器中打开分析报告
|
|
13
|
+
* ⚙️ 支持自定义配置（端口、主机、是否自动打开等）
|
|
14
|
+
* 🔧 与 Taro 项目无缝集成，无需额外配置
|
|
15
|
+
|
|
16
|
+
## 📦 安装
|
|
17
|
+
|
|
18
|
+
### npm
|
|
19
|
+
|
|
20
|
+
```sh
|
|
21
|
+
npm install @taro-minify-pack/plugin-bundle-analyzer
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
### yarn
|
|
25
|
+
|
|
26
|
+
```sh
|
|
27
|
+
yarn add @taro-minify-pack/plugin-bundle-analyzer
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
### pnpm
|
|
31
|
+
|
|
32
|
+
```sh
|
|
33
|
+
pnpm add @taro-minify-pack/plugin-bundle-analyzer
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
## 🔧 使用配置
|
|
37
|
+
|
|
38
|
+
### 插件参数说明
|
|
39
|
+
|
|
40
|
+
| 参数名 | 是否必填 | 类型 | 默认值 | 说明 |
|
|
41
|
+
|----------------|------|--------------------|---------------|-------------------------|
|
|
42
|
+
| `analyzerHost` | 否 | `string` | `'127.0.0.1'` | 服务器主机地址 |
|
|
43
|
+
| `analyzerPort` | 否 | `number \| 'auto'` | `8888` | 服务器端口，'auto' 表示自动选择可用端口 |
|
|
44
|
+
| `openAnalyzer` | 否 | `boolean` | `true` | 是否自动在浏览器中打开报告 |
|
|
45
|
+
|
|
46
|
+
### 示例配置
|
|
47
|
+
|
|
48
|
+
```js
|
|
49
|
+
// config/index.js
|
|
50
|
+
module.exports = {
|
|
51
|
+
plugins: [
|
|
52
|
+
['@taro-minify-pack/plugin-bundle-analyzer', {
|
|
53
|
+
// 可选配置
|
|
54
|
+
analyzerHost: '127.0.0.1', // 服务器主机地址
|
|
55
|
+
analyzerPort: 8888, // 服务器端口
|
|
56
|
+
openAnalyzer: true, // 是否自动在浏览器中打开报告
|
|
57
|
+
}],
|
|
58
|
+
],
|
|
59
|
+
}
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
```ts
|
|
63
|
+
// config/index.ts
|
|
64
|
+
import { defineConfig } from '@tarojs/cli'
|
|
65
|
+
import { BundleAnalyzerOpt } from '@taro-minify-pack/plugin-bundle-analyzer'
|
|
66
|
+
|
|
67
|
+
export default defineConfig({
|
|
68
|
+
plugins: [
|
|
69
|
+
['@taro-minify-pack/plugin-bundle-analyzer', {
|
|
70
|
+
// 可选配置
|
|
71
|
+
analyzerHost: '127.0.0.1', // 服务器主机地址
|
|
72
|
+
analyzerPort: 8888, // 服务器端口
|
|
73
|
+
openAnalyzer: true, // 是否自动在浏览器中打开报告
|
|
74
|
+
} as BundleAnalyzerOpt],
|
|
75
|
+
],
|
|
76
|
+
})
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
### 基本用法
|
|
80
|
+
|
|
81
|
+
在配置文件中添加插件后，运行 Taro 构建命令：
|
|
82
|
+
|
|
83
|
+
```sh
|
|
84
|
+
taro build --type weapp # 构建微信小程序
|
|
85
|
+
# 或
|
|
86
|
+
taro build --type h5 # 构建 H5
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
构建完成后，插件会自动启动分析服务器并在浏览器中打开可视化报告。
|
|
90
|
+
|
|
91
|
+
## 🧠 工作原理
|
|
92
|
+
|
|
93
|
+
1. **插件注册**：Taro 加载插件并初始化
|
|
94
|
+
2. **修改 webpack 配置**：在 webpack 配置中添加 BundleAnalyzerPlugin
|
|
95
|
+
3. **默认配置**：设置默认的分析选项（defaultSizes: 'parsed', analyzerMode: 'server'）
|
|
96
|
+
4. **构建触发**：当运行 Taro 构建命令时，webpack 会执行分析插件
|
|
97
|
+
5. **生成报告**：构建完成后，生成打包结果的可视化分析报告
|
|
98
|
+
6. **启动服务器**：启动本地服务器并在浏览器中打开报告
|
|
99
|
+
|
|
100
|
+
### 技术依赖
|
|
101
|
+
|
|
102
|
+
- **Taro Service**：Taro 插件系统
|
|
103
|
+
- **webpack-bundle-analyzer**：提供打包结果的可视化分析功能
|
|
104
|
+
|
|
105
|
+
## 📌 适用场景
|
|
106
|
+
|
|
107
|
+
* 需要分析和优化项目打包体积的 Taro 项目
|
|
108
|
+
* 想了解项目依赖关系和模块大小分布的开发者
|
|
109
|
+
* 需要识别大型依赖和重复代码的项目
|
|
110
|
+
* 对应用性能有较高要求的项目
|
|
111
|
+
|
|
112
|
+
## ⚠️ 注意事项
|
|
113
|
+
|
|
114
|
+
1. **开发依赖**：该插件是开发依赖，建议只在开发环境中使用
|
|
115
|
+
2. **构建时间**：启用分析会增加构建时间，生产环境建议关闭
|
|
116
|
+
3. **端口冲突**：如果默认端口（8888）被占用，可以通过 analyzerPort 配置修改
|
|
117
|
+
4. **浏览器支持**：确保使用现代浏览器打开分析报告，以获得最佳体验
|
|
118
|
+
|
|
119
|
+
## 🔍 功能展示
|
|
120
|
+
|
|
121
|
+
### 分析报告界面
|
|
122
|
+
|
|
123
|
+
构建完成后，您将在浏览器中看到类似以下的分析报告：
|
|
124
|
+
|
|
125
|
+
1. **模块树**：展示项目中所有模块的依赖关系和大小
|
|
126
|
+
2. **大小分布**：以可视化方式展示各模块的大小占比
|
|
127
|
+
3. **搜索功能**：可以搜索特定模块
|
|
128
|
+
4. **缩放功能**：支持放大缩小查看细节
|
|
129
|
+
5. **导出功能**：可以导出分析结果为 JSON 文件
|
|
130
|
+
|
|
131
|
+
## 📄 许可证
|
|
132
|
+
|
|
133
|
+
MIT License
|
|
134
|
+
|
|
135
|
+
## 🤝 贡献
|
|
136
|
+
|
|
137
|
+
欢迎提交 Issues 和 Pull Requests！
|
|
138
|
+
|
|
139
|
+
> 该插件是 @taro-minify-pack 系列插件的一部分，致力于提供完整的 Taro 项目优化解决方案。
|