免费试用

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

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中进行小程序分包,希望对小程序开发者有所启发。


相关知识:
node
Node.js是一种基于Chrome V8引擎的JavaScript运行时环境,可以用于构建Web应用程序、命令行工具、后端服务等。微信小程序是一种可以在微信中进行使用的应用,其开发可以使用Node.js来实现。那么,Node.js开发微信小程序有哪些方法
2023-08-09
java 小程序开发
Java小程序开发是指使用Java语言进行小程序的开发,Java语言是一种面向对象的编程语言,其特点是跨平台,可移植性好,能够运行于不同的操作系统和硬件平台上,适用于创建各种类型的应用程序。下面将详细介绍Java小程序开发的原理和步骤。一、原理Java小程
2023-08-09
重庆小程序开发工具
重庆小程序开发工具是一款专门用于开发小程序的工具。它的原理是通过提供开发环境、开发工具和开发接口,帮助开发人员快速地开发小程序,同时还可以提供调试、查看、测试、打包等功能,使得小程序的开发变得更加简单、高效、可靠。首先,重庆小程序开发工具提供了开发环境,开
2023-05-26
go生成exe文件
Go语言生成exe文件(原理及详细介绍)Go语言(又称Golang)是一种高性能的编程语言,特别适用于快速开发可扩展的并发服务器、命令行工具以及其他类似项目。Go对于生成跨平台的独立可执行文件(.exe)而言是一个优秀的选择。这篇文章将介绍Go生成exe文
2023-05-26
爪哇伺服小程序开发工具组
爪哇伺服是一个开源的小程序开发工具组,它可以帮助开发者快速地开发小程序,提高开发效率和质量。下面我们将详细介绍爪哇伺服的原理和功能。一、原理爪哇伺服是基于Java开发的小程序开发工具组,通过使用爪哇伺服,开发者可以使用Java语言开发小程序,后端使用Spr
2023-05-26
在微信小程序开发工具中编译程序
微信小程序开发工具是一款基于微信开发者工具的开发环境,为开发者提供了一套完整的开发调试工具。开发者可以在微信开发工具中进行小程序的开发、调试和上线等操作。编译程序是小程序开发工具的一个重要功能,在此进行详细介绍。1. 概述编译程序是将小程序代码转化为可执行
2023-05-26
小程序集成开发工具
小程序集成开发工具是开发者为了方便开发小程序而推出的工具,它集成了小程序开发所需要的各种工具。开发者可以使用它快速、简单地开发出自己的小程序,它是小程序开发过程中必不可少的一部分。小程序集成开发工具分为两个部分,一个是客户端,一个是服务器端。客户端包括了开
2023-05-26
小程序开发工具介绍文档介绍内容
小程序开发工具是用于开发和调试微信小程序的一款集成开发工具,支持Mac OS和Windows操作系统。小程序开发工具具有代码编辑器、调试模拟器、代码上传、打包发布等开发、调试、发布微信小程序的功能。小程序开发工具为小程序开发者提供一站式开发服务,使用起来相
2023-05-26
微信小程序开发工具哪个比较好用
微信小程序是一种轻量级的应用程序,具有开发简易、启动快速、操作简单、用户体验优秀等优点,在移动互联网市场上崭露头角。当下,微信小程序在商业化程度不断推进的背景下,越来越多的企业学习和运用微信小程序技术,以增加品牌曝光度和商业价值。在开发微信小程序的流程中,
2023-05-26
临淄微信小程序开发工具择优推荐
临淄微信小程序开发是一种基于微信平台的小程序开发,它的特点是轻量级、快速上手和低成本。如果你正在寻找一款开发临淄微信小程序的工具,下面介绍几款常用的临淄微信小程序开发工具,并且给出它们的优缺点,以帮助你作出选择。1. 微信开发者工具(官方推荐)微信开发者工
2023-05-26
江苏旅游小程序开发工具公司
江苏旅游小程序开发工具公司是国内领先的旅游小程序研发公司之一,专注于旅游行业的小程序开发。它是一家集研究、开发和制造于一体的高新技术企业。江苏旅游小程序开发工具公司的主营业务是为旅游行业客户提供一站式的小程序解决方案。它拥有专业的技术团队和沉淀多年的行业经
2023-05-26
安卓版小程序开发工具
安卓版小程序开发工具是一款基于安卓手机上的应用程序,支持开发者使用其提供的接口和组件进行开发小程序。以下将从原理和详细介绍两个方面来介绍安卓版小程序开发工具。一、原理安卓版小程序开发工具是通过遵循小程序的规范,利用安卓手机系统的特性来实现的。开发者使用工具
2023-05-22