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