每次用vite创建项目秒建好,前几天用vue-cli创建了一个项目,足足等了我一分钟,那为什么用 vite 比 webpack 要快呢,这篇文章带你梳理清楚它们的原理及不同之处!文章有一点长,看完绝对有收获!
上篇《尤雨溪是个恶魔,Vite 三天 10 更》谈到了 Webpack 这一系列打包工具出现的原因。这些工具的出现是为了解决 ES Modules 模块系统本身的环境兼容问题、以及零散的模块文件导致的频繁网络请求发送和模块化发散的问题等等。
接下来,由于我们已经删除了需要 babel 本身的 @vue/cli-plugin-babel 依赖项,我们只需要从package.json 中删除其他几个 babel 相关的依赖项。虽然这可行,但应尽可能避免。
Vite 同时提供了对 .scss,.sass,.less,.styl 和 .stylus 文件的内置支持,仅需安装相应的预处理器就可以了:感觉这块要比 Webpack 简单的多,Webpack 需要给不同类型的文件配置不同的 loader 去处理,而 Vite 内部直接帮我们配置好了。
Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。vue-cli 是 Vue 早期推出的一款脚手架,使用 webpack 创建 Vue 项目,可以选择安装需要的各种插件,比如 Vuex、VueRouter等。
vite 是尤雨溪随着vue3正式版一起发布的一个工具,所以 vite 只提供了 vue3 的项目搭建方法,没有 vue2.0 搭建方式。webpack 使用的是 node.js 去实现的,而 vite 使用的是esbuild预构建依赖。
早在 2018 年, Firefox 60 发布时默认启用了 ECMAScript 2015 的 Module 。该模板拉入了 react-refresh、Prettier、Chai 和 React Testing Library ,总体的 Node 依赖包重达 80MB 。