quickpage有趣的多页面项目架构

前言

说起多页面项目架构,大家应该不会陌生。我们既希望它能够多容纳多个单独的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

另一种则是相对高自由度的方式,直接创建一个文件夹,安装最新版本的vitequickpage-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。

推荐阅读更多精彩内容