【Vite基础】004-Vite 中处理静态资源

【Vite基础】004-Vite 中处理静态资源

一、types 类型

1、url 路径

概述

获取导入文件的路径。

代码演示

import { defineComponent } from "vue";

import test from './test.ts?url'

console.log(test);

export default defineComponent({
    setup() {
        return () => 
Hello Vite !
;
    }
});

运行并访问

2、raw 内容

概述

获取导入文件的内容。

代码演示

import { defineComponent } from "vue";

import test from './test.ts?raw'

console.log(test);

export default defineComponent({
    setup() {
        return () => 
Hello Vite !
;
    }
});

运行并访问

3、worker / worker inline

概述

web worker 是一个帮助我们实现更高性能的构建应用的工具。它可以让 web worker 里面跑的计算量很大的代码放在新的线程里面运行（JavaScript 是单线程的，一些代码可能会阻塞渲染，导致页面卡顿）。

代码演示

在 src 目录下创建 worker.js 文件

var i = 0;

function timedCount() {
    i = i + 1;
    postMessage(i);
    setTimeout(timedCount, 500);
}

timedCount();

在 main.js 里测试

import Worker from './worker.js?worker'

const worker = new Worker();

worker.onmessage = function (e) {
    console.log('Message received from worker', e.data);
};

运行并访问

二、JSON

1、全部导入

代码演示

在 main.js 里面

import pkg from '../package.json'

console.log(pkg);

运行结果

2、部分导入

代码演示

在 main.js 里面

import { version } from '../package.json'

console.log('version is ======>', version);

运行结果

三、Web Assembly

1、概述

是一种可以在浏览器中运行的二进制内容。

一个类似 TypeScript 的工具，可以转成 Web Assembly。

网站：assemblyscript.org

2、代码演示

第一步：创建 assemb.ts 文件

export function fib(n: i32): i32 {
    var a = 0, b = 1
    if (n > 0) {
        while (--n) {
            let t = a + b
            a = b
            b = t
        }
        return b
    }
    return a
}

第二步：将 assemb.ts 文件编译成 fib.wasm

asc 命令是无法直接使用的，如何安装教程省略了，这里暂时不再深入探索，参考网址：https://www.assemblyscript.org/introduction.html#from-a-webassembly-perspective

asc fib.ts --outFile fib.wasm --optimize

第三步：在 main.js 中测试

import init from './fib.wasm';

init().then((m) => {
    console.log(m.fib(10));
});