# 一、小程序分包

官方描述:分包加载 (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 包

更新于 : 7/8/2024, 10:21:14 AM