webpack拓展篇（六十九）：vite 的构建原理（完结）

Posted 2022-09-05 凯小默

说明

玩转 webpack 学习笔记

Vite 构建速度快的原因

预构建使用 ESBuild (冷启动快的原因) ：https://github.com/evanw/esbuild

因为 esbuild 里面使用的是 Golang 语言去进行打包，它是静态语言

Vite 打包流程

创建构建服务

文件路径： src/node/server/index.ts

静态文件托管服务

文件路径：src/node/server/index.ts

重写模块路径

文件路径： src/node/server/index.ts

文件路径：src/node/server/serverPluginModuleRewrite.ts

对于 bare import，把模块名替换为这个模块的 entry path，并在 path 的开头补上一个 /@modules 的标识符。

如: import React from "/@modules/@pika/react/source.development.js"

相对路径转绝对路径，方便浏览器请求。

补齐文件扩展名和经常被省略的 index.xxx

如：import a from '/src/a/index.js'

给非 js 类型( js 类型：如 js(x)/ts(x)/vue)的文件地址加上一个叫 "import" 的 query 参数。

给 hmr 相关的请求地址添加时间戳，避免缓存。

如: import '/src/App.jsx?t=1599124870589'

静态资源打包策略

浏览器不支持 JS 中直接写 import CSS、图片、JSON 等语法。.

webpack loader 的处理策略:

• CSS：转换成 js 的模块，执行模块会在 DOM 中创建 <style> 标签并且插入CSS内容
• 图片：转换成图片路径
• JSON：转化成 js 模块, default export = json

vue 脚本打包策略

遇到 .vue 文件

• 获取 Script 内容
• 如果有 style 就发送请求获取 style 的部分
• 发送请求获取 template 的部分
• 进行渲染

CSS 资源打包策略

• 将 CSS 源码加工成 JS 模块
• updateStyle 会通过 CSS Style Shee API 后者直接创建 <style> 标签
• 将 CSS 代码插入到 DOM 中
• 如果开启了CSS Module，则直接导出成一个对象，否则导出 CSS 代码

模板打包策略

@vue/compiler-dom 编译 template，然后返回给浏览器