解决uniapp小程序vendor.js过大的实战指南
用uniapp开发小程序时，很多人都会遇到vendor.js文件太大的问题。这个文件动不动就超过1MB，而小程序平台对代码包有严格限制，主包不能超过2MB。文件太大会影响用户体验，甚至导致无法上传。
为什么vendor.js会这么大？
vendor.js主要包含第三方库的代码。uniapp项目会用到很多依赖包，这些包都被打包进了vendor.js。项目越复杂，引入的库越多，文件就越大。
主要问题：
引入了不必要的依赖
没有使用按需加载
打包配置没有优化
代码分割做得不好
举个例子，一个简单的uniapp项目，只用vue和uniapp的核心功能，打包后vendor.js可能就有800KB。如果再加上ui库、工具库，很容易超过2MB。
实用的解决方案
1. 分析打包内容
首先要知道是什么让文件变大。使用webpack-bundle-analyzer来分析打包结果。
安装分析工具：
npm install webpack-bundle-analyzer --save-dev修改vue.config.js：
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports = {
configureWebpack: {
plugins: [
new BundleAnalyzerPlugin({
analyzerMode: 'server',
openAnalyzer: true
})
]
}
}运行打包命令后，会自动打开分析页面。你能看到每个模块的大小，找到占用空间最大的模块，优先处理这些。
2. 按需引入组件
很多开发者习惯整体引入组件库，这样很方便，但会让包变大。
不好的做法：
// 整体引入 - 文件会很大
import uView from 'uview-ui'
Vue.use(uView)好的做法：
// 按需引入 - 只引入需要的组件
import {
uButton,
uInput,
uForm,
uToast
} from 'uview-ui'
// 手动注册组件
Vue.component('u-button', uButton)
Vue.component('u-input', uInput)
Vue.component('u-form', uForm)
// 或者使用插件方式按需注册
const uViewComponents = {
install(Vue) {
Vue.component('u-button', uButton)
Vue.component('u-input', uInput)
}
}
Vue.use(uViewComponents)对于其他常用UI库也是同样的道理：
Vant Weapp示例：
// 不好的做法
import Vant from 'vant-weapp'
// 好的做法
import { Button, Field, Cell, CellGroup } from 'vant-weapp'
Vue.use(Button)
Vue.use(Field)
Vue.use(Cell)
Vue.use(CellGroup)3. 使用小程序分包
小程序支持分包加载，这是很重要的优化手段。
在pages.json中配置：
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
},
{
"path": "pages/user/user",
"style": {
"navigationBarTitleText": "我的"
}
}
],
"subPackages": [
{
"root": "packageA",
"pages": [
{
"path": "detail/detail",
"style": {
"navigationBarTitleText": "详情页"
}
},
{
"path": "list/list",
"style": {
"navigationBarTitleText": "列表页"
}
}
]
},
{
"root": "packageB",
"pages": [
{
"path": "setting/setting",
"style": {
"navigationBarTitleText": "设置"
}
}
]
}
]
}分包策略建议：
主包：首页、个人中心等核心页面
分包A：商品相关页面
分包B：订单相关页面
分包C：设置和其他功能页面
把不常用的页面放到分包中，用户访问时才下载。主包只保留核心功能。
4. 优化图片资源
图片不要放在代码包中，使用在线图片地址。
不好的做法：
<image src="/static/logo.png"></image>
<image src="/static/banner.jpg"></image>好的做法：
<image src="https://cdn.example.com/logo.png"></image>
<image src="https://cdn.example.com/banner.jpg"></image>图片优化建议：
静态图片上传到CDN
使用WebP格式减小体积
设置合适的图片尺寸
使用图片懒加载
5. 移除无用代码
定期检查项目中的代码，删除不用的文件和组件。
检查方法：
查看引入但未使用的模块
删除废弃的页面和组件
清理无用的静态资源
使用eslint检测未使用的变量：
// .eslintrc.js
module.exports = {
rules: {
'no-unused-vars': 'error',
'no-unused-components': 'error'
}
}清理步骤：
运行eslint检查未使用代码
删除未引用的组件文件
清理static目录中未使用的图片
移除package.json中未使用的依赖
6. 压缩代码
启用代码压缩功能，uniapp默认会压缩代码，但要确认配置正确。
在manifest.json中检查：
{
"webpack": {
"enableCompress": true,
"minifyJS": true,
"minifyWXSS": true,
"minifyWXML": true
}
}额外的压缩配置：
// vue.config.js
module.exports = {
configureWebpack: {
optimization: {
minimize: true,
usedExports: true,
sideEffects: false
}
}
}7. 选择合适的第三方库
有些库功能很全，但体积很大。考虑使用轻量级替代品。
日期处理库对比：
moment.js：500KB+，功能全面但体积大
day.js：2KB，基本功能够用
date-fns：树摇友好，按需引入
工具函数库：
lodash：500KB+，功能完整
lodash-es：支持按需引入
自己封装：针对性强，体积最小
根据项目需求选择：
// 如果只需要基础功能
import dayjs from 'dayjs'
// 如果只需要特定函数
import { cloneDeep, debounce } from 'lodash-es'
// 自己封装简单的工具函数
const debounce = (func, wait) => {
let timeout
return function executedFunction(...args) {
const later = () => {
clearTimeout(timeout)
func(...args)
}
clearTimeout(timeout)
timeout = setTimeout(later, wait)
}
}8. 使用Tree Shaking
确保你的代码支持Tree Shaking，让打包工具可以移除未使用的代码。
在package.json中设置：
{
"sideEffects": false,
"module": "es/index.js",
"main": "lib/index.js"
}代码编写要求：
// 好的写法 - 支持tree shaking
export const functionA = () => {}
export const functionB = () => {}
// 不好的写法 - 可能有副作用
export default {
functionA: () => {},
functionB: () => {}
}9. 代码分割和懒加载
对于大型组件，使用懒加载技术。
路由懒加载：
// 静态引入 - 打包到主包
import Home from '@/pages/home/home'
// 动态引入 - 按需加载
const Home = () => import('@/pages/home/home')
const Detail = () => import('@/pages/detail/detail')组件懒加载：
// 在vue组件中
export default {
components: {
HeavyComponent: () => import('@/components/HeavyComponent.vue')
}
}10. 持续监控
优化不是一次性的工作，要建立监控机制。
在package.json中添加脚本：
{
"scripts": {
"build:analyze": "npm run build:mp-weixin -- --report",
"size-check": "node scripts/check-bundle-size.js"
}
}创建监控脚本：
// scripts/check-bundle-size.js
const fs = require('fs')
const path = require('path')
const distPath = path.join(__dirname, '../dist/dev/mp-weixin')
const stats = fs.statSync(path.join(distPath, 'vendor.js'))
const sizeInMB = (stats.size / 1024 / 1024).toFixed(2)
console.log(`vendor.js 大小: ${sizeInMB} MB`)
if (sizeInMB > 1.5) {
console.warn('vendor.js 超过 1.5MB，建议优化！')
process.exit(1)
} else {
console.log('endor.js 大小正常')
}优化前后的对比
优化前：
vendor.js: 2.3MB
主包大小: 3.1MB
加载时间: 3-5秒
优化后：
vendor.js: 850KB
主包大小: 1.8MB
加载时间: 1-2秒
注意事项
优化时要注意这些问题：
不要为了优化而破坏代码可读性
确保按需引入不影响功能
测试分包后的页面跳转
确认压缩后没有bug
测试要点：
所有页面正常显示
组件功能正常
页面跳转流畅
没有控制台错误
先在小范围测试，确认没问题再应用到整个项目。
总结
优化是个持续的过程。随着项目发展，要不断调整。保持代码简洁高效，定期检查包大小，及时发现问题。
记住这些关键点：
分析打包结果，找到问题源头
按需引入组件，避免整体引入
合理使用分包，减少主包体积
选择轻量库，替代重型依赖
建立监控机制，持续优化
通过这些方法，你就能有效控制vendor.js的大小，提升小程序的性能和用户体验。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！