[现代 JavaScript 教程](https://zh.javascript.info/)


![image.png](https://seek.wiki/static/img/1a38c5553e190618eb825f790c8ab078.image.png)

![image.png](https://seek.wiki/static/img/73bdbedf622c25b9ae46b574c739cb61.image.png)


![image.png](https://seek.wiki/static/img/3cbe5be6c2fbd9beec63c4ee03b6683b.image.png)


![image.png](https://seek.wiki/static/img/3dd57ebcb1319700b8f32b86f767c3bc.image.png)

强推高级web相关电子书

加密信息

### 清理系统资源

使用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)

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

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

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

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

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

## 3. 使用合适的配置

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

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

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

## 5. 缓存策略

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

## 6. 代码质量和体积

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

## 7. 开发体验优化

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

## 8. 依赖优化

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

## 9. 性能监控和分析

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