免费试用

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

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


相关知识:
阿坝支付宝小程序开发招聘信息
阿坝支付宝小程序开发是阿坝州电子商务局和支付宝平台合作开发的一款基于支付宝生态系统的小程序。该小程序通过整合阿坝当地商家资源,提供便捷的线上购物、预约、支付等服务,方便当地居民和游客生活,促进地方经济发展。一、支付宝小程序简介支付宝小程序,是支付宝推出的一
2023-08-09
安阳微信商城小程序开发
微信商城小程序是一种基于微信平台的轻量级应用,为用户提供便捷的购物、支付、物流等服务。它的优点是界面简洁、不需要下载安装、便于使用和分享等特点。本文将详细介绍安阳微信商城小程序的开发原理。安阳微信商城小程序开发原理:一、开发环境搭建开发环境包括微信开发者工
2023-08-09
uniapp小程序ar开发教程
Uniapp是一款跨平台的开发工具,可以同时开发小程序、H5、App等应用程序。本文将重点介绍如何使用Uniapp结合AR.js来开发小程序AR应用。1. AR.js介绍AR.js是一个使用WebXR API的JavaScript库,可以在浏览器中实现增强
2023-08-09
ui设计可以开发小程序吗
UI设计与小程序开发是两个相关但不完全相同的领域。UI设计通常是指设计人员根据产品需求和用户体验原则实现视觉设计、界面布局等方面的工作,其中包括使用图形软件进行设计,如Photoshop、Sketch等工具。而小程序开发则涉及更多的技术层面,包括编程语言、
2023-08-09
sublime开发小程序插件
Sublime Text是一款优秀的文本编辑器,其强大的插件机制是其受欢迎、广泛应用的主要原因之一。可以通过编写插件来扩展Sublime Text的功能,用于开发小程序的插件也不例外。### Sublime Text插件的原理Sublime Text插件是
2023-08-09
atom开发微信小程序
Atom是一款开源的文本编辑器,主要用于编写代码。在Atom中开发微信小程序可以帮助开发者更加高效地进行开发。Atom提供了丰富的插件和特性,可以帮助开发者开发更加智能的程序。在Atom中开发微信小程序可以通过几个步骤实现,以下是具体的介绍。首先,需要在A
2023-08-09
0代码小程序开发
随着移动互联网的快速发展,小程序成为了一种非常流行的移动应用开发方式。小程序的特点是不需要下载安装,即可直接使用,便于快速使用和分享。而0代码小程序开发,则是一种更加简单、快捷、易用的小程序开发方式。0代码小程序开发指的是使用特定的开发平台,通过拖拽、配置
2023-08-09
西安小程序开发工具无法输入中文字号
小程序开发工具是小程序开发者必备的一个工具,可以帮助开发者快速地构建和调试小程序项目。在开发小程序的过程中,有时候可能会遇到一些问题,比如在西安小程序开发工具中输入中文字号时无法输入。那么,这是为什么呢?下面将从原理和详细介绍两个方面来分析。一、原理西安小
2023-05-26
微信小程序开发工具版本号
微信小程序开发工具是一款支持开发和调试微信小程序的集成开发环境(IDE,Integrated Development Environment),包含了代码编辑、调试、构建、预览和发布等功能。目前,微信小程序开发工具已经推出了多个版本,在这里我们将介绍其中的
2023-05-26
微信小程序开发工具左侧
微信小程序开发工具左侧主要包含了项目文件的结构和管理、调试、构建等相关功能模块,下面我们详细介绍一下。1. 项目文件结构管理微信小程序开发工具左侧的项目文件结构管理模块主要包含了小程序项目的所有文件,包括页面、组件、资源文件、样式文件等。开发者可以通过左侧
2023-05-26
推荐几个小程序开发工具
1. 微信开发者工具微信开发者工具是官方提供的一款小程序开发工具,可以用来开发和调试小程序。它支持多种特性,如代码编辑、模拟器调试、实时预览、编译构建等,适合学习、开发、测试和发布小程序。使用微信开发者工具需要先对微信小程序有一定的了解和掌握,熟悉小程序的
2023-05-26
小程序关联小程序是什么意思?
小程序关联小程序是指在一个小程序中通过跳转或者嵌入的方式打开另一个小程序,实现两个小程序之间的交互和联动。这种方式可以实现小程序之间的资源共享,增强用户体验,也可以实现小程序之间的推广和合作。
2023-04-06