「正方说」前端构建工具--Vite入门与应用（二）

作者：高凡

前端总监

Vite 还提供了一个目前在帮助列表中并没有呈现的一个子命令：optimize。

这个命令的作用就是单独的去「优化依赖」。

所谓的「优化依赖」，指的就是自动去把代码中依赖的第三方模块提前编译出来。

例如，我们在代码中通过 import 载入了 vue 这个模块，那通过这个命令就会自动将这个模块打包成一个单独的 ESM bundle, 放到node_modules/.vite_opt_cache目录中。

这样后续请求这个文件时就不需要再即时去加载了。

同样也是模式的问题，热更新的时候，Vite 只需要立即编译当前所修改的文件即可，所以响应速度非常快。

而 Webpack 修改某个文件过后，会自动以这个文件为入口重写 build 一次，所有的涉及到的依赖也都会被加载一遍，所以反应速度会慢很多。

Vite 在生产模式下打包，需要使用 vite build 命令。

这个命令内部采用的是 Rollup 完成的应用打包，最终还是会把文件都提前编译并打包到一起。

对于 Code Splitting 需求，Vite 内部采用的就是原生 Dynamic imports 特性实现的，所以打包结果还是只能够支持现代浏览器。

不过好在 Dynamic imports 特性是可以有Polyfill的：

https://github.com/GoogleChromeLabs/dynamic-import-polyfill

也就是说，只要你想，它也可以运行在相对低版本的浏览器中。

Vite 的出现，引发了另外一个值得我们思考的问题：究竟还有没有必要打包应用？

之前我们使用 Webpack 打包应用代码，使之成为一个 bundle.js，主要有两个原因：

1. 浏览器环境并不支持模块化

2. 零散的模块文件会产生大量的 HTTP 请求

随着浏览器的对 ES 标准支持的逐渐完善，第一个问题已经慢慢不存在了。现阶段绝大多数浏览器都是支持 ES Modules 的。

零散模块文件确实会产生大量的 HTTP 请求，而大量的 HTTP 请求在浏览器端就会并发请求资源的问题；

在 HTTP 1.1 的标准下，每次请求都需要单独建立 TCP 链接，经过完整的通讯过程，非常耗时；

而且每次请求除了请求体中的内容，请求头中也会包含很多数据，大量请求的情况下也会浪费很多资源。

但是这些问题随着 HTTP 2 的出现，也就不复存在了。

关于 HTTP 1.1 与 HTTP 2 之间的差异，可以通过这个链接体验：https://http2.akamai.com/demo ，直观感受下 HTTP/2 比 HTTP/1 到底快了多少。

而且不打包也有一个好处，就是可以把按需加载实现到极致。

关于 HTTP 2 的详细介绍，可以参考：

• https://blog.fundebug.com/2019/03/07/understand-http2-and-http3/

• https://www.digitalocean.com/community/tutorials/http-1-1-vs-http-2-what-s-the-difference

• TypeScript - 内置支持
  

• less/sass/stylus/postcss - 内置支持（需要单独安装所对应的编译器）

Vite 带来的优势主要体现在提升开发者在开发过程中的体验。

• Dev Server 无需等待，即时启动；

• 几乎实时的模块热更新；

• 所需文件按需编译，避免编译用不到的文件；

• 开箱即用，避免各种 Loader 和 Plugin 的配置。

正方股份将定期推送人工智能、智慧油田、油藏工程、软件技能等知识专栏，“码”上关注，了解最新油田勘探开发解决方案、人工智能、大数据、Python开发知识等。欢迎业内人士在文章底部留言探讨，点分享、赞和在看，感谢您的“一键三连”！

/

/