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

电玩女神 2023-09-26 10:21 87阅读 0赞

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

### 文章目录 ###

*  【Vite基础】004-Vite 中处理静态资源
 *  一、types 类型
 *   *  1、url 路径
     *   *  概述
         *  代码演示
         *  运行并访问
     *  2、raw 内容
     *   *  概述
         *  代码演示
         *  运行并访问
     *  3、worker / worker inline
     *   *  概述
         *  代码演示
         *  运行并访问
 *  二、JSON
 *   *  1、全部导入
     *   *  代码演示
         *  运行结果
     *  2、部分导入
     *   *  代码演示
         *  运行结果
 *  三、Web Assembly
 *   *  1、概述
     *  2、代码演示
     *   *  第一步：创建 assemb.ts 文件
         *  第二步：将 assemb.ts 文件编译成 fib.wasm
         *  第三步：在 main.js 中测试

# 一、types 类型 #

## 1、url 路径 ##

### 概述 ###

获取导入文件的路径。

### 代码演示 ###

import { defineComponent } from "vue";
    
    import test from './test.ts?url'
    
    console.log(test);
    
    export default defineComponent({
        setup() {
            return () => <div class="root">Hello Vite !</div>;
        }
    });

### 运行并访问 ###

![image-20221007111411658][]

## 2、raw 内容 ##

### 概述 ###

获取导入文件的内容。

### 代码演示 ###

import { defineComponent } from "vue";
    
    import test from './test.ts?raw'
    
    console.log(test);
    
    export default defineComponent({
        setup() {
            return () => <div class="root">Hello Vite !</div>;
        }
    });

### 运行并访问 ###

![image-20221007111552577][]

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

### 运行并访问 ###

![image-20221007112644085][]

# 二、JSON #

## 1、全部导入 ##

### 代码演示 ###

> 在 main.js 里面

import pkg from '../package.json'
    
    console.log(pkg);

### 运行结果 ###

![image-20221007112842156][]

## 2、部分导入 ##

### 代码演示 ###

> 在 main.js 里面

import {
         version } from '../package.json'
    
    console.log('version is ======>', version);

### 运行结果 ###

![image-20221007113051985][]

# 三、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));
    });

[image-20221007111411658]: https://img-blog.csdnimg.cn/img_convert/24df4a45b02ac104f62b747214c7611d.png
[image-20221007111552577]: https://img-blog.csdnimg.cn/img_convert/8d237290f5e184af5cea3e5c55406b46.png
[image-20221007112644085]: https://img-blog.csdnimg.cn/img_convert/55090de113cfb11e12924bab5b71a6df.png
[image-20221007112842156]: https://img-blog.csdnimg.cn/img_convert/d89291aaee721061d5873643c8b75151.png
[image-20221007113051985]: https://img-blog.csdnimg.cn/img_convert/c859a63b14d14772880c5dc2f903759b.png