了解webpack和vite | 青训营笔记

这是我参与「第四届青训营」笔记创作活动的的第13天，今天的笔记是自己结合各个老师的教导与分析对webpack和vite观点和知识归纳。

Webpack

1. Webpack 基本功能

• 开发模式：可以编译 ES Module 语法
• 生产模式：可以编译 ES Module 语法，压缩 js 代码

2. Webpack 配置文件 5 个核心概念

   • entry
   • output
   • loader
   • plugins
   • mode

• devServer 配置

3. Webpack 脚本指令用法

• webpack 直接打包输出
• webpack serve 启动开发服务器，内存编译打包没有输出

4. 使用 HotModuleReplacement 让开发时只重新编译打包更新变化了的代码，不变的代码使用缓存，从而使更新速度更快。
5. 使用 Tree Shaking 剔除了没有使用的多余代码，让代码体积更小

初次之外，我在课外还学习到了其他很有意思并且非常好用的配置方法，详情见：xxpromise.gitee.io/webpack5-do… 。

Vite

对于Vite，我找到了范文杰老师的一篇文章《Vite 的好与坏》，让我对Vite有了新的理解。 首先我选取了几个我认为最优于webpack的点（Vite是什么并且其优点）：

• 基于 esbuild 实现的极速开发体验

• 预编译：npm 包这类基本不会变化的模块，使用 Esbuild 在 预构建 阶段先打包整理好，减少 http 请求数

• 按需编译：用户代码这一类频繁变动的模块，直到被使用时才会执行编译操作

• 客户端强缓存：请求过的模块会被以 http 头 max-age=31536000,immutable 设置为强缓存，如果模块发生变化则用附加的版本 query 使其失效

• 产物优化：相比于 Webpack ，Vite 直接锚定高版本浏览器，不需要在 build 产物中插入过多运行时与模板代码

• 内置更好的分包实现：不需要用户干预，默认启用一系列智能分包规则，尽可能减少模块的重复打包 其次，如何使用：

1. npm i -g pnpm
2. pnpm create vite（此处可以选择通过哪种框架进行开发）
3. pnpm install
4. npm run dev

用后感

通过对这两只构建工具的简单使用之后

首先感觉到的是，Vite更加的简单（配置的代码量比Webpack简洁太多太多了，上图！）

显而易见，图一的webpack配置文件的代码量多得多😥😥😥

其次就是快！！！ 在范文杰老师文章的Vite优势中说明了为什么Vite那么快，不试不知道，原来是真的非常快！虽然我只是在小demo里面跑了一下，但是可以感觉得出Webpack有点小题大做的感觉。