产物文件大小分析

小程序下，对组件的模板（wxml/qml等）、样式（wxss/qss等）、脚本文件（.js）大小的分析。

本插件解决的痛点是，帮助开发者快速定位哪些组件问题最大、最亟需优化。

插件会获取每个组件（包括页面）的上述三种产物的大小，以及样式与模板的体积比例、模板与脚本的体积比例，输出为 json 文件和 csv 文件，名称前缀均为analyze-bundle-file-size。

开发者可以据此进行分析，一般来说，样式模板体积比（cssHtmlRatio）特别大的组件（基础组件除外），往往存在大量无用样式。

可利用 Excel 中的自定义排序，对 cssHtmlRatio 进行降序，进而确定优化目标及优先级。

如何使用

安装

pnpm add @plugin-light/vite-plugin-analyze-bundle-file-size -D

在 vite.config.ts 中添加如下设置：

import { defineConfig } from 'vite';
import { analyzeBundleFileSizeVitePlugin } from '@plugin-light/vite-plugin-analyze-bundle-file-size';


export default defineConfig({
  plugins: [
    analyzeBundleFileSizeVitePlugin(),
  ],
});

更新日志

点此查看