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

    说明

    玩转 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 中创建