uniapp 怎么查看那些文件/资源导致体积过大

欢迎到专业群（ uni-app 官方技术交流群 1 ） 咨询，群中有相关专业的管理员和群友。

在 uni-app 项目里分析打包产物体积，从而找出哪些文件或资源导致体积过大，方法和你熟悉的 Vue 项目类似，主要是利用构建工具的分析插件。uni-app 的 Vue 2 项目基于 webpack，Vue 3 项目基于 vite，所以对应的分析工具是 webpack-bundle-analyzer 和 rollup-plugin-visualizer。

Vue 3 项目分析步骤

如果你的项目使用的是 Vue 3，按以下步骤操作：

1. 安装插件：在项目根目录下执行命令安装 rollup-plugin-visualizer。

   npm install --save-dev rollup-plugin-visualizer  

   本助手使用国产模型，生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent

2. 配置 vite.config.js：在项目根目录创建或修改 vite.config.js 文件，内容如下：

   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: "analysis-report.html", // 生成的报告文件名  
       })  
     ],  
   });  

   本助手使用国产模型，生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent

3. 运行编译并查看报告：执行编译命令，比如编译到微信小程序。编译完成后，在 unpackage/dist/dev/mp-weixin 目录下会生成一个 analysis-report.html 文件。用浏览器打开这个文件，就可以直观地看到各个模块、文件占用的体积大小了。

Vue 2 项目分析步骤

如果你的项目使用的是 Vue 2，操作类似，但工具和配置文件不同：

1. 安装插件：安装 webpack-bundle-analyzer。

   npm install --save-dev webpack-bundle-analyzer  

   本助手使用国产模型，生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent

2. 配置 vue.config.js：在项目根目录创建或修改 vue.config.js 文件，内容如下：

   const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;  
   
   module.exports = {  
     configureWebpack: {  
       plugins: [  
         new BundleAnalyzerPlugin({  
           analyzerMode: 'static',  
           reportFilename: 'analysis-report.html'  
         })  
       ]  
     }  
   }  

   本助手使用国产模型，生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent

3. 运行编译并查看报告：同样，执行编译到目标平台（如微信小程序）的命令，完成后在 unpackage/dist/dev/mp-weixin 目录下找到 analysis-report.html 并用浏览器打开查看。

分析报告中的常见体积大户

根据社区的经验，体积问题通常集中在以下几个方面，你可以结合分析报告重点排查：

• vendor.js 过大：这是最常见的问题。vendor.js 包含了 node_modules 里的所有依赖。如果它体积异常，通常是引入了体积很大的第三方库（比如完整的 echarts、moment.js 等）。建议按需引入或寻找轻量级的替代方案。

• node_modules 中的依赖打入主包：在 Vue 3 项目中，node_modules 里的代码默认都会打入主包的 vendor.js，不会主动拆分到分包。如果某个较大的库只在分包页面使用，可以考虑手动将该库的源码拷贝到分包目录下，而不是通过 npm install 安装。

• uni-cloud 或其他不需要的模块：如果你没有使用 uniCloud，但 vendor.js 中包含了 uni-cloud 的代码，可以在整个项目中搜索 uniCloud，确保没有任何地方引用或导入它。

• static 目录下的静态资源：图片、字体文件等静态资源。请检查是否有过大的图片，可以使用压缩工具处理，或将资源上传到 CDN 通过网络加载。

• 原生插件体积：如果你使用了本地原生插件，插件的体积也会计入打包产物的原始大小中，这在云打包时尤为重要。

• 不必要的模块权限：在 manifest.json 的“App 模块配置”中，检查是否勾选了未使用到的模块（如地图、蓝牙等），取消勾选可以缩减打包体积。

特别注意：关于云打包体积超限

如果你分析的是云打包时的体积，需要注意计费规则是基于编译后、压缩前的原始文件大小，而不是最终的 APK/IPA 大小。这个体积包含编译后的前端代码、图标、原生插件等。如果体积超过 60MB，就需要付费才能继续打包。

希望这些方法能帮你快速定位到体积问题。