vue3项目技术选型记录

yeanyue
259 阅读5分钟

在开发前端项目之前，期望有一个后端服务程序来提供数据支持。大部分软件的官方 Open API 目前并没有对个人开发者开放，但 GitHub 上有许多开源项目提供了相应的接口服务，所以选择采用已有的项目降低项目开发成本，最终选择了NeteaseCloudMusicApi开源项目来提供接口服务。通过伪造请求头 , 调用官方 API实现了丰富的接口，相比较其他项目，它有完善的文档，使用起来十分方便，且可以通过Vercel快速部署服务，不需要自己的服务器。

接下来就是前端技术栈的选择，Vue3肯定是必须的，路由管理采用官方推荐的vue-router。对于全局状态管理有3种选择：手动管理，vuex和Pinia。考虑到后期项目的数据会越来越多，所以一开始就放弃了手动管理。本次任务期望采用组合式写法，而且vue官方认为Pinia已经实现了Vuex 5期望的内容且vuex已经处于维护模式，不再接受新的需求，所以最终选择了Pinia。

对类型检查的需求，TypeScript or JSDoc?TypeScript提供了静态类型检查和类型推断的功能，可以发现潜在的错误，且如果采用TS不需要学习成本。JSDoc通过在代码块上方添加注释的方式来最终生成一个网站，最新的TS支持使用 JSDoc 注释为 JavaScript 代码添加类型信息，并生成对应的.d.ts声明文件，这对于非库项目来说似乎意义不大，最终放弃JSDOC使用。

除此以外还需要确保代码质量，引入ESLint和StyleLint用以捕获代码中的潜在错误、不一致的编码风格和不良的代码习惯，使用Prettier自动格式化代码。

对于UI库，该项目目标为PC端前台应用，倾向于选择有团队长期维护且目前比较活跃的支持Vue3的项目。可供选择的有：

  • VueTify
  • Antd-vue
  • Element Plus

最终选择了VueTify,这个组件库设计遵循 Material Design 规范.而后面2个更适合企业级应用或者说中后台应用。目标项目规模较小，更适合VueTify，且Vuetify具有良好的扩展性（文档中提供了播放器相关的功能），同时css预处理器和VueTify保持一致，用SCSS。

打包工具vite，webpack or rollup?webpack、rollup、esbuild都是打包工具，代码写好之后，我们需要对代码进行压缩、合并、转换、分割、打包等操作，这些工作需要打包工具去完成。

webpack运行原理： image.png

  1. 使用webpack启动项目
  2. webpack根据配置文件webpack.config.js中的入口文件entry递归分析出项目所有的依赖关系，包括js文件、样式文件以及其他资源文件。
  3. 分析完所有依赖关系之后，webpack将所有的模块打包成一个文件bundle.js以及可能的css、图片文件，交给浏览器去加载渲染。

带来的问题是：当项目越大，依赖关系越多，需要打包的文件数量越多，单个模块也可能会变得更加庞大，这些都增加了启动时间。

ES module: 使用方式：在script标签中添加type="module"。

在ES module中，浏览器遇到内部的import引用的时候会自动发起http请求加载对应的模块。

// test.js
export default function hello() {
  console.log('hello world');
}

// index.html
<script type="module">
  import hello from './test.js';
  hello(); // hello world
</scirpt>

Vite运行原理：

image.png

Vite利用了这个特性。

  1. Vite使用esbuild进行预构建，将所有模块转换为es module

好处： 不需要对整个项目进行编译打包，而是在浏览器需要加载某个模块的时候，拦截浏览器发出的请求，根据请求进行按需编译，然后返回给浏览器。

这样首次启动项目(冷启动)自然比webpack快。

项目构建方式：

  1. webpack基于nodejs运行，但js是单线程运行的，无法利用多核CPU
  2. vite的预构建和按需编译都是使用esbuild完成的。esbuild使用go开发，可以充分利用多核优势CPU
  3. vite利用了http2的并发请求。在http2之前，浏览器对同一域名的请求不能超过6个，否则会阻塞，所以需要减少打包后的文件数量，减少并发请求
  4. http2使用了多路复用，可以在单个 TCP 连接上同时发送和接收多个请求和响应。没有了1的并发限制，这时候将打包产物分成多个小模块，并行加载可以显著提高速度

热更新： HMR可以在运行过程中，在不重新加载整个页面的情况下，对模块进行替换/添加/删除。

  • webpack:每次修改文件都会对整个项目重新打包，当项目规模增大的时候，即使有缓存机制，热更新的速度也会越来越慢。
  • vite:监听到文件变更后，用websocket通知浏览器重新发起请求并重新编译对应模块进行替换。

生产环境：

相对webpack，rollup更小巧，打包生成的文件也更小，打包速度更快。vite目前使用es moudle打包器rollup打包，而不是esbuild。原因是vite的插件API和用esbuild作为打包器并不兼容，现阶段用rollup打包会更稳定。

使用成本：

  • webpack搭建项目脚手架需要配置很多东西，比如跨域、代码压缩等，需要了解各种loader/plugin使用。根据项目场景对配置不断优化
  • vite对常用功能做了内置，比如css预处理器、分包、压缩等，学习成本相对较低

所以基于以上结论，最终采用vite作为构建工具。

avatar
文章
阅读
粉丝