一、小程序分包

官方描述：分包加载 (opens new window)

提示

  小程序的分包操作类似与 vue 的路由懒加载，不同的是，小程序分包只需要在上架时进行分包处理即可。

1、分包限制

分包大小限制：

• 整个小程序所有分包大小不超过 20M
• 单个分包/主包大小不能超过 2M

打包限制：

• tabBar 页面必须在主包内

2、分包示例

• 原来

// app.json
{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/apple/apple",
    "pages/banana/banana",
    "pages/cat/cat",
    "pages/dog/dog"
  ]
}

• 现在

除了页面，我们还可以把对应的静态资源也划分到分包中，以减少主包大小。

├── app.js
├── app.json
├── app.wxss
├── packageA
│   └── pages
│       ├── cat
│       └── dog
├── packageB
│   └── pages
│       ├── apple
│       └── banana
├── pages
│   ├── index
│   └── logs
└── utils

// app.json
{
  "pages": ["pages/index/index", "pages/logs/logs"],
  "subpackages": [
    {
      "root": "packageA",
      "pages": ["pages/cat/cat", "pages/dog/dog"]
    },
    {
      "root": "packageB",
      "name": "pack2", // 为分包命名
      "pages": ["pages/apple/apple", "pages/banana/banana"]
    }
  ]
}

// 修改项目中的跳转路径

3、组件库优化

  由于 Vant Weapp 并没有像 Element UI、Ant Design 等提供了按需引入的功能。

  所以在小程序中，对于 Vant Weapp 的包大小优化，可以采用手动删除@vant/weapp 包中没有使用的文件的方式

二、小程序与 npm 构建

  小程序目前是支持 npm 包下载的，但也有一些局限性。

1、npm 选择

  通过学习小程序的通信模型后，可以知道小程序中使用 npm 包有如下 3 个限制：

• 不支持依赖于 Node.js 内置库的包
• 不支持依赖于浏览器内置对象的包
• 不支持依赖于 C++插件的包

初始化

npm install

2、npm 构建 🚩

 参与构建 npm 的 package.json 需要在 project.config.json 定义的 miniprogramRoot 之内。

miniprogramRoot 字段不存在时，miniprogramRoot 就是 project.config.js 所在的目录

① 变化：

  开发者工具 v1.02.1811150 版本开始，调整为根据 package.json 的 dependencies 字段构建

  所以，声明在 devDependencies 里的包也可以在开发过程中被安装使用而不会参与到构建中。

这之前的版本，还是建议使用--production 选项

② 构建：

  现在的微信开发者工具只需要在菜单栏：工具 --> 构建 npm 即可完成构建

3、Vant Weapp 示例

  Vant Weapp 是有赞前端团队开源的一套小程序 UI 组件库，开源快速搭建小程序应用。

官方文档：

Vant Weapp (opens new window)

① 安装

npm i @vant/weapp -S --production

② 配置

• app.js

{
  // 移除默认组件样式
  // "style": "v2"
}

• project.config.json

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

目前新版开发者工具创建的小程序目录文件结构问题，npm 构建的文件目录为 miniprogram_npm，并且开发工具会默认在当前目录下创建 miniprogram_npm 的文件名

③ 构建 npm 包

略