Vite 与 Webpack的区别

1.Webpack和Vite介绍？

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack
处理应用程序时，会帮我们处理模块间的各种依赖，然后将所有这些模块打包成一个或多个包（bundle）。而webpack其中一个核心就是让我们可能进行模块化开发，并且会帮助我们处理模块间的依赖关系。

主要有loader和plugin

loader:，我们也需要加载css、图片，也包括一些高级的将ES6转成ES5代码，将TypeScript转成ES5代码，将scss、less转成css，将.jsx、.vue文件转成js文件等等。它是一个转换器。
如：css-loader、style-loader，url-loader，file-loader（这两个都是为对图片进行base64编码，前者要求图片小于8Kb的,后者可大于8kb的，这样的话就不用去发起HTTP请求。直接通过编码的方式引入图片），label-loader(可将ES6转成ES5）
loader使用过程：
步骤一：通过npm安装需要使用的loader
步骤二：在webpack.config.js中的modules关键字下进行配置
plugin是插件，是对webpack本身的拓展，是一个拓展器，比如打包优化，文件压缩等。
如压缩js的插件uglifyjs-webpack-plugin，打包html的插件HtmlWebpackPlugin。
plugin的使用过程：
步骤一：通过npm安装需要使用的plugins(某些webpack已经内置的插件不需要安装)
步骤二：在webpack.config.js中的plugins中配置插件。

Vite 是 Vue 团队开发vue3的新一代前端开发与构建工具，Vite 不是基于 Webpack 开发的，为了解决服务启动慢的问题，Vite 通过一开始将应用中的模块区分为依赖和源码两类，改进了开发服务器启动时间。

极速的服务启动： 使用原生 ESM 文件，无需打包！
轻量快速的热重载：无论应用程序大小如何，都始终极快的模块热重载（HMR)
丰富的功能： 对 TypeScript、JSX、CSS 等支持开箱即用。

2.Vite有什么优势？

　　(1) vite开发服务器启动速度比webpack快。

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

　　　　由于vite启动的时候不需要打包 ，也就不需要分析模块依赖，编译，使用原生ES模块导入方式，所以启动速度非常快；

　　　　vite采用的是按需动态编译的模式，当浏览器请求需要的模块时，再对模块进行编译，这种处理模式极大的缩短了编译时间，当项目越大，文件越多，vite的开发时优势越明显

　　(2) vite的热更新比webpack快。vite在HRM方面（HMR是指当你对代码进行修改并保存后，webpack对代码重新打包，并将新的模块发送到浏览器端，浏览器通过替换旧的模块，在不刷新浏览器的前提下，就能够对应用进行更新），当改动了一个模块后，vite仅需让浏览器重新请求该模块即可，不像webpack那样需要把该模块的相关依赖模块全部编译一次，效率更高。

　　(3)由于现代浏览器本身就支持ES Module，会自动向依赖的Module发出请求。vite充分利用了这点，将开发环境下的模块文件，就作为浏览器要执行的文件，而不是像webpack那样进行打包合并

　　(4) vite 使用esbuild（Go编写）预构建依赖，比webpack的nodejs，快10-100倍　　

3.从Webpack方面能不能做一些编译构建方面的优化

　　(1) 多入口的情况下，使用CommonsChunkPlugin来提取公共代码

　　(2)通过externals配置来提取常用库

　　(3)使用Happypack实现多线程加速编译

　　(4)使用Tree-shaking和Scope Hoisting来剔除多余代码

　　(5) 使用 webpack-uglify-parallel来提升uglifyPlugin的压缩速度。原理上 webpack-uglify-parallel 采⽤了多核并⾏压缩来提升压缩速度

4.vite的劣势：

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

　　(2)打包到生产环境时，vite使用了传统的rollup(也可以自己手动安装webpack来)进行打包

　　(3)项目的开发浏览器要支持ESmodule， 而且不能识别CommonJS语法

5.最后

Vue 作者尤雨溪讲过有关 Vite 的几点：

Vite 是新一代前端开发构建工具。Vue 官方 Vue 3.0 工具链全面默认推荐 Vite
vite 与 webpack 两者定位不同。webpack 是一个纯打包工具，vite 是更上层的工具链解决方案，类似（webpack + web 常用配置 + webpack-dev-server）
Vite 目前 npm 月下载量过百万，已经不再是小众工具，而是一颗冉冉升起的新星。
相信Vite将逐渐成为新的前端开发构建工具。（PS:之后继续分享vue3+vite项目实例）