vite与webpack的区别

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

打包原理比较

原理图示

vite原理简述

vite的改进点

vite缺点

参考资料

打包原理比较

原理图示

vite

webpack

vite原理简述

声明 script 标签类型为 module

浏览器向服务器发起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')

劫持浏览器的http请求，在后端进行相应的处理将项目中使用的文件通过简单的分解与整合，然后再返回给浏览器(整个过程没有对文件进行打包编译)

vite的改进点

vite缺点

生态不及webpack，加载器、插件不够丰富

生产环境esbuild构建对于css和代码分割不够友好

没被大规模重度使用，会隐藏一些问题

参考资料

Vite 官方中文文档(https://cn.vitejs.dev/)

webpack

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。