H5打包vendors包体积过大的问题

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

好的，作为 uni-app 开发工程师，我来帮你分析 H5 打包后 vendors.js 过大的问题，并解答你的疑问。

问题分析

你遇到的核心问题是 uni-app 编译为 H5 后，主包中的 vendors.js 文件体积过大，即使使用了动态引入，vconsole 等库还是被打包了进去。

根据知识库的信息，这个问题的根源在于uni-app 的构建机制。DCloud 官方人员已经明确指出：“node_modules 里的包默认都会打进主包”。在 Vue 3 的 H5 编译中，uni-app 不会主动拆分这些第三方依赖，它们都会被合并到 vendors.js 中，这与 Vue 2 项目的处理方式不同。

你尝试的动态引入 vconsole，在开发模式下可能生效，但在生产构建（发行）时，打包工具（webpack/vite）为了优化，仍然会把它包含进最终的 bundle。

解决方案

针对这个问题，可以尝试以下几种方法：

1. 手动拆分第三方库（最直接有效的方法）

既然构建工具不会自动拆分，我们可以手动将大型的第三方库从主包中“挪”出来。

操作步骤：

• 在项目根目录下创建一个目录，例如 src/async-libs/。
• 将你希望延迟加载或拆分的、来自 node_modules 的库（如 vconsole、socket.io-client 等）的核心文件，手动拷贝到这个新目录中。
• 在代码中，使用动态 import() 从 src/async-libs/ 路径引入，而不是从 node_modules 引入。这样，打包工具就会将其视为异步模块，单独生成 chunk 文件，而不会打进 vendors.js。

示例：
如果你要拆分 vconsole：

1. 将 node_modules/vconsole/dist/vconsole.min.js 拷贝到 src/async-libs/vconsole.min.js。
2. 在需要使用的代码处，这样引入：

   // 仅在需要时动态加载  
   if (process.env.NODE_ENV === 'development') {  
     import('@/async-libs/vconsole.min.js').then((module) => {  
         // 使用 module  
         new module.default();  
     });  
   }  

   本助手使用国产模型，生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent
   这个方法可以解决你提到的 vconsole、socket 等库的拆分问题。

2. 开启摇树优化 (Tree Shaking)

确保你已经开启了摇树优化，以移除未使用的代码。

在 manifest.json 的 H5 配置中开启优化选项：

// manifest.json  
{  
  "h5": {  
    "optimization": {  
      "treeShaking": {  
        "enable": true  
      }  
    }  
  }  
}

本助手使用国产模型，生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent
这个配置可以帮助去除 uni-app 内置组件库和 API 中未被你项目使用的部分，能有效减小基础包体积。

3. 使用 webpack-bundle-analyzer 分析体积

要精准地知道是哪些文件导致了体积过大，可以使用分析工具。知识库中提到了一个很实用的文章：如何分析vendor.js文件构成。

对于使用 Vue 2 的项目，可以通过 vue.config.js 配置 webpack-bundle-analyzer 插件来查看打包分析图。对于 Vue 3 项目，也可以使用类似 rollup-plugin-visualizer 的工具。

Vue 2 示例 (vue.config.js):

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');  
module.exports = {  
  configureWebpack: {  
    plugins: [  
      new BundleAnalyzerPlugin({  
        analyzerMode: 'static', // 生成静态HTML报告  
        openAnalyzer: false, // 构建完成后不自动打开浏览器  
      })  
    ]  
  }  
};

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

4. 其他通用优化建议

• 按需引入 UI 库：如果你使用了如 uView 等 UI 库，确保是按需引入，而不是全量引入。
• Gzip 压缩：在服务器端（如 Nginx）开启 Gzip 压缩。这不会减小文件本身的体积，但能显著加快网络传输速度。知识库中提供的示例是使用 compression-webpack-plugin 在打包时生成 .gz 文件，但更推荐的做法是在 Web 服务器层面配置。
• 代码分割 (Code Splitting)：利用 Vue Router 的路由懒加载，将不同页面的代码分割成独立的 chunk，避免全部代码都打进主包。

总结

你提到的 vconsole 和 socket 等库的拆分是完全可以实现的。最直接有效的方法就是在项目内部手动拷贝一份大型第三方库，并通过动态 import() 进行异步加载。同时，开启摇树优化并使用分析工具排查具体的大文件，是系统化解决包体积问题的关键步骤。

const TransformPages = require("uni-read-pages");
const { webpack } = new TransformPages();
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
module.exports = {
configureWebpack: {
optimization: {
splitChunks: {
cacheGroups: {
// 将 vconsole 单独打包
vconsole: {
test: /[\/]node_modules[\/]vconsole[\/]/,
name: "vconsole",
chunks: "async", // 关键：只处理异步chunk
priority: 10,
enforce: true,
},
// 其他第三方库
vendors: {
test: /[\/]node_modules[\/]/,
name: "vendors",
chunks: "initial",
priority: 5,
},
},
},
},
plugins: [
new webpack.DefinePlugin({
ROUTES: webpack.DefinePlugin.runtimeValue(() => {
const tfPages = new TransformPages({
includes: ["path", "name", "meta"],
});
return JSON.stringify(tfPages.routes);
}, true),
}),
new BundleAnalyzerPlugin(),
],
},
};
我这样操作直接不展示了H5 白屏

我的项目是vue2的项目