前端打包工具

为什么需要打包工具

开发时我们会用到 vue/react 等框架、ES6 模块化语法、less/sass 等 css 预处理器等语法，但这些语法必须经过编译后形成能被浏览器识别的js、css等语法才能在浏览器运行。
同时打包工具还能帮助我们压缩代码、做兼容处理、提高代码性能等。

常见的打包工具：

• Webpack
• Vite
• Rollup
• Gulp
• ...

Webpack

Vite

两者的区别

在开发环境下：
webpack 会将资源进行打包，然后再启动服务器，所以请求的时候会直接给予打包的结果。
而 vite 则是先启动服务器，当发起请求时，再对请求的模块进行实时编译。
所以 vite 的启动速度会快很多，同时由于某个模块更改时，只需要把该模块相关依赖重新编译即可，当模块越复杂时，优势越明显。

当打包到生产环境时：
vite 使用传统的 rollup 打包，所以 vite 的主要优势在于开发环境下