关于javascript:大前端进阶vue3响应式原理及vite原理

随着vue3.0的公布，为vue.js带来了如下变动：

组合式api
响应式优化
编译优化
源码体积优化

变动

组合式api

在vue3.0之前的版本中应用申明式api，尽管语法上清晰简略，然而带来了问题，即：

实现某个性能的代码散布在申明的各个变量中，导致实现多个性能的代码糅合在一起，不利于代码复用，尤其是开发大型项目。
尽管提供了mixin用于代码复用，然而也会带来问题，如命名抵触等。

组合式api就能够解决这些问题，能够通过一系列api将实现某个性能的代码放到一起，从而能够实现代码复用。

如下例子中，页面会捕获用户鼠标地位，能够将捕获鼠标地位的代码提取到一个公共办法中，当须要应用的时候，间接引入代码即可：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div>
            X: {{position.x}} <br />
            Y: {{position.y}}
        </div>
    </div>

    <script type="module">
        import { createApp, reactive, onMounted, onUnmounted } from './node_modules/vue/dist/vue.esm-browser.js'
        
        // 共用的监控鼠标地位办法
        function useMousePosition() {
            const position = reactive({
                x: 0,
                y: 0
            })

            const handler = (e) => {
                position.x = e.pageX
                position.y = e.pageY
            }

            onMounted(() => {
                window.addEventListener('mousemove', handler)
            })

            onUnmounted(() => {
                window.removeEventListener('mousemove', handler)
            })

            return {
                position
            }
        }

        createApp({
            setup() {
                // 在须要应用的vue组件中引入即可
                return {
                    ...useMousePosition()
                }
            }
        }).mount('#app')
    </script>
</body>

</html>

响应式优化

家喻户晓，vue2.0中应用Object.defineProperty增加数据监听，然而其存在如下问题：

初始化的时候会深度遍历对象属性，为每一个属性增加监听。
无奈监听动静增加，删除属性。
无奈监听数组的通过.length和[0]的扭转。

而3.0中，应用Proxy对象重写响应式零碎，解决了上述问题，从而晋升了响应式零碎性能。

编译优化

在vue我的项目编译的时候，会将template编译成render函数，在编译原理的文章中说过，vue2.0会标记动态根节点，在虚构dom的diff过程中会跳过动态根节点的比照，从而优化编译速度。

而在vue3.0中又增加了如下内容用于优化编译过程：

动态晋升。
Patch Flag。
缓存事件处理函数。
Fragments(片段)。

在上面具体阐明过程中会应用https://vue-next-template-explorer.netlify.app这个站点用于查看template编译后的render函数。

应用的template案例如下：

<div id="app">
    <div>
        static root
        <div>static node</div>
    </div>
    <div>static node</div>
    <div :id="id">{{count}}</div>
    <button @click="handler">button</button>
</div>

该例子中蕴含动态节点，动态根节点，属性绑定，插值表达式和绑定事件。

动态晋升

当没有启用动态晋升的时候，template被编译成的render函数如下：

其中，红色框标出的是动态节点内容。

当启用动态晋升后，编译后果如下：

能够看出，原来render函数中的动态节点都被提取到render函数的里面，这样就导致，动态节点只有在初始化的时候被编译一次，后续发生变化后，动态节点会复用初始化时编译的后果，从而晋升编译性能。

patch flag

在编译的后果中能够看出，在编译生成的动静节点中，_createVNode办法最初会蕴含一个数字，如9，此数字就是patch flag，9代表的是该节点的text和props中均存在动静绑定的内容：

而如果咱们去掉模版中的:id=”id”属性绑定，其编译后果如下：

此时flag变为1，示意该节点只有text被动静绑定，那么在虚构Dom的patch过程中，就能够跳过节点比照，间接比对其蕴含的text内容，从而晋升编译速度。

缓存事件处理函数

在模版中绑定了click事件，其编译后果如下：

此时，默认认为该节点属性中绑定了某个动态数据，所以当事件处理函数发生变化的时候，会登程页面的更新。

如果开启事件缓存，其编译后果如下：

在初始化编译的时候，其外部用一个函数包裹了绑定事件并增加到缓存中，当后续变动的时候，会间接从缓存中读取相应的处理函数，此时放慢了编译速度，同时，因为新生成了一个函数包裹事件处理函数，不论处理函数是否发生变化，包裹得函数是不会变动的，此时也就不会因为处理函数的变动导致页面更新。

fragments

在vue2.0中，template模版只能存在一个根节点，而3.0中通过fragments实现了能够存在多个同级根节点。

在例子中，只存在一个根节点div，其编译后的后果如下：

能够看出，生成的render办法中是应用_createBlock函数来解决根节点，从而将template转换为一个树形数据。

当咱们删除例子中的根节点之后，其编译的后果如下：

此时，_createBlock函数传入_Fragment内置组件作为根节点。

源码体积优化

vue3.0中通过如下两个方面优化了源码体积：

移除了一些不罕用的api： inline-template, filter等。
更好的tree-shaking，除了根底代码之外，如各种api都是按需加载的。

响应式原理

vue3.0将响应式局部独自提取成一个包reactivity，其蕴含了所有响应式相干的代码，能够独自应用：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script type="module">
        import { reactive, effect } from './node_modules/@vue/reactivity/dist/reactivity.esm-browser.js'

        // 创立响应式数据
        const product = reactive({
            name: 'iPhone',
            price: 5000,
            count: 3
        })
        let total = 0

        // 增加变动监听
        effect(() => {
            total = product.price * product.count
        })
        console.log(total)

        product.price = 4000
        console.log(total)

        product.count = 1
        console.log(total)

    </script>
</body>

</html>

波及到两个要害函数：

reactive：将对象转换为响应式数据。
effect：注册监听变动函数，当product的price和count属性发生变化的时候会登程该函数执行。

后续会通过模仿reactivity包的实现来阐明vue3.0中响应式实现外围原理。

reactive

在reactive函数中，将为对象增加Proxy代理，并在get办法中增加监听，在set和delete办法中触发变动。

const isObject = val => val !== null && typeof val === 'object'
const convert = target => isObject(target) ? reactive(target) : target
const hasOwnProperty = Object.prototype.hasOwnProperty
const hasOwn = (target, key) => hasOwnProperty.call(target, key)

export function reactive(target) {
    // 当target不是对象的时候，间接返回target
    if (!isObject(target)) return target
    const handler = {
        get(target, key, receiver) {
            // 收集依赖
            const result = Reflect.get(target, key, receiver)
            // 对象的某个属性有可能还是对象，此时须要为该属性增加响应式
            return convert(result)
        },
        set(target, key, value, receiver) {
            const oldValue = Reflect.get(target, key, receiver)
            let result = true
            if (oldValue !== value) {
                result = Reflect.set(target, key, value, receiver)
                // 触发更新
            }
            return result
        },
        deleteProperty(target, key) {
            const hadKey = hasOwn(target, key)
            const result = Reflect.deleteProperty(target, key)
            if (hadKey && result) {
                // 触发更新
                trigger(target, key)
            }
            return result
        }
    }
    return new Proxy(target, handler)
}

effect

effect函数用于为数据变动增加响应操作。整个响应式收集过程可用下图示意：

整个依赖收集过程会波及三个数据：

targetMap: WeakMap，示意一个响应式对象对应一个depsMap。
depsMap： Map，示意响应式对象上的属性key对应一个dep。
dep： Set，示意一系列响应操作。

实现effect：

let activeEffect = null
export function effect (callback) {
  activeEffect = callback
  callback() // 拜访响应式对象属性，去收集依赖
  activeEffect = null
}

其外部首先会将响应函数存储到全局对象activeEffect中，而后调用响应函数，因为响应函数中存在相似production.price调用，此时会触发get办法，在get办法中就能够将全局的activeEffect保留到相应的dep汇合中。

track

track办法用于收集依赖：

let targetMap = new WeakMap()
export function track (target, key) {
  if (!activeEffect) return
  let depsMap = targetMap.get(target)
  if (!depsMap) {
    targetMap.set(target, (depsMap = new Map()))
  }
  let dep = depsMap.get(key)
  if (!dep) {
    depsMap.set(key, (dep = new Set()))
  }
  dep.add(activeEffect)
}

此办法就是依据target获取depsMap，而后依据key获取相应dep，再而后将全局的activeEffect对象增加到dep汇合中。

定义实现track办法后，须要批改reactive办法收集依赖局部：

// 收集依赖
track(target, key)

trigger

trigger函数用于触发更新：

export function trigger (target, key) {
  const depsMap = targetMap.get(target)
  if (!depsMap) return
  const dep = depsMap.get(key)
  if (dep) {
    dep.forEach(effect => {
      effect()
    })
  }
}

此办法就是依据target和key找到相应的dep，而后循环调用dep数组中的响应办法。

定义实现trigger函数后，须要批改reactive函数中get，delete办法中触发更新局部：

// 触发更新
trigger(target, key)

通过上述几个函数，就能够实现根本的vue3.0响应过程。

ref

ref函数和reactive函数相似，只不过其是将根本数据类型包装成响应式对象：

export function ref (raw) {
  // 判断 raw 是否是ref 创立的对象，如果是的话间接返回
  if (isObject(raw) && raw.__v_isRef) {
    return
  }
  let value = convert(raw)
  const r = {
    __v_isRef: true,
    get value () {
      track(r, 'value')
      return value
    },
    set value (newValue) {
      if (newValue !== value) {
        raw = newValue
        value = convert(raw)
        trigger(r, 'value')
      }
    }
  }
  return r
}

在ref函数中，次要是依据传入的raw生成一个响应式对象，该对象蕴含一个value属性，在value属性的get和set办法中收集依赖和触发更新。

toRefs

在应用reactive函数将对象转换为响应式对象后，如果间接通过解构的形式获取其外部属性，那么获取到的数据并不是响应式的：

如：

// 创立响应式数据
const product = reactive({
     name: 'iPhone',
     price: 5000,
     count: 3
})

const { price } = product

上例中，通过解构获取到的price并不是响应式的。

此时，能够通过toRefs办法解决响应式对象，将其每个属性都变成可解构的响应式对象。

export function toRefs (proxy) {
  const ret = proxy instanceof Array ? new Array(proxy.length) : {}
  for (const key in proxy) {
    ret[key] = toProxyRef(proxy, key)
  }
  return ret
}

function toProxyRef (proxy, key) {
  const r = {
    __v_isRef: true,
    get value () {
      return proxy[key]
    },
    set value (newValue) {
      proxy[key] = newValue
    }
  }
  return r
}

此办法比较简单，就是遍历响应式数据的属性，而后依据属性创立一个新的对象，对象内所有属性都是响应式对象（和ref相似，蕴含value属性，在get和set办法中调用原来的proxy对象，原来的proxy对象中蕴含依赖收集和触发更新）。

computed

computed函数用于创立计算对象，该对象也是响应式的。

export function computed (getter) {
  const result = ref()
  effect(() => (result.value = getter()))
  return result
}

computed函数外部比较简单，就是调用ref办法创立一个新的响应式对象，而后调用effect办法增加响应监听，最初再返回ref对象。

vite原理

目前，vue我的项目应用webpack进行打包，然而webpack打包存在一个问题，就是开发阶段也是须要打包构建而后能力在浏览器上看到页面，这样会导致首次启动等待时间较长。

vite是随着vue3.0一起公布的一个vue构建工具，因为其采纳浏览器原生反对的ES Module个性，在开发阶段跳过编译，能间接在浏览器端运行，所以其存在以下特点：

疾速冷启动，不必构建后再启动。
天生反对更好的模块热更新体验。
按需编译，如vue单文件组件，只有在加载的时候才会在服务端进行构建。
开箱即用，其依赖的js包非常少。

Vite创立我的项目

增加全局依赖

npm install -g create-vite-app

创立我的项目

create-vite-app project-name

启动我的项目

npm run dev

通过简略的几步，我的项目就被创立好并且能够应用了。

模仿Vite实现

模仿vite须要首先明确vite的实现原理，即在浏览器端通过module形式加载我的项目下的main.js文件，但遇到vue单文件、css、图片等ES Module不辨认的资源时，再在服务器端进行编译转换为浏览器能够辨认的js资源。

创立空的js包

创立我的项目文件夹
增加package.json

npm init –y

增加bin配置，指向我的项目目录下的index.js文件

在index.js文件中增加node程序启动头

增加动态服务器

在vite中是应用koa来创立服务器的，咱们在这个我的项目中也用它，装置依赖：

npm i -D koa koa-send

批改index.js

const Koa = require('koa')
const send = require('koa-send')

const app = new Koa()

// 动态文件服务器
app.use(async (ctx, next) => {
    await send(ctx, ctx.path, {root: process.cwd(), index: 'index.html'})
    // 继续执行后续的中间件
    await next()
})

app.listen(3000)
console.log('Server running @ http://localhost:3000')

批改实现后执行

npm link

关上vite创立的我的项目，在我的项目中执行：

my-vite

我的项目名称是my-vite，能够依据本人的我的项目名去执行命令。

此时命令行中会提醒，动态服务器启动胜利，关上浏览器，也能够看到可能失常获取资源：

只不过此时页面没有失常显示，这个是因为控制台报错了：

这个报错的起因是因为在我的项目的main.js中引入了其余包：

import { createApp } from ‘vue’

这个援用在浏览器端无奈辨认，所以下一步须要解决第三方模块援用。

第三方模块援用

浏览器只能辨认’/’或者’./’援用的js文件，然而咱们的我的项目中存在如：

import { createApp } from ‘vue’

这样的大量援用，这些援用的第三方模块ES Module是无奈辨认的，因而须要在服务端对这样的门路进行解决：

Vite的解决逻辑是将第三方的援用后面加上’/@modules’，如：

import { createApp } from ‘vue’

批改为

import { createApp } from ‘/@modules/vue’

批改咱们的代码：

#!/usr/bin/env node

const Koa = require('koa')
const send = require('koa-send')

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)
})


// 动态文件服务器
app.use(async (ctx, next) => {
    await send(ctx, ctx.path, { root: process.cwd(), index: 'index.html' })
    // 继续执行后续的中间件
    await next()
})

// 批改第三方文件门路
app.use(async (ctx, next) => {
    // 如果是js文件
    if (ctx.type === 'application/javascript') {
        const contents = await streamToString(ctx.body)
        // 为第三方援用后面加上/@module
        ctx.body = contents
            .replace(/(from\s+['"])(?![\.\/])/g, '$1/@modules/')
    }
    next()
})

app.listen(3000)
console.log('Server running @ http://localhost:3000')

此时再次启动之后，会发现：

浏览器会去服务端申请：http://localhost:3000/@modules/vue

这个地址在服务端是不存在的，因而须要手动解决这个申请，解决的逻辑就是当门路中蕴含@/modules时，服务端截取第三方包的名称，而后去node_modules文件夹下获取第三方包，读取package.json中module属性指向的文件，而后将文件返回给浏览器：

#!/usr/bin/env node

const Koa = require('koa')
const send = require('koa-send')
const path = require('path')

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)
})

app.use(async (ctx, next) => {
    // 如果申请的门路蕴含'/@modules/'，那么就将path批改成node_modules文件夹下指定包的门路
    // 而后动态文件处理器会读取文件并返回
    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()
})


// 动态文件服务器
app.use(async (ctx, next) => {
    await send(ctx, ctx.path, { root: process.cwd(), index: 'index.html' })
    // 继续执行后续的中间件
    await next()
})

// 批改第三方文件门路
app.use(async (ctx, next) => {
    // 如果是js文件
    if (ctx.type === 'application/javascript') {
        const contents = await streamToString(ctx.body)
        // 为第三方援用后面加上/@module
        ctx.body = contents
            .replace(/(from\s+['"])(?![\.\/])/g, '$1/@modules/')
    }
    await next()
})

app.listen(3000)
console.log('Server running @ http://localhost:3000')

批改实现后，重新启动，此时能失常获取第三方包，而且第三方外部援用的其余第三方包也能被失常解决：

此时，第三方包的解决曾经实现，然而咱们还是不能看到页面失常显示，是因为浏览器无奈辨认获取到的单文件组件和css文件。

解决css文件

在main.js中引入了css文件：

这个文件尽管可能被浏览器正确下载，然而，ES Module无奈辨认import的资源，此时须要对css进行解决。

Vite解决css文件和解决第三方资源的逻辑类似，就是将css的援用改为：

而后在服务端解决，返回可能被辨认的js文件，js文件中就是将读取到的css内容插入到以后html中。

#!/usr/bin/env node

const Koa = require('koa')
const send = require('koa-send')
const path = require('path')
const { Readable } = require('stream')

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
}

// 解决@modules
app.use(async (ctx, next) => {
    // 如果申请的门路蕴含'/@modules/'，那么就将path批改成node_modules文件夹下指定包的门路
    // 而后动态文件处理器会读取文件并返回
    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()
})

// 动态文件服务器
app.use(async (ctx, next) => {
    await send(ctx, ctx.path, { root: process.cwd(), index: 'index.html' })
    // 继续执行后续的中间件
    await next()
})

// 解决?import
app.use(async (ctx, next) => {
    if (ctx.query.import === '') {
        const contents = await streamToString(ctx.body)
        let code = 'const content = '
        code += '`' + contents + '`\n'
        code += `
        const style = document.createElement('style');
        style.setAttribute('type', 'text/css');
        style.innerHTML = content;
        document.head.appendChild(style);`
        ctx.type = 'application/javascript'
        ctx.body = stringToStream(code)
    }
    await next()
})

// 批改第三方文件门路
app.use(async (ctx, next) => {
    // 如果是js文件
    if (ctx.type === 'application/javascript') {
        const contents = await streamToString(ctx.body)
        // 为第三方援用后面加上/@module
        ctx.body = contents
            .replace(/(from\s+['"])(?![\.\/])/g, '$1/@modules/')
            // 解决css门路
            .replace(/(import\s+['"].*\.css)/g, '$1?import')
    }
    await next()
})

app.listen(3000)
console.log('Server running @ http://localhost:3000')

重新启动站点

此时css资源可能被正确处理。

解决单文件组件

ES Module并不能辨认.vue结尾的资源，此时须要在服务端进行解决，解决逻辑就是解析单文件组件的js代码和template模板，将template模板转换为render函数，而后返回给浏览器解决后的js文件。

解析单文件组件须要应用@vue/compiler-sfc，因而增加依赖：

npm i -D @vue/compiler-sfc

解析单文件组件，获取js局部

判断以后申请是否是单文件组件，如果是，那么应用compiler-sfc进行解析，获取其中的js局部，而后返回一个js文件，js内容格局如下：

const __script = '解析到的js内容'
import { render as __render } from "单文件门路?type=template"
__script.render = __render
export default __script

此时js内容中蕴含一个模板地址援用，这个地址在后续进行解决。

解决逻辑如下：

#!/usr/bin/env node

const Koa = require('koa')
const send = require('koa-send')
const path = require('path')
const { Readable } = require('stream')
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
}

// 解决@modules
app.use(async (ctx, next) => {
    // 如果申请的门路蕴含'/@modules/'，那么就将path批改成node_modules文件夹下指定包的门路
    // 而后动态文件处理器会读取文件并返回
    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()
})

// 动态文件服务器
app.use(async (ctx, next) => {
    await send(ctx, ctx.path, { root: process.cwd(), index: 'index.html' })
    // 继续执行后续的中间件
    await next()
})

// 解决?import
app.use(async (ctx, next) => {
    if (ctx.query.import === '') {
        const contents = await streamToString(ctx.body)
        let code = 'const content = '
        code += '`' + contents + '`\n'
        code += `
        const style = document.createElement('style');
        style.setAttribute('type', 'text/css');
        style.innerHTML = content;
        document.head.appendChild(style);`
        ctx.type = 'application/javascript'
        ctx.body = stringToStream(code)
    }
    await next()
})

// 解决单文件组件
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 = ')
            // 将template模板转换为另一个import申请，"/src/App.vue?type=template"
            code += `
        import { render as __render } from "${ctx.path}?type=template"
        __script.render = __render
        export default __script
        `
        }
        ctx.type = 'application/javascript'
        ctx.body = stringToStream(code)
    }
    await next()
})

// 批改第三方文件门路
app.use(async (ctx, next) => {
    // 如果是js文件
    if (ctx.type === 'application/javascript') {
        const contents = await streamToString(ctx.body)
        // 为第三方援用后面加上/@module
        ctx.body = contents
            .replace(/(from\s+['"])(?![\.\/])/g, '$1/@modules/')
            // 解决css门路
            .replace(/(import\s+['"].*\.css)/g, '$1?import')
    }
    await next()
})

app.listen(3000)
console.log('Server running @ http://localhost:3000')

重新启动站点：

解决模板

因为在解析js的时候，将模板独自作为一个门路引入，此门路返回的是一个蕴含导出render函数的js文件，所以须要增加逻辑对模板门路进行解决：

在解决单文件组件js逻辑代码的中间件中持续批改，当申请单文件组件的query参数中的type=template时，就应用compiler-sfc解析单文件组件，获取render函数，而后返回给浏览器：

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 = ')
            // 将template模板转换为另一个import申请，"/src/App.vue?type=template"
            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写到这里，咱们解决了第三方资源，单文件组件和css资源，然而页面还是不能失常显示，这是因为在单文件组件中援用了图片资源

通过import形式引入的图片，浏览器是不能辨认的，此时须要将图片资源的import援用去掉，间接通过src援用图片门路。

大抵逻辑如下：

首先须要通过正则匹配：

import _imports_0 from ‘./assets/logo.png’

获取_imports_0和图片门路。
将_createNode参数中的src值替换为图片门路
删除图片的import援用。

// 解决单文件组件
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 = ')
            // 将template模板转换为另一个import申请，"/src/App.vue?type=template"
            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
            // 解决图片
            const imgs = code.match(/import.*from\s+['"].*\.png'/g)
            if (imgs) {
                imgs.forEach(item => {
                    code = code.replace(item, '')
                    const strs = item.split('from')
                    const key = strs[0].replace(/import\s+/g, '')
                    code = code.replace(key.trim(), strs[1].replace('./', '/src/'))
                })
            }
        }
        ctx.type = 'application/javascript'
        ctx.body = stringToStream(code)
    }
    await next()
})

此时图片资源可能被失常加载，

然而页面还是报错：

这个谬误是因为在代码中应用了环境变量：

所以还须要解决环境变量。

解决环境变量

环境变量的解决很简略，只须要将js内容中的环境变量进行替换即可：

// 批改第三方文件门路
app.use(async (ctx, next) => {
    // 如果是js文件
    if (ctx.type === 'application/javascript') {
        const contents = await streamToString(ctx.body)
        // 为第三方援用后面加上/@module
        ctx.body = contents
            .replace(/(from\s+['"])(?![\.\/])/g, '$1/@modules/')
            // 解决css门路
            .replace(/(import\s+['"].*\.css)/g, '$1?import')
            // 替换环境变量
            .replace(/process\.env\.NODE_ENV/g, '"development"')
    }
    await next()
})

解决实现后，从新关上站点，能够发现我的项目可能失常显示并失常工作：

关于javascript:大前端进阶vue3响应式原理及vite原理

变动

组合式api

响应式优化

编译优化

动态晋升

patch flag

缓存事件处理函数

fragments

源码体积优化

响应式原理

reactive

effect

track

trigger

ref

toRefs

computed

vite原理

Vite创立我的项目

模仿Vite实现

创立空的js包

增加动态服务器

第三方模块援用

解决css文件

解决单文件组件

解决图片资源

解决环境变量

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

关于javascript:大前端进阶vue3响应式原理及vite原理

变动

组合式api

响应式优化

编译优化

动态晋升

patch flag

缓存事件处理函数

fragments

源码体积优化

响应式原理

reactive

effect

track

trigger

ref

toRefs

computed

vite原理

Vite创立我的项目

模仿Vite实现

创立空的js包

增加动态服务器

第三方模块援用

解决css文件

解决单文件组件

解决图片资源

解决环境变量

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

发表回复取消回复