本篇文章前提 ：Taro 3.6版本 （React语法）



# Taro多端开发框架，兼容多平台需注意

## 1. 跨平台的时候，调用不同平台的sdK的时候

简单使用

```
- import api from '../../utils/api'
// 我们可以根据不同的平台，引入不同的 API
+ let api
+ if (process.env.TARO_ENV === 'weapp') {
+  api = require('../../utils/api-weapp')
+ } else if (process.env.TARO_ENV === 'h5') {
+  api = require('../../utils/api-h5')
+ }
```

使用内置的文件import识别，进行处理

> 假如有一个 Test 组件存在微信小程序、百度小程序和 H5 三个不同版本，那么就可以像如下组织代码：

```
├── test.js                Test 组件默认的形式，编译到微信小程序、百度小程序和 H5 之外的端使用的版本
├── test.weapp.js          Test 组件的微信小程序版本
├── test.swan.js           Test 组件的百度小程序版本
└── test.h5.js             Test 组件的 H5 版本
```
a. 四个文件，对外暴露的是统一的接口，它们接受一致的参数，只是内部有针对各自平台的代码实现。

b. 而使用 Test 组件的时候，引用的方式依然和之前保持一致。import 的是不带端类型的文件名，在编译的时候会自动识别并添加端类型后缀：
```
import Test from '../../components/test';
<Test argA={1} argA={2} />
```
## 2. 模板语法，变量声明

### 2.1 模板语法

a. 标签内部使用{}包裹变量
```
<h1>
  {user.name}
</h1>
```
b. 标签属性使用key={变量} / className为常见的class类名
```
<img
  className="avatar"
  src={user.imageUrl}
/>

// css的作用域写法
import styles from './style.css'
<img
  className={avatar["avatar"]}
  src={user.imageUrl}
/>
```
c. style属性是 style={ } JSX 大括号内的一个普通 {} 对象
```
<img
  style={{
    width: 200,
    height: 100
  }}
/>
```
d. 条件渲染
```
<View>
  {isLoggedIn ? (
    <AdminPanel />
  ) : (
    <LoginForm />
  )}
</View>

// 当你不需要 else 分支时，你也可以使用更简短的 逻辑 && 语法：
<View>
  {isLoggedIn && <AdminPanel />}
</View>
```

### 2.2 变量声明

```
import { useState } from 'react';

// 方法作用域内部声明 count为变量值 setCount为设置方法
function MyButton() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>
      Clicked {count} times
    </button>
  );
}
```

快速学习Taro用法，上手实践基础内容

### 清理系统资源

使用Docker提供的命令来清理未使用的系统资源，如悬挂的镜像、容器、网络和卷。

```bash
# 删除所有停止的容器  
docker container prune  
  
# 删除所有未使用的镜像（即没有被任何容器引用的镜像）  
docker image prune -a  
  
# 删除所有未使用的网络  
docker network prune  
  
# 删除所有未使用的卷  
docker volume prune  
  
# 或者你可以一次性清理所有未使用的资源  
docker system prune -a
```

关于使用docker进行快捷部署后期有效清理磁盘的方式

用自己的java微服务聚合动态生成景点H5分享页的教程

> 在优化Vue 3和Vite项目时，可以从多个方向入手，以提升构建速度、运行性能和开发体验。



## 1. 优化构建速度

**使用合适的插件**：确保只使用必要的插件，并尽量减少插件的数量。

> 例如，vite-plugin-legacy 可用于兼容老旧浏览器，但若不需要**兼容老旧浏览器**，可以省略。

[浅析@vite/plugin-legacy 插件实现与配置应用](https://juejin.cn/post/7368283009482915875)


![image.png](/static/img/be9c8c1b6181478c60b5e01431cfbb77.image.webp)

> 为打包后的文件提供传统浏览器兼容性支持，实现对现代构建和传统构建的控制，提高项目的兼容性和稳定性。<br />
> * 能够实现将现代JavaScript代码向传统浏览器兼容的代码转换，实现降级处理<br />
> * 能够通过配置的目标浏览器环境，对现代JavaScript代码进行转换，生成对应目标浏览器的兼容代码<br />
> * 能够通过配置，自主控制是否生成传统构建、现代构建的代码产物<br />

预构建依赖：利用Vite的依赖预构建功能，将大型依赖预先编译，从而加快开发服务器启动时间。

**SSR（Server-Side Rendering）优化**：如果使用SSR，确保SSR构建和客户端构建分离，以提高构建速度。

## 2. 代码分割和懒加载

**路由懒加载**：将路由组件按需加载，而不是在应用启动时加载所有组件。例如，使用import()来动态加载路由组件。<br />
**动态导入**：使用动态导入来分割代码，使得只在需要时才加载某些模块，从而减少初始加载时间。

## 3. 使用合适的配置

**生产环境优化**：确保在生产环境中使用vite build而不是vite serve。生产环境的构建会进行代码压缩和其他优化。<br />
**配置压缩插件**：使用如vite-plugin-compression来压缩生成的文件，从而减少文件大小和传输时间。

## 4. 图片和静态资源优化

**图片压缩**：使用如vite-imagetools等插件来压缩图片资源，减少图片文件大小。<br />
**使用现代图片格式**：如WebP格式，提供更好的压缩比和质量。<br />
**CDN托管**：将静态资源托管在CDN上，利用CDN的缓存和快速传输特点。

## 5. 缓存策略

**HTTP缓存**：配置服务器以利用浏览器缓存静态资源，减少不必要的资源请求。<br />
**Service Worker**：使用PWA（Progressive Web App）技术，利用Service Worker来缓存应用，提升离线访问和加载速度。

## 6. 代码质量和体积

**树摇（Tree Shaking）**：确保使用的是ES模块，并启用Vite的树摇功能，以移除未使用的代码。<br />
**代码压缩**：使用如Terser等工具进行代码压缩，减少代码体积。<br />
**CSS优化**：移除未使用的CSS，使用如PurgeCSS来分析和移除未使用的CSS规则。

## 7. 开发体验优化

**热模块替换（HMR）**：利用Vite内置的HMR功能，确保开发过程中模块能够快速热替换，而不需要全局刷新。<br />
**代码检查和格式化**：集成如ESLint和Prettier等工具，保持代码风格一致和减少错误。

## 8. 依赖优化

**按需引入库**：对于如lodash或ant-design-vue等大型库，使用按需引入的方式，减少引入不必要的代码。<br />
**第三方库的优化**：检查第三方库的大小，选择更轻量的替代品或者对其进行按需加载。

## 9. 性能监控和分析

**性能分析工具**：使用如Webpack Bundle Analyzer或Vite的分析工具来分析包的大小和性能瓶颈。<br />
**监控工具**：在生产环境中集成如Sentry等性能监控工具，及时发现和解决性能问题。

Vue3+Vite项目优化方向

## 前提

在新零售的项目开发上线后，发现大量留存定制pos机，在使用软件过程中发现如下问题

```
let b = {
    key: '5'
}
let a = {
    ...b,
    c: 'dd'
}
console.log(a)

第一次执行 输出a
{
    key: '5',
    c: 'dd'
}

第二次执行 输出a
{
    c: 'dd'
}
```

此现象出现呈现了在**开发电脑无法复现**，需要**特定机型的第二次调用才会复现**。不易排查

## 解决方案

```
let b = {
    key: '5'
}
// 保证实际场景中原对象不进行拷贝赋值
let a = JSON.parse(JSON.stringify(b))
a['c'] = 'dd'
console.log(a)

第一次执行 输出a
{
    key: '5',
    c: 'dd'
}

第二次执行 输出a
{
    key: '5',
    c: 'dd'
}
```