vite和webpack的区别和作用

前言

Vite 和 Webpack 都是现代化的前端构建工具，它们可以帮助开发者优化前端项目的构建和性能。虽然它们的目标是相似的，但它们在设计和实现方面有许多不同之处。

一、Vite详解和作用

vite 是什么

vite —— 一个由 vue 作者尤雨溪开发的 web 开发工具。

Vite，一个基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。同时不仅有 Vue 文件支持，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢。针对生产环境则可以把同一份代码用 rollup 打。虽然现在还比较粗糙，但这个方向我觉得是有潜力的，做得好可以彻底解决改一行代码等半天热更新的问题。

它具有以下特点：

• 快速的冷启动
• 即时的模块热更新
• 真正的按需编译

  从上述看出vite 主要特点是基于浏览器 native 的 ES module (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) 来开发，省略打包这个步骤，因为需要什么资源直接在浏览器里引入即可

  有趣的是 vite 算是革了 webpack 的命了(生产环境用 rollup)，所以 webpack 的开发者直接喊大哥了

  总的来说：vite主要解决了现有工具（如webpack、rollup）在大型项目开发过程中存在的启动慢、热更新慢等问题。vite致力于为现代前端工作流提供一个更快、更轻的解决方案。

  vite的构建原理

  Vite 则是一种基于浏览器原生 ES 模块解析的构建工具，它通过在服务器端搭建开发环境，在浏览器中使用原生 ES 模块的方式实现了快速的开发体验。Vite 的主要特点是支持快速的开发反应和打包速度快，但是在复杂的构建场景下可能会受到限制。

  二、webpack详解和作用

  webpack是什么

  webpack是一个静态模块打包器，可以把各种资源如JavaScript、CSS、图片等都视为模块，然后将这些模块打包成一份或多份优化的资源。webpack提供了丰富的API和生态，用户可以通过插件和loader来扩展webpack的功能。

  webpack通过一种叫做loader的机制来处理非JavaScript类型的文件，并且可以把这些文件打包成合适的格式供浏览器使用。除此之外，webpack还具有代码拆分、优化、模块热替换等强大功能。

  比如在一个React项目中，我们可以使用Babel Loader把JSX和ES6语法转换为浏览器可识别的JavaScript语法，使用CSS Loader和Style Loader来处理CSS文件，使用File Loader来处理图片等文件。

  无论是在开发环境中进行模块热替换，还是在生产环境中进行代码拆分和优化，webpack都能够很好的完成任务，它在前端构建工具中有着广泛的应用。

  webpack的构建原理

  Webpack 是一个静态模块打包器，通过对项目中的 JavaScript、CSS、图片等文件进行分析，生成对应的静态资源，并且可以通过一些插件和加载器来实现各种功能。Webpack 的主要特点是支持各种复杂的构建场景，例如代码分割、按需加载等，但也因此导致配置复杂，打包速度较慢。

  二者区别

  vite和webpack的区别：

  1. 基础概念不同
  2. 编译方式不同；
  3. 开发效率不同；
  4. 扩展性不同；
  5. 应用场景不同。

  Webpack：将所有的模块提前编译、打包进 bundle 中，不管这个模块是否被用到，随着项目越来越大，打包启动的速度自然越来越慢。

  使用webpack打包模式

  

  Vite：瞬间开启一个服务，并不会先编译所有文件，当浏览器用到某个文件时，Vite 服务会收到请求然后编译后响应到客户端。

  使用vite打包模式

  

  vite的打包模式是先开启服务，再根据我们的请求进行一个相应的打包编译。因此打包速度特别快，类似于实现了按需导入，不需要使用的文件不进行导入。

  总结：

  总的来说，vite以其更快的编译速度和更低的内存占用率，给前端开发带来了全新的体验，而webpack凭借其高度的自定义性和成熟的生态，仍是前端构建工具的重要选择。具体情况根据我们项目开发需求来做决定。

  参考文章：https://worktile.com/kb/p/53689