背景

大家好，我是 uni-app 的核心开发 前端笨笨狗。本篇是 uni-app 源码分析的第三篇文章，欢迎关注！

前两天有开发者在群里面问我 uni-app 中如何配置 styleIsolation，我告诉了他正确的配置方案，也计划写篇文章揭秘 uni-app 是如何通过运行时将开发者的配置转化为原生微信小程序的配置。

指南

选项式

在 uni-app 中，开发者可以通过在页面组件中添加 options 配置项来设置 styleIsolation，示例如下：

<script>
export default {
  name: 'MyComp',
  options: {
    styleIsolation: 'isolated'
  },  
}
</script>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "MyComp",
  options: {
    styleIsolation: "isolated",
  },
});
</script>

组合式

在使用组合式 API 的页面组件中，开发者同样可以通过 defineOptions 来设置 styleIsolation，示例如下：

<script setup>
defineOptions({
  name: 'MyComp',
  options: {
    styleIsolation: 'isolated'
  }
})
</script>

原理

createComponent 这个函数大家如果看过 vue 文件的 js 编译产物就一定不会陌生，比如

<script setup>
defineOptions({
  options: {
    styleIsolation: "shared",
  },
});
</script>

会被编译为

const _sfc_main = {
  __name: "comp",
  options: {
    styleIsolation: "shared"
  }
  setup(__props) {
    return (_ctx, _cache) => {
      return {};
    };
  }
};
wx.createComponent(_sfc_main);

也就是 script 中写的代码会被编译成一个对象，这个对象就是 vue 组件的配置项，而微信小程序又不认识 vue 组件的配置项，那么怎么把 vue 组件的配置项转化为微信小程序的配置项呢？这就要靠 uni-app 的运行时了，在 common/vendor.js 中，createComponent 函数会调用 parseComponent 函数来解析 vue 组件的配置项，parseComponent 的返回值就是微信小程序组件的配置项，也就是 Component 构造器 的参数，可以用来构造小程序原生组件。

function initCreateComponent() {
  return function createComponent(vueComponentOptions) {
    return Component(parseComponent(vueComponentOptions));
  };
}

const createComponent = initCreateComponent();
wx.createComponent = createComponent;

当 parseComponent 解析到页面组件时，会检查组件的 options 配置项，如果发现 styleIsolation，就会将其转化为微信小程序的配置项。

function parseComponent(vueOptions) {
  vueOptions = vueOptions.default || vueOptions;
  const options = {
    multipleSlots: true,
    // styleIsolation: 'apply-shared',
    addGlobalClass: true,
    pureDataPattern: /^uP$/
  };
  // 将开发者在 options 中设置的配置项转化为微信小程序的配置项
  if (vueOptions.options) {
    Object.assign(options, vueOptions.options);
  }
  const mpComponentOptions = {
    options,
    // 省略其他配置项
  };
  return mpComponentOptions;
}

这样一来，开发者在页面组件中设置的 styleIsolation 就会被正确地转化为微信小程序的配置项，从而自由控制样式隔离。

背景

大家好，我是 uni-app 的核心开发 笨笨狗吞噬者，欢迎关注我的微信公众号 前端笨笨狗，或者加我的微信 wxid_olsjlzuh4ivf22 沟通交流！

微信小程序支持分包异步化 跨分包自定义组件引用，但是，很多业务项目往往都比较复杂，组件使用情况也不容易看清，开发中很容易遇到这些问题：

• 无法快速获悉某个组件到底被哪些页面使用
• 不清楚一个组件在项目里出现了多少次
• 做分包优化时，不知道组件放在主包还是分包更合适

于是，我写了一个插件 vite-plugin-component-insight 来简化这一过程。

特性

• 开箱即用，配置简单
• 统计组件的使用次数和调用情况
• 结合主包和分包关系输出组件划分建议
• 支持生成 markdown 报告，方便查看更加详细的信息
• 支持 hx 项目和 cli 项目
• 支持 uni-app 和 uni-app-x (vue3)

使用指南

安装

npm install @uni_toolkit/vite-plugin-component-insight -D
# 或
pnpm add @uni_toolkit/vite-plugin-component-insight -D
# 或
yarn add @uni_toolkit/vite-plugin-component-insight -D

配置插件

在 vite.config.js 中使用：

import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';
import componentInsight from '@uni_toolkit/vite-plugin-component-insight';

export default defineConfig({
  plugins: [
    uni(),
    componentInsight(), // 在 uni 之后调用
  ],
});

Tips

插件默认不会生成文件，而是在控制台直接输出分析结果。

如果需要生成 markdown 报告，可以这样配置：

componentInsight({
  reportMarkdownPath: 'logs/component-insight-report.md',
})

如果只想生成 markdown，不输出控制台日志，可以这样配置：

componentInsight({
  logToConsole: false,
  reportMarkdownPath: 'logs/component-insight-report.md',
})

完整配置项

interface VitePluginComponentInsightOptions {
  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	指定包含的文件，默认为空