大前端进阶-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引用图片路径。

这个功能在compileTemplate函数调用的时候提供了选项，修改模版编译的部分：

const templateRender = compilerSFC.compileTemplate({
      source: descriptor.template.content,
      // 将静态资源的引用方式进行转换
      transformAssetUrls: { base: './src/' }
})
code = templateRender.code

此时，重新启动站点。

处理环境变量

环境变量的处理很简单，只需要将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()
})

处理完成后，重新打开站点，可以发现项目能够正常显示并正常工作：

大前端进阶-vue3响应式原理及vite原理

变化

组合式api

响应式优化

编译优化

静态提升

patch flag

缓存事件处理函数

fragments

源码体积优化

响应式原理

reactive

effect

track

trigger

ref

toRefs

computed

vite原理

Vite创建项目

模拟Vite实现

创建空的js包

添加静态服务器

第三方模块引用

处理css文件

处理单文件组件

处理图片资源

处理环境变量

carry

引用和评论

深入解析React

腾讯新闻中心首页改版啦

网页设计的垂直居中

CSS团队协作规范

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具