对比前端页面架构 SPA 与 MPA、前端打包工具 Vite 与Parcel。

本文基于 node 22.12.0

一、SPA 与 MPA

在现代 Web 应用开发中，页面架构通常分为两种模式：

• SPA（Single Page Application）单页应用
  • 创建Vue3+Vite单页面应用总结
• MPA（Multi Page Application）多页应用
  • meethigher/html-component at mpa

二、Vite 与 Parcel

2.1 弃用 Vite

我在开发前端单页时，既有 SPA 也有 MPA。SPA 就直接使用 Vite 来进行打包和构建了。 MPA 的开发习惯，则是直接 HTML/CSS/JavaScript 手撕完成，就发到线上。长期这样玩的情况下，遇到了如下几个问题

1. 代码压缩没法自动完成
2. 开发统一风格的 MPA，代码复用繁琐

于是我就想通过构建工具 Vite 来解决该问题，但实际使用 Vite 维护 MPA 的过程中，发现 Vite 并不能完全解决我的痛点。

Vite 会将我的 css 与 js 的引用顺序打乱，我需要严格控制 js 和 css 顺序，来解决加载主题色时的闪屏问题，然而 Vite 的该特性，让我没法解决掉该问题，他甚至不如 hugo。

于是我就探索其他的前端构建工具，Webpack、Parcel，最终选择了 Parcel，因为他轻量、简单。

2.2 选择 Parcel

按官方的说法，零配置构建工具，demo

从 Vite 切换至 Parcel 2.x 之后，旧的问题解决了，但是又来了新的问题。

我的 scss 代码@media (max-width: 75rem)，他给我转换成了@media (width<=75rem)，这就导致在旧版本浏览器不好使了。这不是纯纯煞笔、多此一举吗，关键还是强制的不支持配置。

最后进行了降级。

降级前

1
2
3
4
5

"devDependencies": {
  "@parcel/optimizer-htmlnano": "^2.16.4",
  "@parcel/transformer-sass": "^2.16.4",
  "parcel": "^2.16.4"
}

降级后

1
2
3
4

"devDependencies": {
  "parcel-bundler": "1.12.5",
  "sass": "1.97.3"
}

还是旧版用的爽，真正的零配置！

另外，不管 2.x 还是 1.x，生成的 js/css 等其他引用资源，都是打包到根目录下面。

我们打包时，通过参数 --public-url /index/ 控制 js 和 css 的引用前缀为 /index/，打包后自行移动 js 和 css 位置即可。

parcel 1.x 太好用啦！