无痛拆分uni-app、小程序pages.json文件：动态生成解决方案

前端

2022-12-07 19:01:54

优化 uni-app 项目：拆分 pages.json 文件

uni-app 和小程序项目中的 pages.json 文件包含所有页面路由。当这个文件过大时，会拖慢打包速度，甚至导致上传失败。本文将提供几种方法来优化 pages.json 文件，提升项目打包效率。

1. 拆分 pages.json 文件

将 pages.json 文件拆分为多个较小的文件，每个文件包含一部分页面路由。

步骤：

在项目根目录创建一个名为 "pages" 的文件夹。
将 pages.json 文件中的页面路由移动到 "pages" 文件夹中的多个文件中，每个文件一个路由。
在 pages.json 文件中，将页面路由替换为 "pages" 文件夹中的文件路径。

示例：

// pages.json
{
  "pages": [
    "pages/index/index",
    "pages/about/about"
  ]
}

// pages/index/index.json
{
  "usingComponents": {}
}

// pages/about/about.json
{
  "usingComponents": {}
}

2. 动态生成 pages.json 文件

当需要从服务器端获取页面路由时，可以动态生成 pages.json 文件。

步骤：

在云开发控制台创建一个云函数。
在云函数中使用 uni-app-pages-generator 模块动态生成 pages.json 文件。
将生成的 pages.json 文件上传到项目的根目录。
重新打包项目。

代码示例：

const generator = require('uni-app-pages-generator');

exports.main = async (event, context) => {
  const pages = await getPagesFromDatabase();

  const pagesJson = generator(pages);

  await uploadPagesJson(pagesJson);

  return {
    pagesJson
  }
};

3. 动态生成分包配置 pages.json 文件

在某些情况下，需要动态生成分包配置 pages.json 文件。

步骤：

在云开发控制台创建一个云函数。
在云函数中使用 uni-app-subpackages-generator 模块动态生成分包配置 pages.json 文件。
将生成的分包配置 pages.json 文件上传到项目的根目录。
重新打包项目。

代码示例：

const generator = require('uni-app-subpackages-generator');

exports.main = async (event, context) => {
  const subpackages = await getSubpackagesFromDatabase();

  const subpackagesJson = generator(subpackages);

  await uploadSubpackagesJson(subpackagesJson);

  return {
    subpackagesJson
  }
};