事实问题：在浏览器反对ES模块之前，JavaScript并没有提供原生机制让开发者以模块化的形式进行开发。这也正是咱们对“打包”这个概念相熟的原型：应用工具抓取、解决并将咱们的源码模块串联成能够在浏览器运行的文件，例如：webpack、Rollop等工具，他们极大的改善了前端开发者的开发体验。
蕴含数千个模块的大型项目相当广泛。基于 JavaScript 开发的工具就会开始遇到性能瓶颈：通常须要很长时间（甚至是几分钟！）能力启动开发服务器，即便应用模块热替换（HMR），文件批改后的成果也须要几秒钟能力在浏览器中反映进去。如此周而复始，机灵的反馈会极大地影响开发者的开发效率和幸福感。
webpack的构建
咱们来看一下webpack的构建过程是怎么样的：
// 导入依赖
import Vue from 'vue'; // es6 module语法
const lodash = require('lodash'); // commonjs标准下面两种语法，在webpack中是非法的，然而浏览器并不意识，所以webpack会将上述的写法转换成浏览器意识的后果：
const Vue = webpack_require('vue');
const lodash = webpack_require('lodash');构建工具是运行在服务端的，利用webpack的AST形象语法分析工具，剖析出js文件有哪些导入和导出操作，并将这些操作进行转换。上面是webpack的编译过程：
// webpack编译
((function(modules){
function webpack_require(){}
// 入口是index.js
// 通过webpack的配置文件得来的：webpack.config.js ./src/index.js
modules[entry](webpack_require)
}),({
"./src/index.js" : (webpack_require) => {
const lodash = webpack_require("lodash");
const Vue = webpack_require("vue")
}
}))正是因为webpack反对多种模块化，所以他一开始就必须要对立模块化代码，也就意味着他须要将所有的依赖全副读取一遍。每次启动都会读取一遍，如果一个我的项目的模块越多，webpack读取的文件的事件就越多，那么构建工具启动的工夫就越慢。webpack:
vite的构建
vite旨在利用生态系统中的新进展解决上述问题：浏览器开始原生反对ES模块，且越来越多JavaScript工具应用编译型语言编写。vite是基于esmodules，认为vite不容许commonjs标准，所以vite绕过了webpack读取所有依赖的那一步，vite不会将所有的依赖读取一遍，也就晋升了运行效率。
在vite中，HMR是在原生ESM上执行的。当编辑一个文件时，vite只须要准确地使已编辑的模块与其最近的HMR边界之间的链失活（大多数时候只是模块自身），使得无论利用大小如何，HMR始终能放弃疾速更新。vite 同时利用 http 头来减速整个页面的从新加载（再次让浏览器为咱们做更多事件）：源码模块的申请会依据 304 Not Modified 进行协商缓存，而依赖模块申请则会通过 Cache-Control: max-age=31536000,immutable 进行强缓存，因而一旦被缓存它们将不须要再次申请。
HMR 即模块热替换（hot module replacement）的简称，它能够在利用运行的时候，不须要刷新页面，就能够间接替换、增删模块。
vite:
vite和webpack的区别：vite是基于es modules的，因为vite不容许commonjs的标准，所以vite就不会将所有的依赖读取一遍，也就晋升了运行效率；而webpack则更多的关注兼容性，webpack在启动的时候须要读取所有的依赖，对立模块化代码，再启动服务器；而vite则是间接启动服务器按需加载，未用到的模块不会加载。webpack更关注兼容性，vite关注浏览器端的开发体验。
vite脚手架和vite的区别
当咱们在终端输出 npm create vite的时候产生了以下变动：
1、帮咱们全局装置了一个脚手架：create-vite（vite脚手架）
2、间接运行create-vite bin目录下的一个配置文件
vite脚手架和vite的区别：create-vite内置了vite，也就是说create-vite会内置vite，不能说create-vite搭建的工程师vite做的，而应该说是create-vite内置了vite
vite脚手架帮咱们提供了一套预设，预设是怎么回事呢：
比方咱们买了一套房子，这套房子是一个毛坯房，房子买回来后，须要本人装修，装置管道、排线、买沙发、买家电、厨卫设计等等，所有事件都是本人实现的；
再比方咱们买了一套精装修的房子，房子内的所有家具、排线都曾经安排好了，能够间接拎包入住。
如果咱们本人搭建一个我的项目，须要下载vite、vue、post-css、less、babel、ts等
而create-vite就相当于一套精装修的房子，create-vite间接帮咱们装修好了我的项目，替咱们做好了：须要下载vite、vue、post-css、less、babel、ts等这些事件，并且vite还将这些配置批改到了最佳实际的配置。
这也就解释了为什么vite开箱即用的问题，开发人员不须要做任何额定的配置就能够应用vite来帮你解决构建工作。
发表回复