新朝旧将 vite 和 webpack 煮酒论英雄

2022 年 6 月 29 日
本文字数：3109 字
阅读完需：约 10 分钟

我们见证了 webpack、Rollup 和 Parcel 等工具的变迁，它们极大地改善了前端开发者的开发体验。

但当我们开始构建越来越大型的应用时，通常需要很长时间才能启动开发服务器，文件修改后的效果也需要几秒钟才能在浏览器中反映出来。如此循环往复，迟钝的反馈会极大地影响开发者的开发效率。

Vite 旨在利用生态系统中的新进展解决上述问题：浏览器开始原生支持 ES 模块，且越来越多 JavaScript 工具使用编译型语言编写。

一、Vite 是什么？

Vite（法语意思是 “快”）是一种全新的前端构建工具。可以把它理解为一个开箱即用的开发服务器 + 打包工具的组合，类似 webpack + webpack-dev-server，但是更轻更快。Vite 利用浏览器原生的 ES 模块支持和用编译到原生的语言开发的工具（如 esbuild）来提供一个快速且现代的开发体验。

二、Vite 优点是什么

💡 极速的服务启动使用原生 ESM 文件，无需打包! ⚡️ 轻量快速的热重载无论应用程序大小如何，都始终极快的模块热重载（HMR） 🛠️ 丰富的功能对 TypeScript、JSX、CSS 等支持开箱即用 📦 优化的构建可选 “多页应用” 或 “库” 模式的预配置 Rollup 构建 🔩 通用的插件在开发和构建之间共享 Rollup-superset 插件接口 🔑 完全类型化的 API 灵活的 API 和完整 TypeScript 类型

三、Vite 与 Webpack 对比

Webpack 和 Vite 同是打包工具，有什么区别呢？

Webpack

Webpack 会遍历你的应用程序中的所有文件，并启动一个开发服务器，然后将整个代码渲染到开发环境中。

webpack 从一个 entry.js 文件开始，将其依赖的所有 js 或者其他 assets 通过 loader 打包成一个文件，随后这个打包后的文件将被从 server 传递到客户端浏览器运行。
因为这样的处理规则，当保存文件时，整个 JavaScript 包将由 Webpack 重新构建，这就是为什么更改可能需要长达 10 秒才能反映在浏览器中，更新速度会随着应用体积增长而直线下降。

Vite

Vite 的工作方式不同，它不会遍历整个应用程序，Vite 只是转换当时正在使用的文件/模块。

Vite 的核心理念：非捆绑开发构建
Vite 的核心思想：浏览器请求它时，使用 ES 模块转换并提供一段应用程序代码。
开始开发构建时，Vite 首先将 JavaScript 模块分为两类：依赖模块和源码模块。
依赖项模块是第三方依赖的代码，从 node_modules 文件夹中导入的 JavaScript 模块。这些模块将使用 esbuild 进行处理和捆绑，esbuild 是一个用 Go 编写的 JavaScript 打包工具，执行速度比 Webpack 快 10-100 倍。
源码模块是源代码，即业务代码，通常涉及特定库的扩展，如：.jsx、.vue、.scss 文件。
它使用基于路由的代码拆分来了解代码的哪些部分实际需要加载，因此，它不必重新打包所有内容。
它还使用现代浏览器中的原生 ES 模块支持来交付代码，这让浏览器可以在开发中承担打包工作。
在生产方面，虽然现在所有主流浏览器都支持原生 ES 模块，但它实现了诸如 tree-shaking、延迟加载和通用块拆分等性能优化技术，仍然比非打包应用程序带来更好的整体性能。出于这个原因，Vite 附带了一个预先配置的 build 命令，该命令使用 Rollup 打包来打包和实现各种性能优化。

Webpack 这样的基于打包器的工作流必须在单个浏览器请求之前处理整个 JavaScript 模块，但 Vite 只在单个浏览器请求之前处理依赖模块。这就是为什么 Vite 能够比 Webpack 更快地处理开发构建。

四、Storybook 对 Webpack 和 Vite 的测试

Storybook 是行业标准的 UI 组件工作室。全球数以千计的应用程序和设计系统团队大部分时间都在 Storybook 中工作——构建、记录和测试他们的 UI 组件。因此，Storybook 需要尽可能快地运行项目。Webpack 是 Storybook 的默认构建器。

为了比较这 Vite 和 Webpack 两个构建器的性能，他们选择针对 Carbon Design System 运行基准测试。

本文从原文中截取了 Webpack 5.0 和 Vite 的差异，还有 Webpack 4/Webpack 5(lc/cs)/Vite(cs)的差异对比，可以到原文中详细阅读~

对比项如下：

以上是 Storybook 对项目使用 Vite 和 Webpack 不同构建工具的性能的差异测试，可以看出来 Vite 的真正闪光点在于，开发时浏览器接近实时反馈的效果。

五、Vite 入门

我们浅显的学习一下 Vite 和 Vue3.0 创建一个项目，Vite 支持流行的前端库，包括 React、Vue 和 Svelte。

vite+ts+vue3，执行以下命令

npm init @vitejs/app vite-test-app --template vue-ts

复制代码

配置路由

npm install vue-router@4 --save

复制代码

在 src 下新建 router 目录，新建 index.ts 文件

import {createRouter, createWebHashHistory} from 'vue-router';
const routes = [    {        path: '/',        name: 'home',        component: () => import('@/views/Home.vue')    },    {        path: '/:pathMatch(.*)*',        name: '404',        redirect: '/'    },]const router = createRouter({    history: createWebHashHistory(),    routes});router.beforeEach((to, from, next) => {    //如果设置标题就显示，没设置使用默认    if (null != to.meta && null != to.meta.title && '' !== to.meta.title) {        document.title = to.meta.title || import.meta.env.VITE_APP_TITLE;    } else {        document.title = import.meta.env.VITE_APP_TITLE;    }    //正常放行    next();});
export default router;

复制代码

main.ts 挂载路由

import { createApp } from 'vue'import App from './App.vue'import router from "./router";createApp(App).use(router).mount('#app')

复制代码

配置数据中心 vuex

npm i vuex@next --save

复制代码

配置网络请求 axios 在 src 创建 utils 文件夹,并在 utils 下创建 axios.ts

npm i -s axios

复制代码

配置请求代理 vite.config.ts

import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import path from 'path';
export default defineConfig({  plugins: [vue()],  base:"./",//打包路径  resolve: {    alias:{      '@': path.resolve(__dirname, './src')//设置别名    }  },  server: {    port: 80,    host: '0.0.0.0',    https: false,  },})

复制代码

页面展示：

以上，一个 vite+ts+vue3 最基本的移动端开发配置完成。

总结

Vite 是新一代的 JavaScript 构建工具，通过使用基于 ESM 的工作流程进行本地开发，确保开发服务器即使在处理大型 JavaScript 应用程序时也能保持快速。
Vite 还提供了一个合理的生产构建配置，可以处理基于库的语法，如 JSX、Vue 和 TypeScript。
通过在底层使用 Rollup，确保生产构建实现性能优化技术，如 tree-shaking、延迟加载和常见的块拆分。

虽然 Webpack 仍然是许多流行应用程序的默认 JavaScript 构建工具，有很多扩展和一个非常庞大的开发者社区，鉴于社区的积极反馈，Vite 很有可能成为未来最受欢迎的选择，但是在社区可以中看到很多新库或框架，有多快或多好并不重要，重要的是社区如何采用它。

欢迎广大读者关注公众号，我们会常推技术文章和大家分享，欢迎大家留言，小编后续会继续改进，感谢大家~

参考文献：

https://cn.vitejs.dev/

https://webpack.docschina.org/concepts/

https://betterprogramming.pub/is-vite-the-killer-of-webpack-a515d9e77a4

https://blog.bitsrc.io/vite-is-better-than-webpack-d5dd59610d56

https://storybook.js.org/blog/storybook-performance-from-webpack-to-vite/

https://gitee.com/WeiziPlus/muteki-vite

https://radixweb.com/blog/webpack-vs-vitejs-comparison

https://zhuanlan.zhihu.com/p/351888882

> 转转研发中心及业界小伙伴们的技术学习交流平台，定期分享一线的实战经验及业界前沿的技术话题。> 关注公众号「转转技术」（综合性）、「大转转FE」（专注于FE）、「转转QA」（专注于QA），更多干货实践，欢迎交流分享~