前端：一篇彻底搞懂Vite/Webpack(比较/区别)

文章目录

• • 一.Webpack
  • • 1. Webpack的HMR
    • 2. webpack-dev-server的热更新：
    • 3. 原理
  • 二.Vite
  • • 1. Vite2的HMR
    • 2. esbuild
    • 原理:

一.Webpack

1. Webpack的HMR

第一次冷启动慢的原因：
在之前的浏览器中没有模块化的设计，所以期望把所有源代码编译进一个 js 文件中提供给浏览器使用，所以在开发中当我们运行启动命令的时候，webpack 总是需要从入口文件去索引整个项目的文件，编译成一个或多个单独的 js 文件，即使采用了代码拆分，也需要一次生成所有路由下的编译后文件（这也是为什么代码拆分对开发模式性能没有帮助）。这也导致了服务启动时间随着项目复杂度而指数增长。

2. webpack-dev-server的热更新：

1. 与本地服务器建立「socket」连接，注册 hash 和 ok 两个事件，发生文件修改时，给客户端推送 hash 事件。客户端根据 hash 事件中返回的参数来拉取更新后的文件。
2. HotModuleReplacementPlugin 会在文件修改后，生成两个文件，用于被客户端拉取使用。

3. 原理

• 先转译打包，然后启动 dev server
• 热更新时，把改动过模块的相关依赖模块全部编译一次