Vite 特性和部分源码解析

点选上方“后端控制技术混合型”，优先选择“标为隆哥蒙”第三天数高度关注控制技术蔬果！

Vite 的优点

Vite 的主要就优点就是 Bundleless。如前所述应用领域程序开始原生植物的全力支持 JavaScript 组件功能 (https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Modules?fileGuid=DDr3GGh6QRvQgWQC)，JavaScript 组件倚赖 import 和 export 的优点，现阶段非主流应用领域程序基本上都全力支持；

想查阅具体内容全力支持的版能 点选这儿 (https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Modules?fileGuid=DDr3GGh6QRvQgWQC)；

那这有什么竞争优势呢？

装箱是合作开发人员借助装箱辅助工具将应用领域各组件子集在一同逐步形成 bundle，以很大准则加载组件的标识符，以期在不全力支持组件化的应用领域程序里采用，因此能减少 http 允诺的数目。但只不过在邻近地区合作开发操作过程中装箱反倒减少了我们摸查难题的技术难度，减少了积极响应时数，Vite 在邻近地区开发指示中去除装箱关键步骤，进而延长构筑时数。

为的是减少 bundle 大小不一，通常会想按需加载，主要就有三种形式：

而 Vite 的形式更加间接，它只在某一组件被 import 的这时候静态的加载它，同时实现了或者说的按需加载，减少了加载文档的表面积，延长了时数；

右图是 Vite 在合作开发自然环境运转时加载文档的市场主体业务流程。

Vite 部份源标识符导出

|-CHANGELOG.md

|-LICENSE.md

|-README.md

|-bin

|  |-openChrome.applescript

|  |-vite.js

|-client.d.ts

|-package.json

|-rollup.config.js #装箱配置文档

|-scripts

|  |-patchTypes.js

|-src

|  |-client #客户端

|  |  |-client.ts

|  |  |-env.ts

|  |  |-overlay.ts

|  |  |-tsconfig.json

|  |-node #服务端

|  |  |-build.ts

|  |  |-cli.ts #指示入口文档

|  |  |-config.ts

|  |  |-constants.ts #常量

|  |  |-importGlob.ts

|  |  |-index.ts

|  |  |-logger.ts

|  |  |-optimizer

|  |  |  |-esbuildDepPlugin.ts

|  |  |  |-index.ts

|  |  |  |-registerMissing.ts

|  |  |  |-scan.ts

|  |  |-plugin.ts #rollup 插件

|  |  |-plugins   #插件相关文档

|  |  |  |-asset.ts

|  |  |  |-clientInjections.ts

|  |  |  |-css.ts

|  |  |  |-esbuild.ts

|  |  |  |-html.ts

|  |  |  |-index.ts 

|  |  |  |-…

|  |  |-preview.ts

|  |  |-server

|  |  |  |-hmr.ts #热更新

|  |  |  |-http.ts

|  |  |  |-index.ts

|  |  |  |-middlewares #中间件

|  |  |  |  |-…

|  |  |  |-moduleGraph.ts #组件间关系组装(树形)

|  |  |  |-openBrowser.ts #打开应用领域程序

|  |  |  |-pluginContainer.ts

|  |  |  |-send.ts

|  |  |  |-sourcemap.ts

|  |  |  |-transformRequest.ts

|  |  |  |-ws.ts

|  |  |-ssr

|  |  |  |-__tests__

|  |  |  |  |-ssrTransform.spec.ts

|  |  |  |-ssrExternal.ts

|  |  |  |-ssrManifestPlugin.ts

|  |  |  |-ssrModuleLoader.ts

|  |  |  |-ssrStacktrace.ts

|  |  |  |-ssrTransform.ts

|  |  |-tsconfig.json

|  |  |-utils.ts

|-tsconfig.base.json

|-types

|  |-…                  

从入口文档 cli.ts，能看到三个指示对应了 3 个核心的文件&方法；

文档路径：./server/index.ts；

主要就方法：createServer；

主要就功能：项目的邻近地区合作开发指示，如前所述 httpServer 启动服务，Vite 通过对允诺路径的劫

项目源标识符如下：

;

;

经服务端重写后，node_modules 文档夹下的三方包标识符路径也会被拼接完整。

; 

];

;

2. build 指示 文档路径：./build.ts；

主要就方法：build；

主要就功能：采用 rollup 装箱校对

3. optimize 指示

文档路径：./optimizer/index.ts；

主要就方法：optimizeDeps；

主要就功能：主要就针对第三方包，Vite 在执行 runOptimize 的这时候中会采用 rollup 对三方包重新校对，将校对成符合 esm 组件规范的新的包放入 node_modules 下的 .vite 中，然后配合 resolver 对三方包的导入进行处理：采用校对后的包内容代替原来包的内容，这样就解决了 Vite 中不能采用 cjs 包的难题。

下面是 .vite 文档夹中的 _metadata.json 文档，它在预校对的操作过程中生成，罗列了所有被预校对完成的文档及其路径。例如：

{

,

,

: {

: {

,

,

    },

: {

,

,

    },

: {

,

,

    },

    ……

    }

  }

}

预构筑 (https://cn.vitejs.dev/guide/dep-pre-bundling.html?fileGuid=DDr3GGh6QRvQgWQC) 是用来提升页面重载速度，它将 CommonJS、UMD 等转换为 ESM 格式。预构筑这一步由 esbuild (http://esbuild.github.io/?fileGuid=DDr3GGh6QRvQgWQC) 执行，这使得 Vite 的冷启动天数比任何如前所述 JavaScript 的装箱程序都要快得多。

为什么 ESbuild 会更快？

重写导入为合法的 URL，例如 /node_modules/.vite/my-dep.js?v=f3sf2ebd 以期应用领域程序能够正确导入它们

热更新市场主体业务流程如下：

下面是服务端热更新的核心 hmr.ts 中的部份判断逻辑；

如果配置文档或者自然环境文档发生修改时，会触发服务重启，才能让配置生效。

)) {

)

  config.logger.info(

),

 }

  )

 restartServer(server)

}

html 文档更新时，将会触发页面的重新加载。

) +         chalk.dim(shortFile), {

,

  })

  ws.send({

,

: config.server.middlewareMode

+ normalizePath(path.relative(config.root, file))

  })

 {

)

}

Vue 等文档更新时，都会进入 updateModules 方法，正常情况下只会触发 update，同时实现热更新，热替换；

{

 updates: Update[] = []

()

 modules) {

<{

: ModuleNode

: ModuleNode

    }>()

invalidate(mod, timestamp, invalidatedModules)

hasDeadEnd = propagateUpdate(mod, timestamp, boundaries)

 (hasDeadEnd) {

) + chalk.dim(file), {

,

      })

      ws.send({

      })

    }

    updates.push(

 ({

],

timestamp,

: boundary.url,

: acceptedVia.url

      }))

    )

  }

  config.logger.info(

    updates

) + chalk.dim(path))

),

 }

  )

  ws.send({

,

    updates

  })

}

上面标识符中的 modules 是热更新时须要执行的各插件

config.plugins) {

 (plugin.handleHotUpdate) {

 plugin.handleHotUpdate(hmrContext)

(filteredModules) {

      hmrContext.modules = filteredModules

    }

  }

}

Vite 会把组件的依赖关系组合成 moduleGraph，它的结构类似树形，热更新中判断哪些文档须要更新也会依赖 moduleGraph；它的文档内容大致如下：

 ModuleNode {

,

,

 {},

 {

    ModuleNode {

,

,

      ……

,

,

    },

    ModuleNode {

,

,

……

,

    },

    ModuleNode {

,

,

],

 {},

 {},

,

],

,

,

,

,

    },

    ……

},

 {},

,

: {

 +

 +

 +

 + …,

,

  },

,

,

,

,

}

原有项目切换

最后我们来看下如何采用 Vite 去装箱一个旧的 Vue 项目；

首先我们须要升级 Vue3

npm install vue@next

并为项目添加 Vite 配置文档，在根目录下创建 vite.config.js，并为它添加一些基础的配置。

// vite.config.js

// vite2.1.5

);

;

 default {

  // 配置选项

  resolve: {

: {

)

    },

  },

  plugins: [vue()],

};

提及的第三方组件库可能也会须要升级，例如：升 element-ui 至 element-plus

npm install element-plus

Vue3 在 import 时，需采用 createApp 方法进行初始化

;

;

app = createApp(App);

 {

  ElInput,

  ElLoading,

;

app.use(ElButton);

app.use(ElLoading);

……

到这儿就能将项目运转起来了。注意：Vite 官方不允许省略 .vue 后缀，否则就会报错；

. Does the file exist?

  |  

;

;

最后我们来对比一下该项目三种构筑形式天数的对比；

Webpack 冷启动，耗时 7513ms：

⚠ ｢wdm｣: Hash: 1ad1dd54289cfad8ecbe

Version: webpack 4.46.0

Time: 7513ms

Built at: 2021-05-24 13:59:35

相同项目 Vite 冷启动，耗时 924ms：

> vite

Pre-bundling dependencies:

  vue

element-plus

  @zcy/zcy-request

  element-plus/lib/utils/dom

(this will be run only when your dependencies or config have changed)

  vite v2.3.3 dev server running at:

  > Local: http://localhost:3000/

> Network: use `–host` to expose

 924ms.

二次启动（预校对的依赖已存在），耗时 407ms；

> vite

  vite v2.3.3 dev server running at:

> Local: http://localhost:3000/

  > Network: use `–host` to expose

 407ms.

总结

采用 Vite 进行邻近地区服务启动和热更新都会有明显的提效，至于校对装箱环节的差异点有哪些？效果如何？你们还踩过哪些坑？留言告诉我吧。

推荐阅读：

What are CJS, AMD, UMD, and ESM in Javascript?(https://dev.to/iggredible/what-the-heck-are-cjs-amd-umd-and-esm-ikm?fileGuid=DDr3GGh6QRvQgWQC)