【微信小程序篇-06】深入理解npm支持和分包加载

深入理解npm支持和分包加载

• 一，npm支持和分包加载
• • 1，npm支持
  • • 1.1，npm包的基本使用
    • 1.2，npm自定义构建
    • 1.3，vant组件库的使用
    • 1.4，vant组件样式覆盖
  • 2，分包加载
  • • 2.1，分包加载基本介绍
    • 2.2，分包配置以及打包引用原则
    • 2.3，独立分包
    • 2.4，分包预下载

一，npm支持和分包加载

1，npm支持

1.1，npm包的基本使用

目前小程序已经支持使用npm安装第三方包，因为node_modules 目录中的包不会参与小程序项目的编译、上传和打包，因此在小程序项目中要使用npm包，必须走一遍 构建npm 的过程。首先通过以下命令获取这个package.json文件

npm init –y

随后安装vant的weapp组件库，其代码如下。安装完成之后，会在package.json文件的dependencies中出现安装的@vant/weapp以及对应的版本号

npm i @vant/weapp

最后再安装完成之后，需要在工具栏点击构建npm，随后会出现这个 miniprogram_npm ，这个包里面存着构建好的npm包

npm包指的是专门为小程序定制的npm包，简称小程序npm包，因此在使用包之前需要先确认下该包是否支持小程序。比如一个dom包，如果小程序内部不支持的话，那么就不能使用。

1.2，npm自定义构建

在实际开发中，随着项目功能的越来越多、项目越来越复杂，文件目录也变得很繁琐，为了方便进行项目的开发，开发人员通常会对目录结构进行调整，例如将小程序源码放到 miniprogram 目录下，此时就需要开发者在project.config.json中指定node_modules的位置和目标miniprogram_npm 的位置

首先将原始的一些页面，静态资源等全部放在src目录下或者miniprogram目录下

随后打开终端，执行初始化npm和构建npm的命令

npm init –y
npm i @vant/weapp

随后在project.config.json文件中，在setting属性下，配置packNpmManually属性和miniprogramNpmDistDir属性，其具体详情如下，同时还需要配置 miniprogramRoot

{
"compileType":"miniprogram",
"miniprogramRoot": "./miniprogram",
"setting": {
"packNpmManually": true,
"packNpmRelationList":[
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./miniprogram"
}
]
}
}

1.3，vant组件库的使用

在学习这个组件之前，可以先去看一下官网上面的组件介绍和基本使用：https://vant-ui.github.io/vant-weapp/#/image ，这里选择一image为例子，讲一下这个组件库的基本使用。

随后需要在index.json文件或者app.json文件中注册这个组件

"usingComponents": {
"van-image": "@vant/weapp/image/index"
}

随后再index.wxml中直接使用官网给的案例即可

<van–image width="100" height="100" src="https://img.yzcdn.cn/vant/cat.jpeg" />

这个src使用的参数可以如下，当然详情也可以直接参考官网

除了这些基本属性之外，也可以给这些图片绑定一些事件

Events

Slots

外部样式类

1.4，vant组件样式覆盖

Vant weapp基于微信小程序的机制，为开发者提供了3中修改组件样式的方法

• 解除样式隔离：在页面中使用Vant Weapp组件时，可直接在页面的样式文件中覆盖样式
• 使用外部样式类：普通样式类和外部样式类的优先级是未定义的，需要添加**!important**保证优先级
• 使用CSS变量：在页面或全局对多个组件的样式做批量修改以进行主题样式的定制

以按钮主键为例，因此需要将vant-button按钮注册到全部路径中

"usingComponents": {
"van-button": "@vant/weapp/button/index"
}

官网提供的按钮有以下几种，type和常规的一样

<van–button type="default">默认按钮</van–button>
<van–button type="primary">主要按钮</van–button>
<van–button type="info">信息按钮</van–button>
<van–button type="warning">警告按钮</van–button>
<van–button type="danger">危险按钮</van–button>

1，解除样式隔离

接下来以主要按钮为例，首先来验证第一种解除样式隔离

<van–button type="primary">主要按钮</van–button>

设置它的样式如下，如果是在非自定义组件直接在wxss中修改样式，那么可以直接修改成功。

.van–button—primary {
font–size: 28rpx !important;
background–color: lightseagreen !important;
border: 1px solid lightseagreen !important
}

如果是在自定义组件中使用这个样式覆盖，那么需要在自定义组件js文件中将styleIsolation设置为共享模式，那也可以直接修改成功

Component({
options:{
styleIsolation: "shared"
}
})

2，使用外部样式类

依旧是使用这个button按钮，加上这个自定义外部样式类custom-calss，他是一个根节点样式类

<van-button type="primary" custom-class="custom-button">主要按钮</van-button>

在wxss文件中定义这个样式，依旧是所有的样式都要设置权重

.custom–button{
font–size: 28rpx !important;
background–color: lightseagreen !important;
border: 1px solid lightseagreen !important
}

3，使用CSS变量

依旧是使用这个button按钮，加上这个class样式my-button

<van–button type="primary" class="my-button">主要按钮</van–button>

在wxss文件中，需要通过 –color 设置颜色，并且这个van-button–primary也需要加上

.my–button{
—color:lightseagreen !important;
}

.van–button—primary {
font–size: 28rpx !important;
background–color: lightseagreen !important;
border: 1px solid lightseagreen !important
}

2，分包加载

2.1，分包加载基本介绍

小程序的代码通常石头许多页面、组件以及资源等组成，随着小程序功能的增加，代码量也会增加，体积过大就会导致用户打开的速度变慢，影响用户的使用体验。分包加载指的就是小程序将不同功能的代码，分别打包成不同的自爆，在构建时打包成不同的分包，用户在使用时按需加载。

每个使用分包的小程序一定会有一个主包，主包默认包含启动页面、Tarbar页面以及所有分包所需的公共资源包；分包是根据开发者的配置进行划分出来的子包

在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内的某个页面时，微信客户端会把对应的分包下载下来，下载完成之后进行展示。

目前小程序分包大小有以下限制：整个小程序所有分包大小不超过20M、单个分包或者主包大小不能超过20M

2.2，分包配置以及打包引用原则

接下来讲解一下这个分包具体是如何使用的，首先在miniprogram中创建一个文件夹modules，然后再这个文件夹中创建一个childModules文件夹。

随后在app.json文件中，在subPackages属性中添加分包，主包不需要显示设置。root前面不需要./，直接设置目录即可，name指的是别名，pages中设置的是哪些页面会在这个分包中。

"subPackages": [
{
"root":"modules/childModules",
"name": "childModules",
"pages": [
"pages/list/list"
]
}
]

清除缓存重新编译之后，在这childModules文件下，就会将这个对应的内容加载到这个分包里面。

也可以直接在详情下的代码依赖分析中，查看主包和分包的依赖关系

打包原则主要如下：

• tarBar页面必须在主包内
• 最外层的pages字段，属于主包的包含的页面
• 按subpackages配置路径进行打包，配置路径的目录将被打包到主包中
• 分包之间不能相互嵌套，subpackage的根目录不能是另外一个subpackage的子目录

引用原则主要如下：

• 主包不可以引用分包的资源，但分包可以引用主包的公共资源
• 分包与分包之间资源无法相互引用，分包异步化时不受此条限制

2.3，独立分包

独立分包指的是独立于主包和其他分包运行的包，独立分包页面进入小程序时，不需要下载主包，因此很大程度上可以提升页面的启动速度。

独立分包的使用也比较简单，在上面设置分包的基础上，在数组在加一个对象，并且设置这个independent为true，那么这个分包就成为了独立分包

{
"root":"modules/cartModules",
"name": "cartModules",
"pages": [
"pages/cart/cart"
],
"independent": true
}

需要注意的点有如下几点：

• 独立分包不能依赖主包和其他分包中的资源
• 主包中的app.wxss对独立分包无效
• App只能在主包内定义，独立分包中不能定义App，会造成无法预期的行为

2.4，分包预下载

分包预下载指的是访问小程序某个页面时，预先下载其他分包中的代码和资源，当用户需要访问分包中的页面时，已经预先下载的代码和资源则可以直接使用，从而提供用户的体验

小程序的分包下载需要在app.json文件中通过这个preloadRule设置规则，以下分别演示了分包预下载和独立分包预下载，key指的是页面路径，value是一个对象，network指的是任意网络下载还是在wifi情况下下载，packages指的是包别名

"preloadRule": {
"pages/list/list":{
"network": "all",
"packages": ["childModules"]
},
"modules/cartModules/pages/cart/cart":{
"network": "all",
"packages": ["__APP__"]
}
}