对vite的第一印象：快，非常快

本着对vite的兴趣，在阅读完玩具vite源码后，对vite的原理有了一个简单的理解：

  • 使用浏览器原生ESModule加载项目文件
  • 把需要加载的文件，转译成浏览器看得懂的js文件
  • 使用缓存机制，提升HMR速度

一、什么是原生ESModule？

1.解释

这是一个可以让HTML加载script标签时，使用ESModule的方式直接进行加载，例如：

  1. <script type="module">
  2.     import main from './main.js'
  3. </script>

2.为什么会快？

  • 浏览器在加载页面遇到原生ES模块时，会通过发送请求的方式导入模块。页面引入模块但未被加载时，这些模块将不会被导入

二、这个工具做了什么事情？

1.开发背景

在编写vue项目时，我们会需要经历以下步骤：

  • 引入vue，将vue挂载在html的一个节点中 ```javascript import Vue from ‘vue’ import App from ‘./test.vue’

new Vue({ render: h => h(App) }).$mount(‘#app’)

  1. 对于原生ESModule来说，import文件时，需要提供文件完整的URL路径，不能进行简写。
  3. - 编写vue文件
  4. ```vue
  5. <template>
  6.   ...
  7. </template>
  9. <script>
  10. export default {
  11.   ...
  12. }
  13. </script>
  15. <style scoped>
  16. ...
  17. </style>

对于浏览器来说，不支持解析vue文件，这样也就导致无法加载页面

工具需要解决的事情

  • 在不改变编写习惯的前提下，改变文件加载路径
  • 对vue文件进行转译

三、实现过程

在这个小工具中通过使用加载中间件拦截请求的方式进行文件的实时编译，这一文件存放在../bin/vue-dev-server.js中

  1. const express = require('express')
  2. const { vueMiddleware } = require('../middleware')
  4. const app = express()
  5. const root = process.cwd();
  7. // 最重要的一步
  8. app.use(vueMiddleware())
  10. app.use(express.static(root))
  12. app.listen(3000, () => {
  13.   console.log('server running at http://localhost:3000')
  14. })

最重要的中间件文件被放在了../middleware中

1.解析主逻辑

在这个中间件中，分别对.vue、.js、包含__modules三种类型的文件进行了不同的处理

  1. return async (req, res, next) => {
  2.     if (req.path.endsWith('.vue')) {      
  3.       // ...code 处理vue文件
  4.       }
  6.       send(res, out.code, 'application/javascript')
  7.     } else if (req.path.endsWith('.js')) {
  8.        // ...code 处理js文件
  9.       }
  11.       send(res, out, 'application/javascript')
  12.     } else if (req.path.startsWith('/__modules/')) {
  13.       // ...code 处理第三方包
  14.       }
  16.       send(res, out, 'application/javascript')
  17.     } else {
  18.       next()
  19.     }
  20.   }

1.1解析vue文件

对于浏览器请求到vue的文件时，会被中间件拦截下来，执行bundlesSFC()逻辑。

这部分主要是将.vue中的template、script、css实时编译成浏览器可以被正常加载的代码。这部分主要涉及到vue组件编译的代码，会在后续进行深入研究。

  1. if (req.path.endsWith('.vue')) {      
  2.   const key = parseUrl(req).pathname
  3.   let out = await tryCache(key)
  5.   if (!out) {
  6.     // Bundle Single-File Component
  7.     const result = await bundleSFC(req)
  8.     out = result
  9.     cacheData(key, out, result.updateTime)
  10.   }
  12.   send(res, out.code, 'application/javascript')
  13. } 
  15. async function bundleSFC (req) {
  16.   const { filepath, source, updateTime } = await readSource(req)
  17.   const descriptorResult = compiler.compileToDescriptor(filepath, source)
  18.   const assembledResult = vueCompiler.assemble(compiler, filepath, {
  19.     ...descriptorResult,
  20.     script: injectSourceMapToScript(descriptorResult.script),
  21.     styles: injectSourceMapsToStyles(descriptorResult.styles)
  22.   })
  23.   return { ...assembledResult, updateTime }
  24. }

1.2 解析js文件

这部分主要是获取js文件地址，并通过transformModuleImports()方法，将js中文件的引入方式全部转化为ESModule的引入方式。

  1. else if (req.path.endsWith('.js')) {
  2.   const key = parseUrl(req).pathname
  3.   let out = await tryCache(key)
  5.   if (!out) {
  6.     // transform import statements
  7.     const result = await readSource(req)
  8.     out = transformModuleImports(result.source)
  9.     cacheData(key, out, result.updateTime)
  10.   }
  12.   send(res, out, 'application/javascript')
  13. }
  16. // 这里用了第三方库recast，是一个将文件编译成AST树的插件
  18. function transformModuleImports(code) {
  19.   const ast = recast.parse(code)
  20.   recast.types.visit(ast, {
  21.     visitImportDeclaration(path) {
  22.       const source = path.node.source.value
  23.       // 同时会对js中出现引入方式为非完整URL路径、且是npm包的代码进行转义成'__modules/xxx'
  24.       if (!/^\.\/?/.test(source) && isPkg(source)) {
  25.         path.node.source = recast.types.builders.literal(`/__modules/${source}`)
  26.       }
  27.       this.traverse(path)
  28.     }
  29.   })
  30.   return recast.print(ast).code
  31. }

1.3 解析转义后的__modules

在处理完需要转义的js包路径后，会对这部分的文件进行加载，主要是通过封装好的loadPkg()进行操作

  1. else if (req.path.startsWith('/__modules/')) {
  2.   const key = parseUrl(req).pathname
  3.   const pkg = req.path.replace(/^\/__modules\//, '')
  5.   let out = await tryCache(key, false) // Do not outdate modules
  6.   if (!out) {
  7.     out = (await loadPkg(pkg)).toString()
  8.     cacheData(key, out, false) // Do not outdate modules
  9.   }
  11.   send(res, out, 'application/javascript')
  12. }
  14. // 这部分逻辑中，尤大只支持加载vue
  15. async function loadPkg(pkg) {
  16.   if (pkg === 'vue') {
  17.     const dir = path.dirname(require.resolve('vue'))
  18.     const filepath = path.join(dir, 'vue.esm.browser.js')
  19.     return readFile(filepath)
  20.   }
  21.   else {
  22.     // TODO
  23.     // check if the package has a browser es module that can be used
  24.     // otherwise bundle it with rollup on the fly?
  25.     throw new Error('npm imports support are not ready yet.')
  26.   }
  27. }

通过这部分的转义，最初的import Vue from 'vue'最后通过转义，加载的文件变成了vue中的vue.esm.browser.js文件，达到加载vue的目的

2.实时编译中变得更快

这部分通过使用LRU缓存库，通过对加载后的文件进行缓存，在加载文件时进行文件对比，从而决定是否更新文件

  1. // 初始化LRU缓存
  2. const LRU = require('lru-cache')
  3.     cache = new LRU({
  4.   max: 500,
  5.   length: function (n, key) { return n * 2 + key.length }
  6. })
  8. // 判断文件是否需要缓存
  9. async function tryCache (key, checkUpdateTime = true) {
  10.   // 首先检查缓存中是否有该文件
  11.   const data = cache.get(key)
  13.   if (checkUpdateTime) {
  14.     // 是否有该缓存时间
  15.     const cacheUpdateTime = time[key]
  16.     // 创建一个文件更新时间并进行对比
  17.     const fileUpdateTime = (await stat(path.resolve(root, key.replace(/^\//, '')))).mtime.getTime()
  18.     if (cacheUpdateTime < fileUpdateTime) return null
  19.   }
  21.   return data
  22. }
  24. // 在对文件进行处理完后，都会将文件加入缓存中
  25. function cacheData (key, data, updateTime) {
  26.       // 调用包中的方法，判断文件是否有变化
  27.     const old = cache.peek(key)
  28.     if (old != data) 
  29.       cache.set(key, data)
  30.       if (updateTime) time[key] = updateTime
  31.       return true
  32.     } else return false
  33.   }

四、总结

通过对这个源码的阅读，首先对vite的“急速”体验，有了基础的理解。当然vite的代码会比当前包更复杂，处理更多的情况。

在阅读完后，后续还会对vue和vite进行更深入的了解，包括：

  • LRU缓存
  • SFC编译解析
  • JS文件解析成AST树