小程序分包优化经验总结

1,945 阅读1分钟
小程序分包优化经验总结
uniapp分包这块的文档不太明确,github、网上博客、官网下载的示例也大多只是进行简单分包(组件,图片,js没有独立到分包)导致减少的主包体积有限。
查阅相关资料,自己摸索出一套不错的uniapp小程序分包方式。

目录结构

新建项目

新建项目 minutePart

分包配置

调整目录,准备资源文件

分包配置

配置pages.json
{

     //分包代码start

	"subPackages": [

        {

            "root": "pages/packA",

            "pages": [

                {

                    "path" : "pages/shopCar/shopCar",

                    "style" : {}

                }

            ]

        }

	]

}

新建页面,并引入

新建/pages/packA/pages/shopCar/shopCar.vue
template>

	<view>

		<image src="../../static/1.png" mode=""></image>

		qweqwe

		<www></www>

	</view>

</template>

<script>

	import www from '../../components/www/www.vue'

	export default {

		components:{

			www

		}

	}

</script>

查看效果

调整首页/pages/index/index.vue
<template>

	<view class="content">

		<navigator url="/pages/packA/pages/shopCar/shopCar">

			跳到分包页看效果

		</navigator>

	</view>

</template>

uniapp智能js分包目录调整,准备资源文件

分包优化配置

uniapp智能地将只有一个分包引用,用的js打包到分包里。两个以上分包引用或一个主包引用都打包到主包。
配置manifest.json
/* 小程序特有相关 */

"mp-weixin" : {

    "appid" : "",

    "setting" : {

        "urlCheck" : false

    },

    /* uniapp智能js分包 */

    "optimization":{"subPackages":true},

    "usingComponents" : true

},

分包中页面引入

import loading from '@/common/loading.js'

示例项目与效果