使用 bundle-analyzer 分析 uni-app 打包产物包含哪些东西

之前陆陆续续有用户提到 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