quickpage有趣的多页面项目架构

Brandonxiang JAN 1, 2022

前言

说起多页面项目架构，大家应该不会陌生。我们既希望它能够多容纳多个单独的Web页面，又希望它们能够共用一些工程化配置（例如图片处理，语法检查等）。利用 webpack 搭建的多页面项目已经成为了前端小白的标配。千千万万个面试者的 github 仓库里面都有 webpack 的多页面项目脚手架，从这里可以看出它在Web前端的重要性。

但是，webpack多页面项目架构存在着一些难以忍受的缺点。

1. 当项目中页面很多，项目的热加载速度会受到影响，bundle需要大范围重新计算。这时候最有效的解决方案就是页面限制入口，但是这种方法给开发者带来心智负担，并非最好的解决方案。
2. 多页面项目只能支持一种前端框架，它没法同时支持多种框架（react/vue/svelte/vanilla.js等）。例如，一些简单的页面（中转页面等）首选技术栈是vanilla.js（原生Javascript） ，但是由于多页面框架的限制，被迫引入了react。

大部分多页面项目架构是为了满足这类碎片化页面的开发（介绍页和活动页）。其诉求是：

• 技术栈通用化，能支持多种不同的前端框架
• 具有极致的调试效率，支持hot reload
• 傻瓜式保姆式地初始化文件、压缩和注入引用

什么是quickpage

quickpage是一个开源前端工具，正是为了解决以上问题，它的命名含义在于快速满足页面的开发和构建。

随着 bundleless 的发展，大家对开发效率、打包体积，打包效率有了更高的要求。《ESM Import与Bundleless》一文介绍了前端工程化的未来发展方向。所以在技术选型上，考虑到开发效率、页面的独立性以及 bundleless 前端工程化，项目首先选用 vite 来作为底层的基础，它能够支持 vue，react，svelte 等主流框架或是 vanilla.js 无框架写法，它有着非常好的构建基础以及周边生态体系。

在 vite 的基础上，quickpage 提供了以下额外能力，达到“开箱即用”的效果。

• 初始化项目
• 目录结构的约束
• 友好的交互命令行
• 按需开发
• 按需构建

项目的初始化有两种方式。一种是通过 npm 官方方式来初始化项目（如下方命令），工具会自动帮你创建一个vallina.js demo项目，你可以直接修改该页面，或者重新创建子页面。

npm init quickpage your-project

另一种则是相对高自由度的方式，直接创建一个文件夹，安装最新版本的vite和quickpage-cli，通过命令行创建子页面，也能达到同样的效果。

mkdir your-project && cd your-project
npm i vite quickpage-cli --save-dev

目录结构是以 pages 文件夹作为多页面项目的基础，每个单独的子页面项目则是它的子文件夹，所有的子页面都平铺在该文件夹。这么一来，我们能够清楚了解项目中包含多少个子页面。项目中有一个vite.config.js用于配置前端工程，所有的配置都会直接作用到该项目当中，充分且毫无保留地利用了 vite 的所有能力，也确保了 quickpage 和 vite 的独立性。

创建一个子页面是多页面项目的基本操作。quickpage 与其他多页面框架不同，去除了所有复杂的配置，开发者只需要利用quickpage create命令创建子页面，根据交互式命令输入页面名字和页面框架类型（例如react）即可。它将会自动帮你创建一个单独的目录，每个子页面都可以拥有独立的技术栈，复杂的页面可以选择 react，简单的页面可以选择 svelte。

按需开发，也可以理解为局部开发。以往的开发经验告诉我们，涉及到修改的页面往往只是其中一小部分，大家都习惯了“小步快走”的迭代节奏。开发者可以利用quickpage dev选择性地调试部分页面，每个页面灵活可控。如果项目中页面太多，命令行还提供了模糊搜索的能力。

按需构建，也可以理解为局部构建。根据我们的需求范围，利用quickpage build这个命令，选择性地构建部分页面，避免需求不涉及的页面被重复构建，再将这些页面以最小的独立单元进行部署，降低上线的风险。

横向对比

和webpack多页面的对比

webpack 多页面是基于多入口的实现，由于在开发调试的时候，所有入口都会重新计算 bundle，所以随着项目页面逐渐变多，调试效率会大幅下降。

quickpage 的开发模式是基于 vite ，所以在调试过程中，它充分利用了bundleless 的优势，有效减少了构建的计算，只是做了简单的转译。而且 quickpage 可以按需开发以及按需构建，确保了涉及页面数量的最小化。

和vite官方多页面的对比

vite 官方也支持多页面，具体参考vite多页面应用模式，它的调试效率固然不是问题。

quickpage 与它的不同点在于目录结构约束以及按需构建。正是由于固定的目录结构，我们能够清楚知道项目里面有多少个页面，哪些页面可以被开发或者构建。虽然它们共用一份配置，但是我们能够选择性地构建页面，并执行增量式的部署。

总结

针对现实前端工程场景中碎片化页面，quickpage 应该算是一个灵活可控的多页面小工具，解决大家仓库碎片化和工程配置没法统一的问题，很好地支持它们的开发和构建等工作。欢迎大家查看源码，有问题可以提issue。