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