threejs 渲染优化​

仔细看上面的展示图，发现那些无非就是一个个不同颜色的方格，threejs 实现一个方格还是比较简单，上面的体素图无非就是创建指定数量的方格放置在指定的坐标位置，于是一开始我就是简单去创建方格，然后根据服务端传输过来的数据进行定位渲染，服务端的数据结构也比较粗暴，类似这样：

{
  stamp: 1684829000,
  ...,
  // 全部立方体点的x,y,z坐标
  data: [
    0,0,0, // 第1个点的x,y,z
    0,0,1, // 第2个点的x,y,z
    0,0,2, // 第3个点的x,y,z
    0,0,3, // 第4个点的x,y,z
    0,1,0, // 第5个点的x,y,z
    ...
  ],
  ...
}

遍历data，每三个获取一个点的x，y，z坐标，依次去定位每个点的位置，代码如下：

// 创建红色的材质
var material = new THREE.MeshBasicMaterial({ color: 0xff0000 });

function createBox(position: THREE.Vector3) {
  // 创建立方体的几何体
  var geometry = new THREE.BoxGeometry(1, 1, 1);
  // 创建立方体并将几何体和材质添加到其中
  var cube = new THREE.Mesh(geometry, material);
  cube.position.copy(position);
  return cube;
}

// 生成体素图
function genVoxelMap() {
  for(let i = 0; i < data.length; i++) {
    scene.add(createBox(new THREE.Vector3(data[i], data[++i] , data[++i])));
  }
}

genVoxelMap();

然后可以根据y坐标的高低来给每个方块设置不同的材质颜色，这个细节都不在样例代码中体现了。到这里就可以按照服务端传输的每个点坐标位置去渲染体素图，但是有个很致命的问题，当点的数量达到一万个点以上时，页面的拖动就会明显感觉到卡顿，这还是我在Mac（8核，32G内存）上的效果，如果到了手机上效果会更差，而且这还只是渲染一次静态的体素图，真实场景中每秒要处理十几帧数据，可想这会是什么样体验。

import Stats from 'three/examples/jsm/libs/stats.module';

const stats = Stats();
document.body.appendChild(stats.dom);

减少重复面​

当两个以及两个以上的方格挨在一起的时候，就会有一些面是重合贴在一起，那么这些面其实是看不见的，而用BoxGeometry去渲染一个立方体，不管怎么样都会把每个面都计算渲染一次，这样就会增加渲染压力，所以第一个优化点就是先尽量减少一些看不见却又被实际渲染的面。

我们可以改用直接用 BufferGeometry 去记录每个面的四个对角点坐标，遍历 data，判断每个点的哪些面需要渲染，哪些年不需要渲染。具体步骤如下：

1. 创建一个记录数据的map，遍历data，将每个点的的x，y，z坐标点作为key值，记录到map中，类似 {'x,y,z': 1}
2. 遍历map的key，根据每个点的坐标，计算出前后左右上下6个方向上的点位置，再组合成对应的key去map内查询时候存在相邻的点
3. 根据是否有对应方向是否有相邻点来判断每个面是否有重合，重合则不需要渲染，不重合则需要根据点的x，y，z去计算面的四个顶点位置，然后保存到提前声明好的数组positions
4. 在记录positions的同时也记录每个面的法线量normal和顶点索引indices以及需要不同高度的每个点的纹理uv，
5. 最后使用 BufferGeometry 对象来设置前面记录好的 positions 、indices 、normal 、uv

核心代码：

// 6个面的方向和顶点相对位置
const faces = [
  {
    // left
    dir: [-1, 0, 0],
    corners: [[0, 1, 0], [0, 0, 0], [0, 1, 1], [0, 0, 1]],
  },
  {
    // right
    dir: [1, 0, 0],
    corners: [[1, 1, 1], [1, 0, 1], [1, 1, 0], [1, 0, 0]],
  },

  {
    // back
    dir: [0, -1, 0],
    corners: [[1, 0, 1], [0, 0, 1], [1, 0, 0], [0, 0, 0]],
  },
  {
    // front
    dir: [0, 1, 0],
    corners: [[0, 1, 1], [1, 1, 1], [0, 1, 0], [1, 1, 0]],
  },

  {
    // bottom
    dir: [0, 0, -1],
    corners: [[1, 0, 0], [0, 0, 0], [1, 1, 0], [0, 1, 0]],
  },
  {
    // top
    dir: [0, 0, 1],
    corners: [[0, 0, 1], [1, 0, 1], [0, 1, 1], [1, 1, 1],],
  },
];

const map = new Map<string, number>();
for (let i = 0; i < data.length; i++) {
  map.set(`${data[i]},${data[++i]},${data[++i]},`, 1);
}

const positions = [];
const normals = [];
const indices = [];
for (var [key] of map) {
  const [x, y, z] = key.split(",").map((n) => Number(n));

  for (const { dir, corners } of faces) {

    // 根据不同的面判断对应方向是否存在相邻的点
    const neighbor = map.get(`${x+dir[0]},${y+dir[1]},${z+dir[2]}`);

    if (!neighbor) {
      const ndx = positions.length / 3;
      for (const pos of corners) {
        positions.push(pos[0] + x, pos[1] + y, pos[2] + z);
        normals.push(...dir);
      }
      indices.push(ndx, ndx + 1, ndx + 2, ndx + 2, ndx + 1, ndx + 3);
    }
  }
}

const geometry = new THREE.BufferGeometry();
geometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array(positions), 3));
geometry.setAttribute('normal', new THREE.BufferAttribute(new Float32Array(normals), 3));
geometry.setIndex(indices);
const mesh = new THREE.Mesh(geometry, material); // 体素图对象

减少渲染线程压力​

上面提到减少重复面来提高渲染的压力，但是如果计算的数据量够大，渲染频率够高，仅仅只是依靠减少重复面来达到高性能渲染还是不够的。

这里先提一点，JavaScript是一种单线程编程语言，这是它的一个重要特点。这意味着JavaScript引擎在执行JavaScript代码时只有一个主线程，按照代码的顺序逐行执行。这与其他一些编程语言（如Java或C++）不同，这些语言可以使用多个线程同时执行代码。恰恰因为这个单线程的特性，每一次渲染之前都需要计算大量数据，需要消耗很多时间，如果数据量够大，每一次遍历很可能都需要几十毫秒或者几百毫秒甚至更多，那么每秒能够渲染的帧数就非常有限。

所以为了减少主线程的资源占用，可以采用多线程的方式（很多人会问，js也能多线程吗，当然可以！！）。我们用Web Worker来实现js的多线程，不是很了解的可以看MDN web docs 文档。

创建一个文件point.worker.ts：

const ctx: Worker = self as any;
ctx.addEventListener('message', (res) => {

  // 获取数据源
  const data = res.data;

  const map = new Map<string, number>();
  for (let i = 0; i < data.length; i++) {
    map.set(`${data[i]},${data[++i]},${data[++i]},`, 1);
  }

  const positions = [];
  const normals = [];
  const indices = [];
  for (var [key] of map) {
    const [x, y, z] = key.split(",").map((n) => Number(n));

    for (const { dir, corners } of faces) {

      // 根据不同的面判断对应方向是否存在相邻的点
      const neighbor = map.get(`${x+dir[0]},${y+dir[1]},${z+dir[2]}`);

      if (!neighbor) {
        const ndx = positions.length / 3;
        for (const pos of corners) {
          positions.push(pos[0] + x, pos[1] + y, pos[2] + z);
          normals.push(...dir);
        }
        indices.push(ndx, ndx + 1, ndx + 2, ndx + 2, ndx + 1, ndx + 3);
      }
    }
  }

  ctx.postMessage({
    positionFloat32: new Float32Array(positions),
    normalsFloat32: new Float32Array(normals),
    indices
  });
}, false);

// 监听错误事件
ctx.addEventListener('error', () => {
  console.log('error');
});

export default ctx;

主线程代码：

const worker = new Worker(new URL('point.worker.ts', import.meta.url), { type: 'module' });

worker.postMessage(data); // 发送数据到worker线程

worker.onmessage = (e) => {
  const {positionFloat32, normalsFloat32, indices} = e.data;

  // 注意：拿到解析好的数据后怎么渲染按照实际代码逻辑渲染
  const geometry = new THREE.BufferGeometry();
  geometry.setAttribute('position', new THREE.BufferAttribute(positionFloat32, 3));
  geometry.setAttribute('normal', new THREE.BufferAttribute(normalsFloat32, 3));
  geometry.setIndex(indices);
  const mesh = new THREE.Mesh(geometry, material); // 体素图对象
};

到这里，整体的前端渲染已经有了明显的优化效果体现，按照一秒渲染10帧左右，每一帧大概一万到两万个点可以很好渲染在页面上并且不会卡顿。

数据压缩优化​

上面描述了两种在前端的优化方案，确实能很优化不少渲染效果，但是优化不仅仅只是在客户端体验，毕竟数据的来源是在生产端（也就是提供数据的服务端），所以生产端也需要有一些对应的优化方案，优化传输效率。

数据整型压缩​

在threejs的三维世界里，每一个物体都是有对应的世界坐标x，y，z，而且这三个坐标系数都是浮点数，并不是整形数据。对于计算机，浮点数的计算过程比整数要复杂得多，并且浮点数的存储空间也比整数要大，所以尽可能地减少浮点数的计算和传输在我们这种高频率、大数据量的需求中是非常必要的。

在threejs三维世界中，假设有一个方块A坐标是{x: 0.1323, y: 1.8783, z: 3.5677}，并且方块大小是1，然后新建一个group容器，再创建一个方块B坐标为方块A坐标的10倍{x: 1.323, y: 18.783, z: 35.677}，大小也是方块A的10倍，接着将方块B放在容器group中，最后将容器缩小10倍，会发现方块A和方块B在三维世界里是几乎完全重合的：

// 创建红色的材质
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
function createBox(position: THREE.Vector3, size?: number) {
  const boxSize = size || 1;
  // 创建立方体的几何体
  const geometry = new THREE.BoxGeometry(boxSize, boxSize, boxSize);
  // 创建立方体并将几何体和材质添加到其中
  const cube = new THREE.Mesh(geometry, material);
  cube.position.copy(position);
  return cube;
}

const boxA = createBox(new THREE.Vector3(0.1323, 1.8783, 3.5677));
scene.add(boxA);

const group = new THREE.Group();
group.position.set(0,0,0);
const boxB = createBox(new THREE.Vector3(1.323, 18.783, 35.677), 10);
group.add(boxB);
group.scale.set(0.1,0.1,0.1);
scene.add(group);

按照上面的思路，只要每个方块的数据在服务端发送之前，将每个方块的坐标系数都做乘10处理，然后再取整，小数部分就不需要了，因为在渲染的时候相邻方块是贴在一起的，尽量不将方块重合。

这里再注意一个点，最好是传输正整数，也就是在遍历处理的时候记录下来最小负数值，然后将对应的x，y，z都加上最小值来归一化，接着为了尽量节省资源，在存储每一个数据尽量选用合适的存储类型，如果扫描的点范围不会特别大，基本在正负127以内，归一化之后就是0到255，那么我们就用UInt8Array来存储数据，如果不够用也可以使用UInt16Array。

数据结构优化​

优化之路不断进阶，总是会出现更大的数据来考验传输压力、客户端设备的渲染性能！！！

由于服务端只是一台性能较差的设备，上面部署了很多服务，CPU紧张，所以在传输这个体素图数据的时候传输压力还是蛮大的，为了再次缩减传输数据大小，只能再想办法。

如果每次传输的体素图是一堆立方体的点，并且每一帧体素图的空间大小范围比较固定，那服务端如果直接根据扫描得到点来绘制一张数据表，用来表示一个长宽高为固定值的容器中，每个单位空间中是否有存在立方体，就用0和1表示。

等等，看到0和1很容易想到二进制位，那将绘制出来的表按照每8位合成一个字节，那岂不是完美！每8位0和1组成二进制的数是0到255，对应一个UInt8Array存储大小。

我们来算一笔账吧，如果现在的体素图空间大概是长宽高为64x64x30（x轴最多扫描到64个方块，y轴最多扫描到64个方块，z轴最后扫描到30个方块），那一共最多可以扫描到 122880 个方块，假如每次实际能扫描的点位30000个。

• 按照原来的存储结构，每个点有x，y，z，三个坐标系数，每个坐标系数用一个UInt8Array，那就一共需要 30000 x 3 = 90000 个UInt8Array存储空间
• 新的存储结构，容器一共能容下122880个方块，每个方块都是用0和1表示，每8个方块组成一个字节，那一共需要 122880 / 8 = 15360 个UInt8Array存储空间

这笔账是不是很划算。当然，如果扫描范围不变，而每次扫描的点非常少，这种方案的效率是没有原来的好，但是我们最终还是要考虑到实际的场景。

这种结构传到前端也很方便使用，前端需要遍历data一遍即可，并且大多数都是0比较多，如果是0可以直接跳过。

const data = new Uint8Array(15360); // 假设是服务端传送的数据

// 计算对应位置的二进制位数据
const calBitForIndex = (decimal: number, i: number) => {
  return (decimal >> (7 - i)) & 1;
}

for (let i = 0; i < data.byteLength; i++) {
      if (data[i] > 0) {
        // 如果不是0  则表示该字节中对应的8个二进制位有存在1即表示存在方格
        const byte = data[i];
        // 遍历这个字节的8个二进制位上的数
        for (let j = 0; j < 8; j++) {
          const bit = calBitForIndex(byte, j);
          if (bit) {
            // 如果是1 则表示存在方格
            const voxelIndex = i * 8 + j;

            const z = Math.floor(voxelIndex / (cellSize_X * cellSize_Y));
            const xy = voxelIndex % (cellSize_X * cellSize_Y);
            const y = Math.floor(xy / cellSize_X);
            const x = xy % cellSize_X;

            for (const { dir, corners } of faces) {
              // ...  根据不同的面判断对应方向是否存在相邻的点 记录每个点的信息
            }
          }
        }
      }
    }

LZ4压缩​

LZ4 是一种非常快速的压缩和解压缩算法，在时间和空间上都能得到很不错压缩效果，用LZ4解压缩也能减少很多传输压力！！！

LZ4源码是C语言写的，但是也有各方大佬根据源码做了其他语言版本的扩展，它们符合 LZ4 和框架规范，因此可以互操作。这里提一下JavaScript版本的LZ4：浏览器版本（虽然是浏览器版本，但是是 CommonJS 模块） 和 Nodejs版本，本文比较推荐前端开发的朋友们，不管是用在浏览器端还是Node端，直接阅读Nodejs版本的官方样例和源码，然后从中摘取核心的压缩和解压缩代码，不需要引入整个库。

终极优化：WASM​

前端工程师最头疼的一件事情就是需要对不同型号的设备尽量做到雨露均沾！！！通过以上优化后信心满满在作者的iphone 11上跑，想看看效果，最后发现手机有延迟的现象，解释一下，这里的延迟不是网络延迟，是随着接收的帧数据越来越多的时候，画面会变卡，并且帧数据出现堆积现象。

首先为什么会出现堆积现象呢？因为我们是用的 Web Worker 来解析和计算帧数据，而 Web Worker 有一个特性，它使用消息队列模式进行通信，但它本身并不会阻塞主线程，消息队列确保了消息的顺序执行，并且在主线程中的任务队列为空时，才会处理 Worker 发送的消息。也就是说，当主线程向 Worker 发送消息时，该消息会被添加到 Worker 的消息队列中，然后 Worker 在合适的时机处理这些消息，如果主线程和 Worker 之间频繁地进行大量的消息传递，可能会导致消息队列中不断堆积帧数据，计算处理速度跟不上数据的堆积速度，导致明明是2分钟前得到帧数据，在2分钟后才慢慢渲染出来。

同样的，当 Worker 向主线程发送消息时，这些消息也会被添加到主线程的消息队列中，所以主线程也有可能会堆积了很多已经被处理完的数据，如果堆积了很多没来得及送给 threejs 去渲染的帧数据，就会导致页面卡顿。

为了解决堆积问题，那我们可以先简单做一个处理：在 Worker 接受处理的入口处加一个阀门来控制进出。每次送一帧数据给到 Worker 之后，加一个标记，当 Worker 处理完了返回结果之后再去除标记，如果标记未去除的时候有得到新的帧数据则不往 Worker 去送，直接忽略。这样可能会丢失一些帧数据，但是没办法，毕竟我们每次都希望渲染最新的数据嘛。

// 主线程
let workerActive = 0; // 1是激活  0是未激活

if(workerActive === 0) {
  worker.postMessage(data.data);
  workerActive = 1;
}
worker.onmessage = (e) => {
  workerActive = 0;
  // 进行渲染
};

为了不想让帧数据被忽略丢失，提高帧数据的处理速度才是关键！所以就需要用到 WebAssembly ，简称 WASM。

具体的介绍可以前往官网一探究竟，总而言之，WebAssembly 是可以将例如 C、C++和 Rust 等低级源语言编译成一种运行在现代网络浏览器中的新型代码，并且可以和js做交互，一些Web上复杂的计算场景和游戏很多都是基于WASM实现的。我们的场景刚好就很适合用WASM来做优化，将帧数据的计算交给C语言来处理，最后将C语言代码编程成.wasm文件在浏览器中运行。

首选要把处理逻辑用C语言来编写， 以下只是示例，具体实现方式按照实际逻辑编写：

/**
  input 是接受的帧数据
  用指针变量返回结果
 */
int generate(char *input, int *decompressed_data)
{
  // ... 定义相关变量
  // ...

  // LZ4解压后的数据
  *decompressed_data = LZ4_decompress_safe(input, decompress_buffer, input_size, decompress_buffer_size);

  for (int i = 0; i < *decompressed_data; i++){
    // 遍历帧数据做处理
  }
}

接着需要借助 Emscripten 来将C语言代码编译成wasm，什么是 Emscripten ，怎么使用前往官网查看，有详细教程不难。

接着在js Worker中将帧数据提交给wasm：

let voxelModule: WebAssembly.Module;
fetch('./voxel.wasm')
  .then((res) => {
    return res.arrayBuffer();
  })
  .then(WebAssembly.instantiate)
  .then((module) => {
    // ....
    voxelModule = module.instance.exports;
    // ....
  });


// 处理数据的地方
function dealData(data: Uint8Array) {
  // ....
  voxelModule.generate(data); // 传递给C进行处理
  // ....
}

最后实测，每一帧的处理速度由原先的70毫秒左右变成了6毫秒左右，整整快了十倍有余，方案可行！！

WebAssembly，改善了JavaScript，给了Web更好的性能和更多的可能，这无疑是打开了一个Web新世界。随着WebAssembly的技术越来越成熟，势必会有更多的应用，从Desktop被搬到Web上，这会使本来已经十分强大的Web更加丰富和强大。

创建项目​

因为 Create React App 是基于webpack的全量构建，当项目体积变大，开发时间和构建时间也会大幅增加。原因是，无论进行任何更改，CRA都会全量的重新构建应用。

Vite是按需构建的，将一个应用分为两个部分：依赖和源码。

• 依赖在开发过程中，基本不会变动。Vite使用esbuild（基于Go语言，比传统JS要快10-100倍）预打包了依赖，而且由于依赖变动极少，所以会被缓存起来以节省大量时间。
• 源码采用了ESM（ECMAScript modules）作为模块体系。好处是无需打包，按需加载，所以速度快的难以置信。

言归正传，开始创建项目。按照官网运行命令pnpm create vite，输入项目名，然后依次选择React、TypeScript创建项目。

创建好之后进入项目文件夹，运行pnpm install安装依赖，接着运行pnpm dev可以启动项目。

配置 Prettier​

Prettier 是一个代码格式化程序，侧重于代码格式化检查

运行命令安装Prettier pnpm add -D prettier，然后添加两个文件.prettierrc.js（Prettier的配置文件，定义Prettier的代码格式化规则） 和 .prettierignore（Prettier的忽略文件，定义不需要进行代码规范检查的文件）。完整的Prettier配置规范参考Prettier官方文档。

• .prettierrc.js 文件参考内容：

module.exports = {
  printWidth: 120, // 指定编译器换行的行长
  tabWidth: 2, // 指定每个缩进空格数
  endOfLine: 'auto', // 换行符 Linux环境文件行尾序列是CRLF Windows是LF
  semi: true, // 在语句的末尾输入分号
  singleQuote: true, // 使用单引号而不是双引号
  trailingComma: 'none', // 在多行逗号分隔的句法结构中尽可能输入尾随逗号
  bracketSpacing: true, // 在对象字面量中的括号之间输入空格
  jsxBracketSameLine: true, // 将多行 JSX 元素的 > 放在最后一行的末尾，而不是单独放在下一行
  arrowParens: 'always', // 在唯一的箭头函数参数周围包含括号
  useTabs: false, // 使用制表符而不是空格缩进行
  ignorePath: '.prettierignore',
  proseWrap: 'never',
  htmlWhitespaceSensitivity: 'strict',
};

• .prettierignore 文件参考内容：

# Ignore artifacts:
/node_modules
/dist
.prettierignore

以上是只是参考，可以按照实际需求去修改配置。

配置 ESLint​

ESLint可以保证代码一致性和避免错误，其实就是一个代码检查工具。

刚创建好的项目中默认带有.eslintrc.cjs这个文件，这是一个 CommonJS Module，ESLint的配置文件。因为vite默认使用ESM，为了能支持 CommonJS ,我们把package.json中的"type": "module"去掉，同时把文件.eslintrc.cjs手动改为.eslintrc.js。

以下是我常使用的eslint插件：

• eslint-config-prettier：禁用所有与格式相关的 eslint 规则，解决 prettier 与 eslint 规则冲突，确保将其放在 extends 队列最后，这样它将覆盖其他配置。
• eslint-plugin-prettier：基于 prettier 代码风格的 eslint 规则。
• eslint-plugin-import：ES2015 +（ES6 +）导入/导出语法的检查
• eslint-plugin-react：检测和规范React代码的书写的插件
• eslint-plugin-react-hooks：专门用来检查Hooks 是否正确被使用
• @typescript-eslint/parser：代替eslint默认的解析器 Espree 对 TypeScript 的进行解析
• eslint-plugin-react-refresh：验证您的组件是否可以通过快速刷新安全地更新。
• eslint-plugin-simple-import-sort： 自动修复的导入排序。

一口气安装和ESLint相关的插件

pnpm add -D eslint eslint-config-prettier eslint-plugin-import eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-react-refresh eslint-plugin-simple-import-sort @typescript-eslint/eslint-plugin @typescript-eslint/parser

接下来在.eslintrc.js中配置eslint的规则，以下是参考配置：

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended', // 整合typescript-eslint与prettier
    'prettier' // 使用prettier格式化代码
  ],
  overrides: [],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  plugins: ['react', '@typescript-eslint', 'prettier', 'simple-import-sort', 'import'],
  settings: {
    react: {
      version: 'detect'
    }
  },
  rules: {
    'no-var': 'error',
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'comma-dangle': ['error', 'only-multiline'],
    'no-shadow': 0, //  关闭全局的检查，采用 ts 的，避免 enum 的报错
    '@typescript-eslint/no-shadow': 2,
    'no-unused-vars': 0, // 关闭全局的检查，采用 ts 的，规避 enum 的报错
    '@typescript-eslint/no-unused-vars': 1,
    'prettier/prettier': 'error',
    'arrow-body-style': 'off',
    'prefer-arrow-callback': 'off',
    'react/jsx-uses-react': 'off', // React 17及以后引入了新的 JSX 编译方式，无须在组件中显式地 import React，可关闭
    'react/react-in-jsx-scope': 'off',
    'react/jsx-uses-vars': 'error',
    'react/no-unknown-property': ['error', { ignore: ['css'] }],
    // '@typescript-eslint/no-explicit-any': ['off'],
    'simple-import-sort/imports': [
      'error',
      {
        groups: [
          // Side effect imports.
          ['^\\u0000'],
          // Packages.
          // Things that start with a letter (or digit or underscore), or `@` followed by a letter.
          ['^@?\\w'],
          // Absolute imports and other imports such as Vue-style `@/foo`.
          // Anything not matched in another group.
          ['^'],
          // Relative imports.
          // Anything that starts with a dot.
          ['^\\.'],
          // 样式放最后
          ['.*\\.(s|(post))?css$']
        ]
      }
    ]
  }
};

配置 Stylelint​

虽然现在JSS（CSS in JS）很流行，尤其是React开发，更有react-jss的库出现，但是也无法让大多数前端开发兄弟们忘记传统css样式文件的编写手感，尤其像less、sass这样的预处理器，更让css拥有了更快捷、舒适的样式编写体验。

这里简单讲讲怎么配置Stylelint。附加的插件有这几个：

• stylelint-config-prettier：禁用所有与格式相关的 Stylelint 规则，解决 prettier 与 stylelint 规则冲突，确保将其放在 extends 队列最后，这样它将覆盖其他配置（可以使用自己喜欢的可共享配置，而不会在使用pettier 时妨碍其风格选择）
• stylelint-config-recess-order：用来指定样式排序，比如声明的块内(插件包)属性的顺序，例如：先写定位，再写盒模型，再写内容区样式，最后写 CSS3 相关属性。
• stylelint-config-standard：官网提供的 css 标准
• stylelint-prettier：基于 prettier 代码风格的 stylelint 规则

运行命令安装 Stylelint 相关库：

pnpm add -D stylelint stylelint-config-prettier stylelint-config-recess-order stylelint-config-standard stylelint-prettier

然后添加配置文件.stylelintrc.js，更多更详细配置参考Stylelint文档：

module.exports = {
  extends: ['stylelint-config-standard', 'stylelint-config-rational-order', 'stylelint-prettier/recommended'],
  rules: {
    'block-no-empty': true, // 禁止出现空块
    'declaration-empty-line-before': 'never', // 要求或禁止在声明语句之前有空行。
    'declaration-block-no-duplicate-properties': true, // 在声明的块中中禁止出现重复的属性
    'shorthand-property-no-redundant-values': true, // 禁止在简写属性中使用冗余值。
    'color-hex-length': 'short', // 指定十六进制颜色是否使用缩写
    'color-named': 'never', // 要求 (可能的情况下) 或 禁止使用命名的颜色
    'comment-no-empty': true, // 禁止空注释
    'font-family-name-quotes': 'always-unless-keyword', // 指定字体名称是否需要使用引号引起来 | 期待每一个不是关键字的字体名都使用引号引起来
    'font-weight-notation': 'numeric', // 要求使用数字或命名的 (可能的情况下) font-weight 值
    'no-descending-specificity': null // 禁止低优先级的选择器出现在高优先级的选择器之后
  }
};

添加样式检查忽略文件.stylelintignore：

*.js
*.tsx
*.ts
*.json
*.png
*.jpg
*.eot
*.ttf
*.woff

配置 tsconfig​

{
  "compilerOptions": {
    "baseUrl": "./", // 路径配置
    "outDir": "./dist",
    "paths": { "@": ["src"], "@/*": ["src/*"] },
    "target": "ESNext",
    "lib": ["DOM", "DOM.Iterable", "ESNext"], // 要包含在编译中的依赖库文件列表
    "module": "ESNext", // 指定模块代码生成
    "skipLibCheck": true, // 跳过所有声明文件的类型检查
    "allowJs": true, // 允许编译 JavaScript 文件
    "esModuleInterop": true, // 禁用命名空间引用 (import * as fs from "fs") 启用 CJS/AMD/UMD 风格引用 (import fs from "fs")
    "allowSyntheticDefaultImports": true, // 允许从没有默认导出的模块进行默认导入
    "forceConsistentCasingInFileNames": true, //    禁止对同一个文件的不一致的引用。
    "experimentalDecorators": true, // 启用对ES装饰器的实验性支持

    /* Bundler mode */
    "moduleResolution": "node", // 使用 Node.js 风格解析模块
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true, // 允许使用 .json 扩展名导入的模块
    "isolatedModules": true, // 将每个文件作为单独的模块
    "noEmit": true, // 不输出(意思是不编译代码，只执行类型检查)
    "jsx": "react-jsx",
    

    /* Linting */
    "strict": true, // 启用所有严格类型检查选项
    "noUnusedLocals": true, // 报告未使用的本地变量的错误
    "noUnusedParameters": true, // 报告未使用参数的错误
    "noFallthroughCasesInSwitch": true, // 报告switch语句的fallthrough错误。（即，不允许switch的case语句贯穿）
  },
  "include": ["src/**/*.ts", "src/**/*.tsx","src/**/*.d.ts", "lib"],
  "references": [{ "path": "./tsconfig.node.json"}]
}

最后​

以上一个简单的React项目创建的流程，整体配置属于比较简洁，最后再配置一下 vite.config.ts。修改 vite.config.ts 内容：

import { ConfigEnv, defineConfig, UserConfig } from 'vite';

import { createConfig } from './build';

// https://vitejs.dev/config/
export default defineConfig((params: ConfigEnv): UserConfig => {
  const config = createConfig(params);
  return config;
});

然后在根目录下新建 build 目录，然后新建 index.ts、plugins.ts、types.ts、utils.ts。

• index.ts：

import merge from 'deepmerge';
import { ConfigEnv, UserConfig } from 'vite';

import { createPlugins } from './plugins';
import { Configure } from './types';
import { pathResolve } from './utils';

export const createConfig = (params: ConfigEnv, configure?: Configure): UserConfig => {
  const isBuild = params.command === 'build';

  return merge<UserConfig>(
    {
      plugins: createPlugins(isBuild),
      resolve: {
        alias: {
          '@': pathResolve('src')
        }
      },
      css: {
        modules: {
          localsConvention: 'camelCaseOnly'
        }
      }
    },
    typeof configure === 'function' ? configure(params, isBuild) : {},
    {
      arrayMerge: (_d, s) => Array.from(new Set([..._d, ...s]))
    }
  );
};

• plugins.ts：

import react from '@vitejs/plugin-react';
import { PluginOption } from 'vite';

export function createPlugins(isBuild: boolean) {
  const vitePlugins: (PluginOption | PluginOption[])[] = [react()];
  return vitePlugins;
}

• types.ts：

import { ConfigEnv, UserConfig } from 'vite';

export type Configure = (params: ConfigEnv, isBuild: boolean) => UserConfig;

• utils.ts：

import { resolve } from 'path';

export const pathResolve = (dir: string) => resolve(__dirname, '../', dir);

从业这几年，平时在工作和学习中也遇到了不少技术问题，比如有一些不起眼的小问题，但自己在当时水平有限就是解决不了，也有一些实实在在能摆上台面的技术难点，花了不少时间从各个方面去下手最终解决。

所以遇到过这么多问题以及这些问题解决方案要是不做个记录，很快就会随着时间飘走了。

偶然发现一篇技术文章的作者就是用 Docusaurus 来做为他自己的知识体系载体，发现以写文档的形式去记录开发过程中的点滴也是挺不错的，并且 Docusaurus 的风格也是让我也别喜欢，就决心用 Docusaurus 来搭建一个自己的网站。

早期的时候也用 Hexo 搭建过自己的博客，但是没坚持太久，之前买的域名又过期了，续费还特别贵，就直接放弃了。

之前也开发过一个小程序，主要功能是用来收录前端方面的面试题，那时候我算是小程序云开发的比较早的一批尝鲜者，小程序云开发环境还是免费的，白嫖了两年多之后，突然云开发环境的最基础版也开始进行收费了，被迫缴费续了几个月，最后因为忘记续费，导致云开发环境被收回，数据也被彻底删除，很遗憾我这两年收录的面试题。所以在这里我同样想设立一个单独的目录来收录一些面试题，供自己学习复盘一些技术细节，更希望能给他人带来帮助。

搭建这个网站的初衷主要是记录自己积累的技术知识，以便能日后还能查看，同时如果能给其他的前端兄弟们提供一些灵感和帮助那自然更好。我会尽量以专业的话术去表述一些技术方案，文笔可能不会太好，如果表述不好或者内容不正确，欢迎大佬们指点纠正。