是什么让尤大选择放弃Webpack?面向未来的前端构建工具 Vite

文章探讨了Vite和Webpack的全方位对比,指出Vite的快速启动、原生ESModule服务以及高效的HMR更新,是其优于Webpack的地方。尽管Vite在生态和生产构建方面仍有待完善,但在Vue3作者尤雨溪的推荐下,Vite有望成为前端构建的新宠。总结中提到,Webpack仍是前端工程化的重要角色,而Vite可以作为开发辅助工具。
摘要由CSDN通过智能技术生成

写在开头

前两天在知乎看到过一篇文章,大致意思是讲:字节跳动已经开始“弃用Webpack”,尝试在自研构建工具中使用类似Vite的ESmodule构建方式。

引起下方一大片焦虑:

  • Webpack是不是要被取代了?现在学Vite就行了吧
  • Webpack还没学会,就又来新的了!

甚至有人搬出了去年尤大所发的一个动态:再也回不去Webpack了。

在这里插入图片描述

PS:最近的vite比较火,而且发布了2.0版本,vue的作者尤雨溪也是在极力推荐

全方位对比vite和webpack

webpack打包过程

1.识别入口文件
2.通过逐层识别模块依赖。(Commonjs、amd或者es6的import,webpack都会对其进行分析。来获取代码的依赖)
3.webpack做的就是分析代码。转换代码,编译代码,输出代码
4.最终形成打包后的代码

webpack打包原理

1.先逐级递归识别依赖,构建依赖图谱
2.将代码转化成AST抽象语法树
3.在AST阶段中去处理代码
4.把AST抽象语法树变成浏览器可以识别的代码, 然后输出

重点:这里需要递归识别依赖,构建依赖图谱。图谱对象就是类似下面这种

{
    './app.js':
   {
    dependencies: {
    './test1.js': './test1.js' },
     code:
      '"use strict";\n\nvar _test = _interopRequireDefault(require("./test1.js"));\n\nfunction _interopRequireDefault(obj) {
    return obj && obj.</
  • 14
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 19
    评论
评论 19
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值