深度分析前端构建工具：Vite2 v.s Snowpack3 v.s. Webpack5

import {command as buildCommand} from './commands/build';
export async function cli(args: string[]) {  const cliFlags = yargs(args, {    array: ['install', 'env', 'exclude', 'external']  }) as CLIFlags;
  if (cmd === 'build') {    await buildCommand(commandOptions);    return process.exit(0);  }} 

export async function build(commandOptions: CommandOptions): Promise<SnowpackBuildResult> {  // 读取config代码  // ...  for (const runPlugin of config.plugins) {    if (runPlugin.run) {      // 执行插件    }  }    // 将 `import.meta.env` 的内容写入文件  await fs.writeFile(    path.join(internalFilESbuildLoc, 'env.js'),    generateEnvModule({mode: 'production', isSSR}),  );
  // 如果 HMR，则加载 hmr 工具文件  if (getIsHmrEnabled(config)) {    await fs.writeFile(path.resolve(internalFilESbuildLoc, 'hmr-client.js'), HMR_CLIENT_CODE);    await fs.writeFile(      path.resolve(internalFilESbuildLoc, 'hmr-error-overlay.js'),      HMR_OVERLAY_CODE,    );    hmrEngine = new EsmHmrEngine({port: config.devOptions.hmrPort});  }   // 开始构建源文件  logger.info(colors.yellow('! building source files...'));  const buildStart = performance.now();  const buildPipelineFiles: Record<string, FileBuilder> = {};
  // 根据主 buildPipelineFiles 列表安装所有需要的依赖项，对应下面第三部  async function installDependencies() {    const scannedFiles = Object.values(buildPipelineFiles)      .map((f) => Object.values(f.filesToResolve))      .reduce((flat, item) => flat.concat(item), []);
    // 指定安装的目标文件夹    const installDest = path.join(buildDirectoryLoc, config.buildOptions.metaUrlPath, 'pkg');
    // installOptimizedDependencies 方法调用了 esinstall 包，包内部调用了 rollup 进行模块分析及 commonjs 转 esm    const installResult = await installOptimizedDependencies(      scannedFiles,      installDest,      commandOptions,    );
    return installResult  }
  // 下面因代码繁多，仅展示源码中的注释  // 0. Find all source files.  // 1. Build all files for the first time, from source.  // 2. Install all dependencies. This gets us the import map we need to resolve imports.  // 3. Resolve all built file imports.  // 4. Write files to disk.  // 5. Optimize the build.
  // "--watch" mode - Start watching the file system.  // Defer "chokidar" loading to here, to reduce impact on overall startup time  logger.info(colors.cyan('watching for changes...'));  const chokidar = await import('chokidar');
  // 本地文件删除时清除 buildPipelineFiles 对应的文件  function onDeleteEvent(fileLoc: string) {    delete buildPipelineFiles[fileLoc];  }
  // 本地文件创建及修改时触发  async function onWatchEvent(fileLoc: string) {    // 1. Build the file.    // 2. Resolve any ESM imports. Handle new imports by triggering a re-install.    // 3. Write to disk. If any proxy imports are needed, write those as well.
    // 触发 HMR    if (hmrEngine) {      hmrEngine.broadcastMessage({type: 'reload'});    }  }
  // 创建文件监听器  const watcher = chokidar.watch(Object.keys(config.mount), {    ignored: config.exclude,    ignoreInitial: true,    persistent: true,    disableGlobbing: false,    useFsEvents: isFsEventsEnabled(),  });  watcher.on('add', (fileLoc) => onWatchEvent(fileLoc));  watcher.on('change', (fileLoc) => onWatchEvent(fileLoc));  watcher.on('unlink', (fileLoc) => onDeleteEvent(fileLoc));
  // 返回一些方法给 plugin 使用  return {    result: buildResultManifest,    onFileChange: (callback) => (onFileChangeCallback = callback),    async shutdown() {      await watcher.close();    },  };}
export async function command(commandOptions: CommandOptions) {  try {    await build(commandOptions);  } catch (err) {    logger.error(err.message);    logger.debug(err.stack);    process.exit(1);  }
  if (commandOptions.config.buildOptions.watch) {    // We intentionally never want to exit in watch mode!    return new Promise(() => {});  }} 

Entry ---> A ---> C 

Entry ---> (A + C) 

export async function createServer(  inlineConfig: InlineConfig = {}): Promise<ViteDevServer> {  // 获取 config  const config = await resolveConfig(inlineConfig, 'serve', 'development')  const root = config.root  const serverConfig = config.server || {}    // 判断是否是中间件模式  const middlewareMode = !!serverConfig.middlewareMode  const middlewares = connect() as Connect.Server    // 中间件模式不创建 http 服务，允许外部以中间件形式调用：https://Vitejs.dev/guide/api-javascript.html#using-the-Vite-server-as-a-middleware  const httpServer = middlewareMode    ? null    : await resolveHttpServer(serverConfig, middlewares)    // 创建 websocket 服务  const ws = createWebSocketServer(httpServer, config)    // 创建文件监听器  const { ignored = [], ...watchOptions } = serverConfig.watch || {}  const watcher = chokidar.watch(path.resolve(root), {    ignored: ['**/node_modules/**', '**/.git/**', ...ignored],    ignoreInitial: true,    ignorePermissionErrors: true,    ...watchOptions  }) as FSWatcher

  const plugins = config.plugins  const container = await createPluginContainer(config, watcher)  const moduleGraph = new ModuleGraph(container)  const closeHttpServer = createSeverCloseFn(httpServer)
  const server: ViteDevServer = {    // 前面定义的常量，包含：config、中间件、websocket、文件监听器、ESbuild 等  }
  // 监听进程关闭  process.once('SIGTERM', async () => {    try {      await server.close()    } finally {      process.exit(0)    }  })
  watcher.on('change', async (file) => {    file = normalizePath(file)
    // 文件更改时使模块图缓存无效    moduleGraph.onFileChange(file)
    if (serverConfig.hmr !== false) {      try {        // 大致逻辑是修改 env 文件时直接重启 server，根据 moduleGraph 精准刷新，必要时全部刷新        await handleHMRUpdate(file, server)      } catch (err) {        ws.send({          type: 'error',          err: prepareError(err)        })      }    }  })
  // 监听文件创建  watcher.on('add', (file) => {    handleFileAddUnlink(normalizePath(file), server)  })
  // 监听文件删除  watcher.on('unlink', (file) => {    handleFileAddUnlink(normalizePath(file), server, true)  })    // 挂载插件的服务配置钩子  const postHooks: ((() => void) | void)[] = []  for (const plugin of plugins) {    if (plugin.configureServer) {      postHooks.push(await plugin.configureServer(server))    }  }
  // 加载多个中间件，包含 cors、proxy、open-in-editor、静态文件服务等
  // 运行post钩子，在html中间件之前应用的，这样外部中间件就可以提供自定义内容取代 index.html  postHooks.forEach((fn) => fn && fn())
  if (!middlewareMode) {    // 转换 html    middlewares.use(indexHtmlMiddleware(server, plugins))    // 处理 404    middlewares.use((_, res) => {      res.statusCode = 404      res.end()    })  }
  // errorHandler 中间件  middlewares.use(errorMiddleware(server, middlewareMode))
  // 执行优化逻辑  const runOptimize = async () => {    if (config.optimizeCacheDir) {      // 将使用 ESbuild 将依赖打包并写入 node_modules/.Vite/xxx      await optimizeDeps(config)      // 更新 metadata 文件      const dataPath = path.resolve(config.optimizeCacheDir, 'metadata.json')      if (fs.existsSync(dataPath)) {        server._optimizeDepsMetadata = JSON.parse(          fs.readFileSync(dataPath, 'utf-8')        )      }    }  }
  if (!middlewareMode && httpServer) {    // 在服务器启动前覆盖listen方法并运行优化器    const listen = httpServer.listen.bind(httpServer)    httpServer.listen = (async (port: number, ...args: any[]) => {      await container.buildStart({})      await runOptimize()      return listen(port, ...args)    }) as any
    httpServer.once('listening', () => {      // 更新实际端口，因为这可能与初始端口不同      serverConfig.port = (httpServer.address() as AddressInfo).port    })  } else {    await runOptimize()  }
  // 最后返回服务  return server} 

<!DOCTYPE html><html lang="en">  <head>    <script type="module" src="/@Vite/client"></script>    <meta charset="UTF-8" />    <link rel="icon" href="/favicon.ico" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Vite App</title>  </head>  <body>    <div id="app"></div>    <script type="module" src="/src/main.js"></script>  </body></html> 

export function importAnalysisPlugin(config: ResolvedConfig): Plugin {  const clientPublicPath = path.posix.join(config.base, CLIENT_PUBLIC_PATH)  let server: ViteDevServer  return {    name: 'Vite:import-analysis',    configureServer(_server) {      server = _server    },    async transform(source, importer, ssr) { const rewriteStart = Date.now() // 使用 es-module-lexer 进行语法解析
      await init      let imports: ImportSpecifier[] = []      try {        imports = parseImports(source)[0]      } catch (e) {        const isVue = importer.endsWith('.vue')        const maybeJSX = !isVue && isJSRequest(importer)

        // 判断文件后缀给不同的提示信息        const msg = isVue          ? `Install @Vitejs/plugin-vue to handle .vue files.`          : maybeJSX          ? `If you are using JSX, make sure to name the file with the .jsx or .tsx extension.`          : `You may need to install appropriate plugins to handle the ${path.extname(              importer            )} file format.`        this.error(          `Failed to parse source for import analysis because the content ` +            `contains invalid JS syntax. ` +            msg,          e.idx        )      }
      // 将代码字符串取出      let s: MagicString | undefined      const str = () => s || (s = new MagicString(source))
      // 解析 env、glob 等并处理      // 转换 cjs 成 esm    }  }} 

// before- import { createApp } from 'vue'+ import { createApp } from '/node_modules/.Vite/vue.runtime.esm-bundler.js?v=d17c1aa4'import App from '/src/App.vue'
createApp(App).mount('#app') 

import { createHotContext as __Vite__createHotContext } from "/@Vite/client";import.meta.hot = __Vite__createHotContext("/src/App.vue");import HelloWorld from '/src/components/HelloWorld.vue'
const _sfc_main = {  expose: [],  setup(__props) {    return { HelloWorld }  }}
import {   createVNode as _createVNode,   Fragment as _Fragment,   openBlock as _openBlock,   createBlock as _createBlock } from "/node_modules/.Vite/vue.runtime.esm-bundler.js?v=d17c1aa4"
const _hoisted_1 = /*#__PURE__*/_createVNode("img", {  alt: "Vue logo",  src: "/src/assets/logo.png"}, null, -1 /* HOISTED */)
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {  return (_openBlock(), _createBlock(_Fragment, null, [    _hoisted_1,    _createVNode($setup["HelloWorld"], { msg: "Hello Vue 3 + Vite" })  ], 64 /* STABLE_FRAGMENT */))}
import "/src/App.vue?vue&type=style&index=0&lang.css"
_sfc_main.render = _sfc_render_sfc_main.__file = "/Users/orange/build/Vite-vue3/src/App.vue"export default _sfc_main_sfc_main.__hmrId = "7ba5bd90"typeof __VUE_HMR_RUNTIME__ !== 'undefined' && __VUE_HMR_RUNTIME__.createRecord(_sfc_main.__hmrId, _sfc_main)import.meta.hot.accept(({ default: updated, _rerender_only }) => {  if (_rerender_only) {    __VUE_HMR_RUNTIME__.rerender(updated.__hmrId, updated.render)  } else {    __VUE_HMR_RUNTIME__.reload(updated.__hmrId, updated)  }}) 

<--- Last few GCs --->[59757:0x103000000] 32063 ms: Mark-sweep 1393.5 (1477.7) -> 1393.5 (1477.7) MB, 109.0 / 0.0 ms  allocation failure GC in old space requested<--- JS stacktrace --->==== JS stack trace =========================================Security context: 0x24d9482a5ec1 <JSObject>... 

Webpack chunk asset optimization (92%) TerserPlugin