如何将老项目的小程序快速改为分包模式

2,862 阅读6分钟

背景

在最开始准备制作小程序的时候,为了求开发的快速,所使用了直接page的引入方式,每次小程序加载都是全包下载。3月份之前小程序页面稳定在35个,下载耗时在1800ms左右,4月份初上线了新业务页面膨胀到52个页面时,下载耗时基本稳定在2300ms左右,随着用户反馈越来越多,所以开始准备小程序采用分包加载,来解决这个问题。5月份在分包加载之后,页面依旧稳定在52个,但是下载耗时稳定800ms左右,缩短了将近1500ms。基本做到了0业务入侵、加入npm script 来实现新建页面,同时兼容分包加载,page加载。

操作流程

执行命令

npm run new

给出信息提示,并且要求输入路径

[Info] 帮助你快速创建page文件
[Info] 只局限于新目录创建
[Info] 请输入文件路径,已帮你省略pages/
[Info] 例子:address/addressList
? 请输入文件路径:

输入路径之后创建文件的提示

[Info] 已创建base64.js
[Info] 已创建index.js
[Info] 已创建index.json
[Info] 已创建index.wxml
[Info] 已创建index.wxss
[Info] 创建完成!!!!

选择包,是主包、还是分包,并且提示,给出提示,如果是tabBar中使用,只能选择主包,并且手动配置app.json的tabBar

? 你想生成什么样的包: (Use arrow keys)
❯ 主包,在pages中写入,如果是tabBar中使用,只能选择主包,并且手动配置app.json的tabBar
  分包,在subpackages中写入

单选完成之后提示新建成功

[Info] 写入成功

第一次分包

首先我们对未分包和分包的app.json代码进行对比

// 未分包
"pages": [
  "pages/a/index",
  "pages/b/index",
  "pages/b/list",
]
// 实现分包
"subpackages": [
  {
    "root": "pages/a",
    "pages": [
      "index",
    ]
  },
  {
    "root": "pages/b",
    "pages": [
      "index",
      "list"
    ]
  }
]

接下来看目录结构

pages
  |---- a
        |---- index.js
  |---- b
        |---- index.js
        |---- list.js
app.json

简单分一下,第一次分包的核心业务是,将pages这个普通列表,变成名为subpackages的二叉树结构,左子节点是root,右子节点是pages,并且右子节点是string类型,左子节点是array类型。好吧,我可以定下规则,首先我可以将pages/a/index这个字符串变为数组以/为分界的['pages','a','index']数组,然后我将前两项作为root节点的参数,用slice操作截取出来,转为字符串类型,赋值给root。之后的所有参数,我都赋值或者push给pages参数,最后我就得到了这样一个符合要求的树,最后push进subpackages即可。至于数据源,我只需要读出app.json这个文件的pages参数,并且通过我的方法写入subpackages参数即可。

要点

  • 去重,因为subpackages内,root节点是唯一的,但是在pages里面可能我会截取初重复的值

解决

  • 使用Map结构,把截取出的root值作为key,剩下的作为value,Map数据这种数据结构的特点就是key值唯一。
let list = [
  "pages/a/index",
  "pages/a/list",
  "pages/a/detail/index",
  "pages/c/list",
  "pages/b/index",
];

let m = new Map();
let packages = [];
list.forEach(v=>{
  let arr = v.split('/');
  let root = arr.splice(0,2).join('/');
  let pages = arr.join('/');

  if(m.get(root)){
    let s = m.get(root);
    m.set(root,[...s, pages]);
  }else{
    m.set(root,[pages]);
  };
});
for(let [key,value] of m){
  packages.push({
    root: key,
    pages: value,
  })
}

console.log(packages);
// log 出的结构
[
  { root: 'pages/a', pages: [ 'index', 'list', 'detail/index' ] },
  { root: 'pages/c', pages: [ 'list' ] },
  { root: 'pages/b', pages: [ 'index' ] }
]

我已经在不入侵业务的情况下实现了小程序的第一次分包,节约了我手动去改的劳动力,我个人认为,解决问题,上策用数据结构,中策写兼容代码,下策手动去改。至于,读出写入文件,我就不赘述了,google即可。

创建新pages的指令编写

好吧,我实现了第一次的分包。然后我要思考,如果我每次要加页面的话,是不是就要去查看subpackages,找到对应的root,并且添加pages。这么重复劳动力的操作,我为什么不用脚本替代呢,是吧。

核心需求

  • 编写交互式的命令输入
  • 检测输入的page目录是否存在,存在就报错
  • 不存在创建page目录,复制template到新建的page中
  • 根据使用者的单选,选择写入pages,或者写入subpackages
  • 在page文件加中设置预留文件夹,用做初级业务拆分,不加入subpackages检测
  • 屏蔽app.json中pages的文件,不加入subpackages检测

设计npm script

{
  "subcontract": "node ./config/subcontract",
  "new": "node ./config/new"
}  

添加的package.json参数,ignore-files表示文件夹中不检测的文件,pages表式app.json中的文件

{
  "ignore-files": [
    "**/common/**",
    "**/component/**",
    "**/<name>/**",
    "**/<name>/**",
    "**/<name>/**",
  ],
  "pages": [
    "pages/<name>/index",
    "pages/<name>/index",
    "pages/<name>/index",
  ]
}

需求已经明确,我就要去找我需要用到的npm包了

colors        命令行颜色
inquirer      交互式命令行
glob          全局搜索文件
fs-extra      文件写入写出
path          路径
shelljs       执行shell命令

分析new.js文件

const colors = require('colors');
const inquirer = require('inquirer');
const glob = require('glob');
const fs = require('fs-extra');
const path = require('path');
const shell = require('shelljs');
const PKG = require('../package.json');
const ROOT = path.resolve(__dirname, '../');

let appJson = require('../app.json');
const promps = [{
  type: 'input',
  name: 'pagePath',
  message: '请输入文件路径:',
},
{
  type: 'list',
  name: 'type',
  message: '你想生成什么样的包:',
  choices: [
    {
      name: '主包,在pages中写入,如果是tabBar中使用,只能选择主包,并且手动配置app.json的tabBar',
      value: '1',
    },
    {
      name: '分包,在subpackages中写入',
      value: '2',
    },
  ],
}];
const logger = {
  info(msg) {
    console.log(`[Info] ${colors.green(msg)}`);
  },
  warn(msg) {
    console.log(`[Warn] ${colors.yellow(msg)}`);
  },
  error(msg) {
    console.log(`[Error] ${colors.red(msg)}(/‵Д′)/~ ╧╧`);
  },
};

logger.info('帮助你快速创建page文件');
logger.info('只局限于新目录创建');
logger.info('请输入文件路径,已帮你省略pages/');
logger.info('例子:xxxxx/xxxx');

这是代码中的常量部分和默认提示部分,我写了logeer对象来作为提示输出的默认颜色,promps作为我交互命令行的基础配置。引入package.json我的主要目的是因为我屏蔽了一些文件ignore-filespages,想这两个参数的文件夹我是不会被检测的,不会被加入到subpackages的。

function checkFile(name) {
  const options = {
    ignore: [
      '**/*.js',
      '**/*.wxss',
      '**/*.wxml',
      '**/*.json',
    ],
    cwd: 'pages/',
  };
  const files = glob.sync('**', options);
  if (files.some((v) => v === name)) {
    logger.error('输入的目录已经存在,已终止!!!!');
    return false;
  };
  return name;
};

在这是检测文件是否存在的方法,只需要传入路径,即可检测这个路径是否在pages/目录中存在。

function buildFile(name) {
  const options = {
    cwd: 'template/page',
  };
  const files = glob.sync(`**`, options);

  files.forEach((v)=>{
    const file = v.split('.tp')[0];
    fs.copy(`${ROOT}/template/page/${v}`, `${ROOT}/pages/${name}/${file}`, (err) => {
      if (err) {
        console.error(err);
        return false;
      }
    });
    logger.info(`已创建${file}`);
  });
  logger.info('创建完成!!!!');
  return true;
};

这是复制文件夹并且复制模版文件的方法,我准备了tempalte这个文件夹,用来存储我写的模版文件,创建完成之后,我直接复制进去即可。为了和普通文件区别,我添加的.tp后缀。我的模版是可扩展的,我可以把requestapp({...})在其中写好,并且添加我个人的一些方法。

function subcontract(res) {
  inquirer.prompt(promps[1]).then((answers)=>{
    if (answers.type === '1') {
      PKG['ignore-files'].push(`${res}/**`);
      PKG['pages'].push(`${res}/index`);
      appJson['pages'].push(`pages/${res}/index`);
      fs.writeFileSync(`${ROOT}/app.json`, JSON.stringify(appJson, null, 2));
      fs.writeFileSync(`${ROOT}/package.json`, JSON.stringify(PKG, null, 2));
      logger.info('写入成功');
    };
    if (answers.type === '2') shell.exec('npm run subcontract');
  });
};

这是选择pages还是subcontract的方法,选择了subcontract,我直接执行我上面写的小程序分包方法subcontract.js即可。如果选择pages,我会将它加入package.json中的pages对象,这个对象表式这些文件名不被subcontract脚本检测。

async function inquirers() {
  const {pagePath} = await inquirer.prompt(promps[0]);
  const path = pagePath.replace(/\s+/g, '');

  if (!path) {
    logger.error('输入有失误,已终止!!!!');
    return false;
  };
  if (/.*[\u4e00-\u9fa5]+.*$/.test(path)) {
    logger.error('请不要输入中文符号,已终止!!!!');
    return false;
  };

  return path;
};

检测输入值是否合法,是否有中文,并且去除空格

( async function() {
  const inquirerRes = await inquirers();
  const checkFileRes = inquirerRes && checkFile(inquirerRes);
  const buildFileRes = checkFileRes && buildFile(checkFileRes);
  buildFileRes && subcontract(checkFileRes);
})();

最后组装,inquirerRes变量负责判断输入值是否正确。然后进入checkFile,来检测文件夹是否重复。调用buildFile方法,创建文件夹,复制模版文件。最后调用subcontract来判断是分包还是主包。

subcontract.js 分析

const glob = require('glob');
const fs = require('fs');
const path = require('path');
const colors = require('colors');
const ROOT = path.resolve(__dirname, '../');
const PAG = require('../package.json');
let appJson = require('../app.json');

const ignoreFiles = PAG['ignore-files'];
const pages = PAG['pages'];
const logger = {
  info(msg) {
    console.log(`[Info] ${colors.green(msg)}`);
  },
  warn(msg) {
    console.log(`[Warn] ${colors.yellow(msg)}`);
  },
  error(msg) {
    console.log(`[Error] ${colors.red(msg)}(/‵Д′)/~ ╧╧`);
  },
};

const subcontract = () => {
  const options = {
    ignore: ignoreFiles,
    cwd: 'pages/',
  };
  const files = glob.sync('**/index.js', options);

  let subcontractMap = new Map();
  files.forEach((v)=>{
    let arr = v.split('.')[0].split('/');
    let root = arr.shift();
    let page = arr.join('/');

    if (subcontractMap.has(root)) {
      let pages = subcontractMap.get(root);
      pages.push(page);
      subcontractMap.set(root, pages);
    } else {
      subcontractMap.set(root, [page]);
    }
  });

  let subcontractList = [];
  subcontractMap.forEach((v, k)=>{
    subcontractList.push({
      root: `pages/${k}`,
      pages: v,
    });
  });

  return subcontractList;
};

appJson.subpackages = subcontract();
appJson.pages = pages;
fs.writeFileSync(`${ROOT}/app.json`, JSON.stringify(appJson, null, 2));
logger.info('写入成功');

这个方法其实和小程序第一次分包的方法大同小异。只不过我修改了数据源的获取,第一次我是读取app.json的pages,这里我是根据目录来的,以及加入了ignoreFiles来做文件屏蔽。以及一些友好提示。

结尾

项目优化的道路还有很长这只是最最初步的方案。为什么我开始不直接选择分包呢?因为项目开始的时候还没有分包,而且如果有,我感觉分包机制的这种书写方式,可能会带给开发者出错的可能性,我为了将项目工期缩短,出错可能性降低,我也不会选择一开始就分包。当业务增长到一定量,以及业务逐渐趋向于稳定时候,我就可以根据业务的特性,去做相对应的事情。这种方式我称之为技术迭代。在特定的时候,选择特定的解决方案,坚决不过度设计。