一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

【webpack】弄清楚webpack 与vite的区别

Webpack 与vite最大的不同,是在开发的时候,webpack 进行了模块转化。 Webpack的功能非常强大,比如模块打包、代码分割、按需加载、HMR、文件建ring、Tree-shaking、Sourcemap、MF、Dev Server、DLL、持久化缓存、Loader缓存等等

而Vite开发模式 unbundle, 因为浏览器原生支持esm,所以根本没做什么 bundle 操作,而是交给了浏览器。在生产的时候用才Rollup构建

原生ESM

先看看原生ESM支持的写法,比如,这种 js-examples,但是我实际运行的时候会碰到一个跨域问题

Access to script at 'file:///Users/nanlan/Documents/my-project/js-examples/module-examples/basic-modules/main.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.

报错原因是es6会受到同源策源的限制,所以需要通过HTTP或HTTPS协议从服务器加载你的脚本

const express = require('express'); const app = express(); 
app.use(express.static('public')); // 'public'是你的静态文件(如HTML,JS,CSS等)所在的目录 
app.listen(3000, () => console.log('Server is running on port 3000'));

然后运行localhost:3000就可以了

Webpack

在Webpack中,构建过程大概分为这么几个阶段初始化Init构建Make生成Seal

  • 初始化阶段: 修整配置参数,创建 Compiler、Compilation 等基础对象,并初始化插件及若干内置工厂、工具类,并最终根据 entry 配置,找到所有入口模块
  • 构建阶段: 从entry找到入口,调用loader转化为JS代码,调用Acorn 转化为AST结构,遍历 AST 找出模块依赖的模块;之后递归遍历所有依赖块,构建出 模块依赖关系图 (dependency graph)
  • 生成阶段: 根据output的配置,将模块拆解成不同的chunk对象,经过一系列优化,再将代码翻译成产物

描述得比较简单, 实际完成这些过程是比较复杂的

Vite

我们来看看 Vite,像模块依赖、文件转换,这些事情都不是在开发的时候做的,而是交给了浏览器去处理,用户启动 dev server 他会通过会通过 middlewares 对请求做拦截,然后对源文件做 resolveloadtransformparse 操作,然后再将转换以后的内容发送给浏览器

unbundle核心

  • 模块之间的依赖关系的解析由浏览器实现;
  • 文件的转换由 dev server 的 middlewares 实现并做缓存;
  • 不对源文件做合并捆绑操作;

Vite的缓存

代码总共分为两部分,一部分是第三方依赖,会用 esbuild 进行依赖预构建,然后在浏览器进行强制缓存, Cache-Control: max-age=31536000,immutable,一旦命中,将不会发起请求 而另外一部分是源码, 会根据304 Not Modified 进行协商缓存

  • 强缓存
    【webpack】弄清楚webpack 与vite的区别

  • 协商缓存
    【webpack】弄清楚webpack 与vite的区别

不得不回顾下浏览器的缓存

浏览器缓存

强缓存

Cache-Control(Http1.1)、Expires(HTTP1.0),这两个可能会同时出现。同时出现的话,则 Cache-Control 会覆盖 Expires,这是因为 Expires 它是一个具体的时间,很可能就因客户端与服务端时间的不同,导致缓存失效。而 Cache-Control 是一个相对时间, 告诉服务器可以缓存多久,而且也具有比较多参数,详见 Cache-Control

【webpack】弄清楚webpack 与vite的区别

  • max-age: 设置多少秒后资源重新生成
  • no-store: 完全禁止缓存
  • no-cache: 在使用缓存前向服务器确认资源是否需要更新
  • 其余参数参考 Cache-Control

Vite 中设置 Cache-Control: max-age=31536000,immutable,这个设置资源可以在本地缓存并在接下来的31536000秒(大约一年)内使用,而无需向服务器发送请求来检查资源是否有更新。immutable:这个指令告诉浏览器,如果资源在max-age指定的时间内,那么即使用户进行了页面刷新,也不需要向服务器发送请求来验证资源是否有更新

源码位置

【webpack】弄清楚webpack 与vite的区别

协商缓存

  • Last-ModifiedIf-Modified-Since是一组HTTP头,服务器通过Last-Modified告诉浏览器资源的最后修改时间,浏览器下次请求时通过If-Modified-Since带上这个时间,服务器会判断资源是否有变化。

  • EtagIf-None-Match是另一组,Etag是资源的唯一标识,浏览器通过If-None-Match发送Etag值,服务器根据这个值判断资源是否变化

Etag/If-None-Match相比Last-Modified/If-Modified-Since更为精确,同时优先级也更高写

总结

Webpack 5 后有 MF, 也有持久化缓存,但是因为在开发的时候有 bundle的存在,Vite是完全得因浏览器完全支持ESM,所以就是在开发的时候不需要unbundle, 那么模块依赖、文件解析都交给了浏览器去处理,所以自然子第一次启动的话,会有白屏时间,之后因为浏览器缓存的缘故,所以在热更新上还是会有优势。但是Webpack有持久化缓存、模块联邦等这些,在大型项目上,与 Vite的体感是相差比较明显的,尤其是在冷启动下,但是小项目中, Webpack 用了模块联邦感觉也不是很明显

参考

漫谈构建工具(四): 为什么有人说 vite 快,有人却说 vite 慢

Modules

原文链接:https://juejin.cn/post/7317153361281925132 作者:南蓝

(0)
上一篇 2023年12月28日 上午10:42
下一篇 2023年12月28日 上午10:53

相关推荐

发表评论

登录后才能评论