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/page/index.vue -->
<template>
    <view>
        packageA
        <!-- 引用主包图片 -->
        <image src="@/static/logo.png" style="width: 50rpx;height: 50rpx;" mode="aspectFill"></image>
        <!-- 引用分包图片 -->
        <!-- 在分包内无法使用@简化路径，只能填写相对路径或绝对路径 -->
        <image src="/packageA/static/img/logo_in_packageA.png" style="width: 50rpx;height: 50rpx;" mode="aspectFill"></image>
        <image src="../static/img/logo_in_packageA.png" style="width: 50rpx;height: 50rpx;" mode="aspectFill"></image>
    </view>
</template>

注意：

• 主包内的图片资源允许在任何地方引用，但在主包内无法引用分包内的图片资源
• 在分包间跨分包引用图片资源会告警，有几率无法正常加载图片。
• 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文件中，在编译时会被打包到分包中去。

引用分包内组件

<template>
    <view>
        packageB
        <view class="charts-box">
            <qiun-data-charts type="column" :chartData="chartData" />
        </view>
    </view>
</template>
​
<script>
    import QiunDataCharts from "../components/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue"
    export default {
        components: {
            QiunDataCharts
        },
        ……
</script>
​

注意：

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