vite与webpack的区别

2021-05-27 08:55:17

记录一下vite构建工具与webpack的区别

打包原理比较

打包过程 原理
webpack 识别入口->逐层识别依赖->分析/转换/编译/输出代码->打包后的代码 逐级递归识别依赖,构建依赖图谱->转化AST语法树->处理代码->转换为浏览器可识别的代码
vite - 基于浏览器原生 ES module,利用浏览器解析 imports,服务器端按需编译返回

原理图示

vite webpack

vite原理简述

    1. 声明 script 标签类型为 module
    
    <script type="module" src="/src/main.js"></script>
    
    1. 浏览器向服务器发起GET
    
    // 请求main.js文件:
    http://localhost:3000/src/main.js
    
    // /src/main.js:
    import { createApp } from 'vue'
    import App from './App.vue'
    createApp(App).mount('#app')
    
    请求到main.js文件,检测内部含有import引入的包,会对内部的 import 引用发起 HTTP 请求获取模块的内容文件
    1. 劫持浏览器的http请求,在后端进行相应的处理将项目中使用的文件通过简单的分解与整合,然后再返回给浏览器(整个过程没有对文件进行打包编译)

vite的改进点

webpack缺点 vite改进点
服务器启动缓慢 将应用模块区分为依赖 和 源码 两类;使用esbuild构建;在浏览器请求源码时进行转换并按需提供源码
基于nodejs esbuild(Go 编写) 预构建依赖,比node快 10-100 倍
热更新效率低下;编辑单个文件会重新构建整个包;HMR 更新速度随规模增大下降 HMR基于原生 ESM 上,更新速度与应用规模无关;利用http2的缓存+压缩优势

vite缺点

  • 生态不及webpack,加载器、插件不够丰富
  • 生产环境esbuild构建对于css和代码分割不够友好
  • 没被大规模重度使用,会隐藏一些问题

参考资料

本文链接:
版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-ND 3.0 许可协议。可自由转载、引用,但需署名作者且注明文章出处。如转载至微信公众号,请在文末添加作者公众号二维码。

扫描下方二维码阅读当前文章

浏览器、微信扫码
微信小程序

评 论:

好文推荐
极客之路公众号
三百人技术交流群
探讨前端、小程序正逆向、爬虫...
学习交流&商务合作
微信情报 更多 >
    每天进步一点点~