免费试用

跨平台小程序在线开发工具,用做网页的技术做小程序,兼容微信、支付宝、抖音、快手、百度等主流小程序平台!

mpvue开发小程序进行分包

mpvue是一个基于vue.js的小程序框架,允许开发者使用vue的开发方式来构建小程序应用。而在小程序的开发中,使用分包能大大提升应用的启动速度和性能。本文将详细介绍如何使用mpvue进行小程序分包。

## 什么是小程序分包

小程序分包是指将小程序的代码资源划分成多个部分,按需加载,从而加快小程序的启动速度和性能。小程序分包的原理是,将小程序内部的一些页面和组件进行分组,按照分组的方式,将其打包成一个个的小程序包,然后再进行分时加载和下载。

在mpvue中,我们能够使用webpack进行小程序打包,使用微信官方提供的分包配置,实现小程序分包。

## mpvue小程序分包配置

将小程序应用进行分包,首先需要对小程序进行分包配置。在小程序的project.config.json文件中,添加如下配置:

```

{

"description": "project description",

"packOptions": {

"ignore": []

},

"setting": {

"urlCheck": true,

"es6": true,

"postcss": true,

"preloadBackgroundData": false,

"minified": true,

"newFeature": true,

"coverView": true

},

"compileType": "miniprogram",

"appid": "yourAppid",

"projectname": "yourProjectName",

"condition": {

"search": {

"list": []

},

"isPlugin": false,

"isGamePlugin": false

},

"subPackages": [

{

"root": "pages/home",

"name": "home",

"pages": [

"index",

"detail"

]

},

{

"root": "pages/user",

"name": "user",

"pages": [

"index",

"about"

]

}

]

}

```

在以上配置中,我们通过subPackages属性来定义小程序的分包信息,其中subPackages是一个数组,可以定义多个分包。每个分包又包含了三个属性:

- root:分包的根目录,即小程序的某个子目录

- pages:当前分包包含的页面

- name:分包的名字,用于在代码中进行引用

## 小程序打包输出

当小程序配置了分包信息后,就需要重新打包输出小程序应用了。在mpvue中,我们可以通过修改build目录下的webpack.prod.config.js文件,来实现小程序分包输出。

```

const config = merge(baseWebpackConfig, {

// 分包策略优化配置

optimization: {

namedChunks: true,

splitChunks: {

cacheGroups: {

// 抽离所有公共模块到一个chunk-vendors.chunk.js文件

vendors: {

name: 'chunk-vendors',

test: /[\\/]node_modules[\\/]/,

priority: -10,

chunks: 'initial'

},

// 抽离分包后的公共模块,不考虑node_modules里的公共模块

shared: {

name(module, chunks) {

return chunks.map((chunk) => chunk.name).join('~')

},

test(module, chunks) {

if(module.resource && (/^.*\.(styl|css|less|sass|scss)$/).test(module.resource)) {

return false

}

return chunks.every(chunk => chunk.name !== 'chunk-vendors')

},

priority: -20,

chunks: 'initial'

}

}

}

}

})

```

在以上配置中,我们通过splitChunks属性来进行代码分包,具体配置如下:

- vendors:抽离所有的公共模块到chunk-vendors.chunk.js中。

- shared:抽离分包后的公共模块,不包括node_modules目录下的公共模块。

mpvue将分包后的小程序代码打包为一个个小程序包,分时加载和下载,提高了小程序的启动速度和性能。

## 分包应用场景

1. 大型应用

在大型应用中,小程序分包能够提升小程序的启动速度和性能,有效地减少白屏时间。

2. 首屏优化

对于一些首次加载的页面,我们可以使用小程序分包来将其独立出来,通过按需加载的方式,在用户进入页面后再进行加载,提升小程序的启动速度。

## 小结

小程序分包是一个在小程序开发中非常重要的优化方式,能够在提升小程序的启动速度和性能方面发挥重要的作用。本文介绍了如何在mpvue中进行小程序分包,希望对小程序开发者有所启发。


相关知识:
百度小程序怎么开发呢
百度小程序是一种基于百度智能小程序开发框架的应用程序平台。它允许开发者使用类似于原生应用的方式在百度搜索和百度 App 中构建和发布应用程序。下面我将详细介绍百度小程序的开发原理和步骤。1. 开发环境搭建: 在开始开发百度小程序之前,你需要先进行开发环
2023-08-23
爱奇艺小程序开发者平台
爱奇艺小程序开发者平台是基于微信小程序开发的一个可视化开发平台。它是由爱奇艺公司自主研发的一款在线小程序开发工具,旨在为开发者提供一个快速、简单、高效的小程序开发环境。本文将介绍爱奇艺小程序开发者平台的原理和详细使用方法。一、原理1.微信小程序微信小程序是
2023-08-09
安卓小程序开发环境
安卓小程序是一种新兴的移动应用技术,我们可以通过它来开发移动应用和提供服务。相比于传统的移动应用,它有许多优点,比如轻量化、快速开发和共享链接等。要开发一个安卓小程序,我们需要准备的开发环境如下:1. Android StudioAndroid Studi
2023-08-09
etcp小程序开发
ETCP小程序开发是指在微信平台上开发出一个能够实现电子缴费、ETC查询、办理等服务的小程序。本文将详细介绍ETCP小程序开发的原理和流程。一、ETCP小程序开发原理ETCP小程序开发的实现原理基于微信小程序开发框架。微信小程序开发框架是集成了微信公众号的
2023-08-09
focusky怎么生成exe文件
Focusky 是一款功能丰富的演示文稿制作工具,它可以轻松地创建漂亮、动态和交互式的演示文稿。生成exe文件意味着将您的Focusky演示导出为独立的可执行文件,方便脱离网络环境下展示。以下是使用Focusky生成exe文件的详细步骤。1. 打开 Foc
2023-05-26
小程序开发工具制作
小程序是一种轻量级的应用,相对于传统的手机应用,它更加轻便,启动速度更快。而小程序开发工具,就是用于编写、调试和打包小程序的工具。本文将向您介绍小程序开发工具的原理和制作,帮助您更好地理解小程序开发工作的背景和技术实现。一、小程序概述小程序是由微信推出的一
2023-05-26
微信小程序开发工具npm
微信小程序开发工具npm是一种工具,它能够帮助小程序开发人员更好地创建和管理小程序项目中的依赖项,以提高工作效率。本文将从以下几个方面介绍微信小程序开发工具npm的原理和详细介绍。一、什么是npm?Npm是Node.js的包管理器,它是开源的,可用于管理N
2023-05-26
微信小微信小程序官方开发工具
微信小程序是一种轻量级的应用程序,它可以在微信中使用,用户可以不必下载安装即可直接使用。微信小程序提供了类似于原生应用的体验,包括界面、网络、数据缓存、API调用等基础能力,但开发周期短、成本低,是一种非常适合中小企业开发的快捷方式。但是,作为开发者,如何
2023-05-26
双鱼小程序开发工具
双鱼小程序开发工具是基于微信小程序平台开发的一款开发工具,旨在提供一种简单、快速、易用的小程序开发环境,方便开发者快速开发小程序。双鱼小程序开发工具提供了一系列的工具和功能,包括代码编辑器、调试器、模拟器、代码片段等。通过这些工具和功能,开发者可以更加方便
2023-05-26
开发工具小程序推荐
在互联网行业中,开发工具是开发者必备的利器,开发工具小程序则是让开发者更加便捷的工具。以下是一些常见的开发工具小程序:1. 小程序开发助手小程序开发助手是一款非常实用的小程序,它提供了小程序开发过程中必要的工具和信息,例如常用的设计规范、代码示例、小程序限
2023-05-26
今日头条小程序开发工具
今日头条小程序是一款基于字节跳动开发的小程序,能够在用户手机上直接运行,具备完整的应用功能。小程序开发工具是今日头条开发者提供的一个程序,越来越多的开发者致力于开发今日头条小程序。下面我们来了解一下今日头条小程序开发工具的原理和详细介绍。一、小程序开发工具
2023-05-26
河北教育类小程序开发工具
河北教育类小程序开发工具是一种应用微信小程序技术,以河北省教育主管部门为背景,为教育类机构和教师开发的一款小程序开发工具。其本质是微信小程序开发平台的加强版,具有更为丰富的模板和组件库以及更为完善的教育类API。一、河北教育类小程序开发工具的基本原理河北教
2023-05-22