Vite原理

男娘i 2022-10-22 09:13 171阅读 0赞

# Vite #

注意解决webpack开发时候慢的问题。![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 2]  
原理  
只有使用了才去请求文件或模块  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 3]  
vuecli的原理  
不管模块是否被使用都被打包到bundle里  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 4]  
vite的HMR  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 5]  
build  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 6]  
延伸问题  
现在应用是否需要打包？  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 7]  
问题1 现在浏览器都支持ESM  
问题2 现在http可以解决多请求问题

vie支持其他和特性  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 8]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 9]

# Vite原理 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 10]  
代码

#!/usr/bin/env node
    const path = require('path')
    const {  Readable } = require('stream')
    const Koa = require('koa')
    const send = require('koa-send')
    const compilerSFC = require('@vue/compiler-sfc')
    
    const app = new Koa()
    
    const streamToString = stream => new Promise((resolve, reject) => { 
      const chunks = []
      stream.on('data', chunk => chunks.push(chunk))
      stream.on('end', () => resolve(Buffer.concat(chunks).toString('utf-8')))
      stream.on('error', reject)
    })
    
    const stringToStream = text => { 
      const stream = new Readable()
      stream.push(text)
      stream.push(null)
      return stream
    }
    
    // 3. 加载第三方模块
    app.use(async (ctx, next) => { 
      // ctx.path --> /@modules/vue
      if (ctx.path.startsWith('/@modules/')) { 
        const moduleName = ctx.path.substr(10)
        const pkgPath = path.join(process.cwd(), 'node_modules', moduleName, 'package.json')
        const pkg = require(pkgPath)
        ctx.path = path.join('/node_modules', moduleName, pkg.module)
      }
      await next()
    })
    
    // 1. 静态文件服务器
    app.use(async (ctx, next) => { 
      await send(ctx, ctx.path, {  root: process.cwd(), index: 'index.html' })
      await next()
    })
    
    // 4. 处理单文件组件
    app.use(async (ctx, next) => { 
      if (ctx.path.endsWith('.vue')) { 
        const contents = await streamToString(ctx.body)
        const {  descriptor } = compilerSFC.parse(contents)
        let code
        if (!ctx.query.type) { 
          code = descriptor.script.content
          // console.log(code)
          code = code.replace(/export\s+default\s+/g, 'const __script = ')
          code += `
          import {  render as __render } from "${ctx.path}?type=template"
          __script.render = __render
          export default __script
          `
        } else if (ctx.query.type === 'template') { 
          const templateRender = compilerSFC.compileTemplate({  source: descriptor.template.content })
          code = templateRender.code
        }
        ctx.type = 'application/javascript'
        ctx.body = stringToStream(code)
      }
      await next()
    })
    
    // 2. 修改第三方模块的路径
    app.use(async (ctx, next) => { 
      if (ctx.type === 'application/javascript') { 
        const contents = await streamToString(ctx.body)
        // import vue from 'vue'
        // import App from './App.vue'
        ctx.body = contents
          .replace(/(from\s+['"])(?![\.\/])/g, '$1/@modules/')
          .replace(/process\.env\.NODE_ENV/g, '"development"')
      }
    })
    
    app.listen(3000)
    console.log('Server running @ http://localhost:3000')

# Vite 实现原理-修改路径 #

因为路径原因请求会报错，需要特殊处理

// 2. 修改第三方模块的路径
    app.use(async (ctx, next) => { 
      if (ctx.type === 'application/javascript') { 
        const contents = await streamToString(ctx.body)
        // import vue from 'vue'
        // import App from './App.vue'
        ctx.body = contents
          .replace(/(from\s+['"])(?![\.\/])/g, '$1/@modules/')
          .replace(/process\.env\.NODE_ENV/g, '"development"')
      }
    })

# Vite 实现原理-加载第三方模块 #

// 3. 加载第三方模块
    app.use(async (ctx, next) => { 
      // ctx.path --> /@modules/vue
      if (ctx.path.startsWith('/@modules/')) { 
        const moduleName = ctx.path.substr(10)
        const pkgPath = path.join(process.cwd(), 'node_modules', moduleName, 'package.json')
        const pkg = require(pkgPath)
        ctx.path = path.join('/node_modules', moduleName, pkg.module)
      }
      await next()
    })

# Vite 实现原理-编译单文件组件 #

// 4. 处理单文件组件
    app.use(async (ctx, next) => { 
      if (ctx.path.endsWith('.vue')) { 
        const contents = await streamToString(ctx.body)
        const {  descriptor } = compilerSFC.parse(contents)
        let code
        if (!ctx.query.type) { 
          code = descriptor.script.content
          // console.log(code)
          code = code.replace(/export\s+default\s+/g, 'const __script = ')
          code += `
          import {  render as __render } from "${ctx.path}?type=template"
          __script.render = __render
          export default __script
          `
        } else if (ctx.query.type === 'template') { 
          const templateRender = compilerSFC.compileTemplate({  source: descriptor.template.content })
          code = templateRender.code
        }
        ctx.type = 'application/javascript'
        ctx.body = stringToStream(code)
      }
      await next()
    })

# Vite 实现原理-加载第三方模块 #

在这里插入代码片

核心就是不本地打包，服务器编译单文件组件

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70]: /images/20221022/0601da871588431585bfa69fac5b2ebf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 1]: /images/20221022/abdb35b2e81245d2bc96ac72d8ed0ed9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 2]: /images/20221022/cbf2620158874ca8b6978f01c9944141.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210326075919837.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20210326075939474.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20210326080035887.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20210326080050662.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20210326080103359.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20210326080212322.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20210326080217868.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20210326080237844.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size_16,color_FFFFFF,t_70