前言
大家好，这里是《前端毕业班》，前端开发者的自救互助小组。在 AI 与不确定性并存的时代，我们一起看清焦虑，聊技术、聊趋势，也聊前端还能走多远，走去哪。
郑重承诺以下内容不由 AI 生成
背景
微信小程序支持分包异步化 跨分包自定义组件引用，但是，很多业务项目往往都比较复杂，组件使用情况也不容易看清，开发中很容易遇到这些问题：
- 无法快速获悉某个组件到底被哪些页面使用
- 不清楚一个组件在项目里出现了多少次
- 做分包优化时，不知道组件放在主包还是分包更合适
于是，我写了一个插件 webpack-plugin-component-insight 来简化这一过程。
如果你的
uni-app(x)项目是vue3项目，可以参考 这篇文章
特性
- 开箱即用，配置简单
- 统计组件的使用次数和调用情况
- 结合主包和分包关系输出组件划分建议
- 支持生成 markdown 报告，方便查看更加详细的信息
- 支持 hx 项目和 cli 项目
- 支持使用 webpack 构建的 uni-app 项目 (vue2)
使用指南
安装
npm install @uni_toolkit/webpack-plugin-component-insight -D
# 或
pnpm add @uni_toolkit/webpack-plugin-component-insight -D
# 或
yarn add @uni_toolkit/webpack-plugin-component-insight -D
配置插件
在 vue.config.js 中使用：
const ComponentInsightPlugin =
require("@uni_toolkit/webpack-plugin-component-insight").default;
module.exports = {
configureWebpack: {
plugins: [new ComponentInsightPlugin()],
},
};
Tips
插件默认不会生成文件，而是在控制台直接输出分析结果。
如果需要生成 markdown 报告，可以这样配置：
new ComponentInsightPlugin({
reportMarkdownPath: "logs/component-insight-report.md",
});
如果只想生成 markdown，不输出控制台日志，可以这样配置：
new ComponentInsightPlugin({
logToConsole: false,
reportMarkdownPath: "logs/component-insight-report.md",
});
完整配置项
interface WebpackPluginComponentInsightOptions {
reportMarkdownPath?: string;
logToConsole?: boolean;
exclude?: ReadonlyArray<string | RegExp> | string | RegExp | null;
include?: ReadonlyArray<string | RegExp> | string | RegExp | null;
}
| 选项 | 说明 |
|---|---|
| reportMarkdownPath | 自定义 Markdown 报告输出路径，不传则不生成 Markdown |
| logToConsole | 是否输出控制台日志，默认开启 |
| exclude | 指定过滤的文件，默认过滤 node_modules 和 uni_modules |
| include | 指定包含的文件，默认为空 |
