之前陆陆续续有用户提到 uni-app 打包之后，体积突然变大了，或者突然变小了。不清楚 dist 目录的产物都包含哪些内容，这里提供构建产物分析的方案。
技术思路
uni-app 在使用 vue2 中使用 webpack 进行打包，在 vue3 中使用 vite 进行打包，在 webpack/vite 的插件生态中，有 bundle-analyzer 相关插件。
vue3
如果你在使用 HBuidlerX 或者 CLI 运行 vue3 版本的项目，你可以在对应的工程目录安装。
npm install --save-dev rollup-plugin-visualizer
# or
yarn add --dev rollup-plugin-visualizer
观察当前目录是否包含 vite.config.js，如果没有请创建，如果已经存在按照下面修改。
官方文档提到了 vite.config.js 的作用 vite.config.ts
修改为下面方案，具体根据项目的依赖进行修改。
import {
defineConfig
} from 'vite';
import uni from '@dcloudio/vite-plugin-uni';
import {
visualizer
} from "rollup-plugin-visualizer";
export default defineConfig({
plugins: [
uni(),
visualizer({
emitFile: true,
filename: "111stats.html",
})
],
});
之后执行编译到对应平台，比如微信小程序平台，观察 unpackage/dist/dev/mp-weixin 是否读了一个 111stats.html 文件，拖入浏览器即可查看具体哪些产物多大体积。
如果你发现 uniapp 版本升级前后，尺寸发生了变化，可以前后两次编译产生的依赖图，供开发人员分析，具体哪个文件尺寸有异常。
vue2
如果在使用 HBuilderX 或者 CLI 运行 vue2 项目，可以按照下面的方案添加依赖
# NPM
npm install --save-dev webpack-bundle-analyzer
# Yarn
yarn add -D webpack-bundle-analyzer
修改或者创建 vue.config.js，修改为下面方案
const path = require('path')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
configureWebpack: {
plugins: [
new BundleAnalyzerPlugin({
analyzerMode: 'static',
reportFilename: '111report.html'
})
]
}
}
之后执行编译到对应平台，比如微信小程序平台，观察 unpackage/dist/dev/mp-weixin 是否读了一个 111report.html 文件，拖入浏览器即可查看具体哪些产物多大体积。
如果你发现 uniapp 版本升级前后，尺寸发生了变化，可以前后两次编译产生的依赖图，供开发人员分析，具体哪个文件尺寸有异常。
依赖分析
一般情况下，依赖分成两个大的部分：
- 依赖产物，在 vendor.js 中
- 页面逻辑，一般以
pages 文件夹为主
正常情况下，编译提及发生变化，一般是 vendor 或者 node_modules 发生了变化，具体可以观察对应部分。
如果在 ask 社区提问请提供对应的前后尺寸对比。
备注：
- link https://issues.dcloud.net.cn/pages/issues/detail?id=1133
