构建工具知识储备

webpack和vite工程化的区别

解答思路一：

1. 两个都是构建工具，主要做的就是集成的工作，比如：支持模块化开发、处理代码兼容性（ts、less、scss等语法转换）、提高项目性能（压缩文件、代码分割）、优化项目开发体验（hmr热更新、开发服务器解决跨域的问题）可以让我们不用关心生产的代码，也不用关心代码在浏览器是怎么运行的，主要开发时写的爽就行。

2. webpack和vite最根本的区别是由于

        webpack支持多种模块化开发，所以他在运行之前需要分析依赖，即根据AST语法分析工具分析导入导出语句，将多种模块化语句转化为浏览器可以识别的代码。所以js代码多的时候很长时间才能打开开发服务器，热更新时由于依赖的文件也需要重新编译，需要的时间可能长达几秒钟

        vite则是基于es module开发的。当代浏览器天然支持es module。所以vite可以直接打开一个开发服务器，请求到哪个页面再进行编译。所以启动开发服务器速度特别快，同时如果改动了某个模块，仅需要浏览器重新请求该模块即可，热更新很快

解答思路二：

1. 打包编译的区别（开发环境）

     webpack会先打包，然后启动开发服务器，请求服务器时直接给予打包结果。

     vite则是直接启动开发服务器，请求哪个模块再对哪个模块进行实时编译。

2. 底层原理

        webpack基于nodejs构建，以毫秒计数；vite基于esbuild预构建依赖，esbuild是用go语言编写的，以纳秒计数

        由于现代浏览器本身就支持EsModule，会自动向依赖的Module发出请求。vite利用这一点，将开发环境下的模块文件，作为浏览器要执行的文件，而不是像webpack那样进行打包合并。由于vite启动时不需要打包，也就意味着不需要分析模块的依赖，不需要编译，因此启动速度非常快。

        当浏览器请求某个模块时，再根据需要对模块内容进行编译。这种按需动态编译的方式，极大的缩减了编译时间，项目越复杂，模块越多，vite的优势越明显。

        由于vite使用esmodule。所以代码中不可以使用commonjs

3. hmr热更新方面

        vite改动了一个模块后，仅需要让浏览器重新请求该模块即可

        webpack则需要将该模块的相关依赖模块全部编译一遍

4. 打包到生产环境时

        vite使用传统的rollup进行打包，因此。vite的主要优势在开发阶段