uni

您所在的位置：网站首页 › 微信小程序代码压缩 › uni

uni

2023-11-21 13:02| 来源: 网络整理| 查看: 265

uni-app主包体积优化

主要用于解决uni-app编译成小程序，在真机浏览或上传时包体积超过限制的问题。

在微信开发者工具中，顶部操作栏右侧——详情——代码依赖分析，可以查看编译后的包的情况与各文件大小。

IDE配置 HbuilderX

操作：顶部操作栏——运行——运行到小程序模拟器——运行时是否压缩代码（勾选）

该步骤能有效减少第三方插件或组件库的代码体积，但也仅限代码，静态资源不会被压缩。

微信开发者工具

操作：

顶部操作栏——详情——上传代码时自动压缩样式文件（勾选）顶部操作栏——详情——上传代码时自动压缩脚本（勾选）顶部操作栏——详情——上传代码时自动压缩wxml文件（勾选）顶部操作栏——详情——上传代码时过滤无依赖文件（勾选）代码分包目录结构 uniapp_test ├── App.vue ├── index.html ├── main.js ├── manifest.json ├── package-lock.json ├── packageA #分包A │ └── page │ └── index.vue ├── packageB #分包B │ └── page │ └── index.vue ├── pages #主包 │ └── index │ └── index.vue ├── pages.json ├── static │ └── logo.png ├── uni.scss └── unpackage └── …… 配置 { "pages": [ //主包内的页面配置 { "path": "pages/index/index", "style": { "navigationBarTitleText": "uni-app" } } ], "subPackages": [ // 分包内的页面配置 { "root": "packageA", // 分包的包名 "pages": [{ "path": "page/index", // 所在分包内的相对路径（只能填相对路径） "style": { "navigationBarTitleText": "packageA" } }] }, { "root": "packageB", "pages": [{ "path": "page/index", "style": { "navigationBarTitleText": "packageB" } }] } ], "globalStyle": { …… }, …… } 图片分包目录结构 uniapp_test ├── App.vue ├── index.html ├── main.js ├── manifest.json ├── package-lock.json ├── packageA │ ├── page │ │ └── index.vue │ └── static #分包中用于存放静态资源的文件夹，命名只能是static，否则编译时不会识别打包成相应目录，内部子目录名可自定义。 │ └── img │ └── logo_in_packageA.png ├── packageB │ └── page │ └── index.vue ├── pages │ └── index │ └── index.vue ├── pages.json ├── static #主包中用于存放静态资源的文件夹 │ └── logo.png ├── uni.scss └── unpackage └── …… 引用分包图片 packageA

注意：

主包内的图片资源允许在任何地方引用，但在主包内无法引用分包内的图片资源在分包间跨分包引用图片资源会告警，有几率无法正常加载图片。 tabbar的图片仅仅只能放在主包内，并且无法使用CDN进行引用。

解决方案：

保证图片资源仅仅在其所在的分包内引用。将静态的图片资源上传自图床，通过CDN引用。组件分包

在使用大型的组件库，例如uView时，一般是通过uni-app插件市场一键导入到uni_modules文件夹下，当该组件的目录结构符合easycom规则时，可以在package.json中进行配置。

{ "easycom": { "^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue" }, "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages …… ], …… }

在配置了easycom规则后，在引用组件时能实现自动导入，并且只有在页面内引用到组件时，相应的组件才会被打包。

目录结构 uniapp_test ├── App.vue ├── components # 主包内组件存放文件夹 ├── index.html ├── main.js ├── manifest.json ├── package-lock.json ├── packageA │ ├── page │ │ └── index.vue │ └── static │ └── img ├── packageB │ └── components # 分包内组件存放文件夹，命名只能是components，否则编译时不会识别打包成相应目录。 │ └── qiun-data-charts │ └── …… │ └── page │ └── index.vue ├── pages │ └── index │ └── index.vue ├── pages.json ├── static │ └── logo.png ├── uni.scss ├── node_modules # npm下载第三方插件存放文件夹 ├── uni_modules # uni-app插件市场导入第三方插件存放文件夹 │ └── uview-ui └── unpackage └── ……

注意：尽管是在分包中引用uni_modules 、node_modules、 components 中的组件，该组件也会被打包至主包内。

如果要使用uCharts这种比较大的插件，并且引用该插件的模块比较独立的话，可以将插件放入分包的components文件中，在编译时会被打包到分包中去。

引用分包内组件 packageB import QiunDataCharts from "../components/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue" export default { components: { QiunDataCharts }, ……

注意：

引用分包内组件时需要找到其对应的主文件进行引用。在引用时只能使用相对路径进行手动引用。在分包可内以引用主包内的组件，但无法跨分包间引用组件，在主包内也无法引用分包内组件。

【本文地址】

uni

uni

今日新闻

推荐新闻