关于前端:vite相较于webpack的优势

事实问题 ：在浏览器反对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 来帮你解决构建工作。