工具简介

  • VueCLI:cybercloud-setup、cybercloud-app 在使用。是配置起来最省心的编译工具,不会碰到什么稀奇古怪的问题。生态兼容 Webpack,5.0.8 版本的 VueCLI 内部编译工具使用 Webpack@5,配合 esbuild-loader、cache-loader 及其它优化方法可以进一步提高编译速度。

  • Vite:cybercloud-main、cybercloud-ui 在使用。和 VueCLI 一样省心,只是有时要手动调整一下依赖预构建相关配置。生态兼容 Rollup。优点是 Vite@4.3 拥有很不错的冷启动时间和比原生 Rollup 快得多的编译速度。此外,配合插件用来打包 Vue 文件的类型比较方便。

  • Rollup:cybercloud-component-x 在使用。配合 Gulp 可以灵活处理编译流程,比如先编译 bundle 代码、再编译 bundleless 代码、之后再编译样式、编译类型、最后发包等。配合 esbuild-plugin 可以进一步提高编译速度。
  • Rspack:插件(插件模板@1.3.0)在使用。23 年六月起支持 Vue 项目。生态兼容 Webpack,只是复杂插件需要定制。插件模板从 VueCLI 迁移到 Rspack,由于代码比较简单所以没碰到定制插件需求。优点是拥有极致的冷启动速度(体感要优于 Vite),以及比 Vite 和 VueCLI 等工具仍高 5~10 倍的编译速度。

  • Taro:小程序项目和移动端项目在使用。我对它的评价是技术顶尖,生态也好,是多端编译相关最领先的框架。基于 Webpack,近期(2023/04)支持 Webpack@5

选型推荐

以下仅限 Vue 项目推荐。

组件库:

  • 如果需要输出类型,选 Vite 最简单。
  • 如果对输出的体积有比较高的要求,选 Vite。
  • 如果对编译流程控制有较高要求,或不想绑定 Vue 生态,选 Rollup + Gulp。
  • 否则,按对 Rollup 和 Webpack 的熟悉程度,选 Vite 或 Rspack。

业务 SPA 项目:

  • 如果寻求稳定,有最多相关资料和问题解决方法,选 Webpack。
  • 如果对编译速度有要求,选 Rspack。
  • 如果要接入 cybercloud-main 微前端环境,选 VueCLI。
  • 选 Vite。

小程序:

  • 选 Taro。
本文最后更新于: June 28 2023 21:04