uni-app怎么减小打包体积

夜墨小哥_7098

夜墨小哥_7098

2026-10-31

772人浏览

原创

vendor.js超1.5MB主因是第三方库未按需引入或static图片未压缩;快速定位:在dist/build/mp-weixin中按文件大小排序,前5个大.js/.png即元凶;须同时开启manifest.json中subPackages和runtimeCompress。

uni-app怎么减小打包体积

直接看 unpackage(App)或 dist/build/mp-weixin(小程序)目录里真实产出的文件大小,别信构建日志里的模糊提示——vendor.js 超 1.5MB,90% 是因为第三方库没按需引入,或者图片没压缩就拖进了 static/。

怎么快速定位哪个文件在撑大体积

Windows 资源管理器打开 dist/build/mp-weixin,点「查看 → 详细信息 → 大小」列排序;macOS 用 Finder 列表视图 + 按大小排序。前 5 个最大的 .js 或 .png 就是元凶。

  • chunk-vendors.[hash].js 异常大?说明 node_modules 里的库(比如 echarts、uview-ui)被全量打进去了
  • static/ 下某张 PNG 超 800KB?设计稿截图直传,微信开发者工具不会自动压缩
  • 某个分包文件夹总大小超 2MB?检查里面有没有未外部化的字体或大 JSON 配置

第三方库必须按需引入,不是 import 就算

写 import { uButton } from 'uview-ui' 不等于生效——uni-app 默认不识别这种写法,仍会打包全量 UI 库。得配 babel-plugin-import 或改 vue.config.js:

uni-app
uni-app

uni-app 是基于 Vue 的跨端开发框架,适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载
  • 对 uView:在 vue.config.js 的 configureWebpack.plugins 里加 babel-plugin-import,libraryName: 'uview-ui'
  • 对 echarts:禁用 import * as echarts from 'echarts',改用 import * as echarts from 'echarts/lib/echarts' + 单独 require('echarts/lib/chart/bar')
  • 对 lodash:别引 lodash,改用 lodash-es + import debounce from 'lodash-es/debounce'

分包配置写对了,但 vendor.js 还是没变小

缺了 manifest.json 里的两个关键开关:subPackages 和 runtimeCompress 必须同时开启,否则分包代码仍会被塞进主包 vendor.js。

  • 在 manifest.json 的 mp-weixin 节点下加:
{
  "mp-weixin": {
    "optimization": {
      "subPackages": true,
      "runtimeCompress": true
    }
  }
}
  • runtimeCompress 不是压缩图片,是移除 JS 注释、空格、调试逻辑,实测减 1.2–1.8MB
  • 漏配 subPackages: true,哪怕 pages.json 写了分包,vendor.js 也照旧膨胀
  • 真正难啃的是那些“悄悄回归主包”的路径:比如 subNVue 文件放在 components/ 而非分包目录内,或者自定义 tabBar 组件没放进 subPackages.root 指定的路径下——它们不会报错,但会默默把代码打回主包。

    相关文章

    PHP速学视频免费教程(入门到精通)
    PHP速学视频免费教程(入门到精通)

    PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

    下载

    本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

    相关专题

    更多
    python是前端还是后端
    python是前端还是后端

    Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

    2023.08.11

    2763

    5

    前端如何实现即时通讯
    前端如何实现即时通讯

    实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

    2023.10.09

    5983

    6

    前端和后端的区别
    前端和后端的区别

    前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

    2024.03.19

    6930

    13

    php和前端的关联介绍
    php和前端的关联介绍

    php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

    2024.03.22

    6698

    10

    前端外包工作内容有哪些
    前端外包工作内容有哪些

    前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

    2024.05.22

    963

    5

    TypeScript工程化开发与Vite构建优化实践
    TypeScript工程化开发与Vite构建优化实践

    本专题面向前端开发者,深入讲解 TypeScript 类型系统与大型项目结构设计方法,并结合 Vite 构建工具优化前端工程化流程。内容包括模块化设计、类型声明管理、代码分割、热更新原理以及构建性能调优。通过完整项目示例,帮助开发者提升代码可维护性与开发效率。

    2026.02.13

    312

    17

    TypeScript全栈项目架构与接口规范设计
    TypeScript全栈项目架构与接口规范设计

    本专题面向全栈开发者,系统讲解基于 TypeScript 构建前后端统一技术栈的工程化实践。内容涵盖项目分层设计、接口协议规范、类型共享机制、错误码体系设计、接口自动化生成与文档维护方案。通过完整项目示例,帮助开发者构建结构清晰、类型安全、易维护的现代全栈应用架构。

    2026.02.25

    520

    17

    TypeScript类型系统进阶与大型前端项目实践
    TypeScript类型系统进阶与大型前端项目实践

    本专题围绕 TypeScript 在大型前端项目中的应用展开,深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析,帮助开发者构建类型安全、结构清晰、易维护的前端工程体系,提高团队协作效率与代码质量。

    2026.03.13

    391

    19

    TypeScript 全栈开发进阶指南
    TypeScript 全栈开发进阶指南

    面向有 JavaScript 基础的开发者,深入讲解 TypeScript 的类型系统与全栈开发实践。

    2026.06.03

    306

    29

    热门下载

    更多
    网站特效
    /
    网站源码
    /
    网站素材
    /
    前端模板

    精品课程

    更多
    相关推荐
    /
    热门推荐
    /
    最新课程
    uni-app从入门到实战教程
    uni-app从入门到实战教程

    共0课时 | 0人学习

    uni-app x harmony开发指南
    uni-app x harmony开发指南

    共0课时 | 0人学习

    uni-app鸿蒙运行和发行
    uni-app鸿蒙运行和发行

    共0课时 | 0人学习