# 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 └── …… ``` ### 引用分包图片 ``` ``` 注意： - 主包内的图片资源允许在任何地方引用，但在主包内无法引用分包内的图片资源 - 在分包间跨分包引用图片资源会告警，有几率无法正常加载图片。 - 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`文件中，在编译时会被打包到分包中去。 ### 引用分包内组件 ``` ``` 注意： - 引用分包内组件时需要找到其对应的主文件进行引用。 - 在引用时只能使用相对路径进行手动引用。 - 在分包可内以引用主包内的组件，但无法跨分包间引用组件，在主包内也无法引用分包内组件。