如何减少微信小程序vendor.js的大小

### 减小微信小程序主包 `vendor.js` 文件大小的最佳实践 #### 配置优化选项 为了有效减少 `vendor.js` 的体积，在项目的根目录下的 `vue.config.js` 或者类似的配置文件中，可以通过设置 `optimization` 属性来启用 Webpack 的优化功能。具体来说： - 启用分包支持：通过将 `subPackages` 设置为 `true` 来确保子页面及其依赖项不会被错误地加入到主包内[^4]。 ```javascript module.exports = { configureWebpack: { optimization: { splitChunks: { chunks: 'all', minSize: 30000, maxSize: 0, cacheGroups: { vendors: false, // 不提取vendors chunk defaultVendors: false, common: { name: 'chunk-common', test: /[\\/]node_modules[\\/]/, priority: -10, reuseExistingChunk: true, enforce: true } } }, minimize: true, minimizer: [ new TerserPlugin({ terserOptions: { compress: { drop_console: true, drop_debugger: true } } }) ] } } } ``` 此段代码展示了如何调整 Webpack 构建过程中的分割逻辑，从而更好地控制哪些模块应该被打入公共包(`common`)或是保持独立[^1]。 #### 实施懒加载机制 对于那些并非立即需要的功能组件或页面，应当考虑实施懒加载（Lazy Loading），即仅当用户导航至特定路由时才动态导入对应的 JavaScript 和 CSS 资源。这样不仅可以显著降低初次加载时间，也能进一步削减初始下载的数据量。 ```html <template> <div id="app"> <!-- 使用 v-if 控制显示 --> <router-view v-slot="{ Component }"> <keep-alive :include="['Home']"> <component :is="Component"></component> </keep-alive> </router-view> </div> </template> <script setup lang="ts"> import { defineAsyncComponent } from 'vue' const Home = defineAsyncComponent(() => import('@/views/Home.vue')) // 对于其他不常用的视图可以同样处理... </script> ``` 上述 Vue 组件模板片段说明了怎样利用 `<Suspense>` 及其配套 API (`defineAsyncComponent`) 来实现异步加载组件的效果[^2]。 #### 审查并精简第三方库 仔细审查项目所使用的 npm 包列表，移除不必要的依赖关系，并尽可能寻找更轻量化替代品；另外还可以尝试缩小某些大型框架的核心版本范围，只保留必要的部分用于生产环境构建。 最后，记得定期清理 node_modules 目录并通过 yarn/npm install 命令重新安装最新的锁定版本，以确保获得最佳性能表现[^3]。

微信小程序打包common/vendor.js是指将小程序中的通用代码、库文件、资源文件等集中打包成一个文件。 在微信小程序开发中，我们经常会使用到一些通用的代码或者库文件，例如一些第三方库、封装的工具类等。这些代码在不同的页面或组件之间都会被使用到，如果每个页面都单独引入这些代码，就会造成代码的冗余和重复加载，影响小程序的性能和加载速度。 为了解决这个问题，微信小程序提供了打包机制。通过将这些通用的代码集中打包成一个文件，可以减少重复的加载，并且在需要的地方引入这个打包文件即可。 common/vendor.js的打包过程如下： 1. 在小程序项目根目录下找到app.json文件，找到其中的"pages"字段，将所有的页面路径都列出来。 2. 根据页面路径和页面文件的import语句，分析出所有被引入到页面中的通用代码和库文件。 3. 将这些通用代码和库文件统一打包成一个vendor.js文件。这个文件中包含了各个通用代码和库文件的源代码。 4. 在页面的json配置文件中，通过"usingComponents"字段或"dependencies"字段引入vendor.js文件。这样，每个页面在加载时都会自动引入这个打包好的通用代码文件。 通过打包common/vendor.js，可以减少小程序的文件数量和大小，提高小程序的性能和加载速度。同时，也方便了开发者对通用代码和库文件的维护和更新，统一管理更加方便。 总之，微信小程序打包common/vendor.js是为了减少代码冗余和提高性能，通过将通用代码和库文件集中打包成一个文件，优化小程序的加载和运行效率。