前端如何优化工程

文章目录

- 使用CDN
- - [1. 请求定位：](#1. 请求定位：)
  - 2.内容缓存：
  - 3.负载均衡：
  - 4.边缘计算：
- 优化Webpack
- - 1.合理配置Loader：
  - 2.优化代码分割：
  - 3.压缩和优化输出文件：
  - [4.利用Tree Shaking：](#4.利用Tree Shaking：)
  - 5.优化解析速度：
  - 6.利用多线程和并行处理：
  - [7.优化Dev Server性能：](#7.优化Dev Server性能：)
  - 8.监控和分析构建性能：
  - 9.保持Webpack版本更新：
  - 10.自定义插件和扩展：
- 优化代码

使用CDN

cdn是通过互联网相互连接的电脑网络系统，通过确定用户地址，用离用户最近的服务器，传输声音，图片，视频等资源给用户。加快用户数据的响应。
原理：

1. 请求定位：

当用户发起请求时，CDN系统会根据用户的IP地址和DNS解析结果，将请求定位到距离用户最近的服务器节点。这种定位机制确保用户可以从最近的网络节点获取内容，从而大大减少传输延迟。

2.内容缓存：

CDN服务器节点会缓存用户请求的内容。当收到用户请求时，节点会首先检查是否已经缓存了该内容。如果内容已缓存，则直接返回给用户，避免了从源服务器获取内容的过程，从而大大提高了响应速度。

动态内容加速：对于动态生成的内容，CDN服务器会与源服务器建立连接，将用户请求转发给源服务器进行处理，并将处理结果缓存到CDN节点上。这样，对于后续的相同请求，CDN节点可以直接从缓存中提供内容，从而实现对动态内容的加速。

3.负载均衡：

CDN系统会自动监控各节点的负载情况。当某个CDN节点的负载过高或出现故障时，系统会自动将用户请求转发到其他可用节点上，确保用户始终获得最佳的访问体验。

4.边缘计算：

CDN节点不仅可以缓存内容，还可以部署计算资源，对内容进行实时加工处理，如图片压缩、视频转码等。这种边缘计算的方式进一步减少了传输的数据量和延迟。

优化Webpack

1.合理配置Loader：

根据项目需求，选择适当的Loader，并避免不必要的Loader。

利用include和exclude属性，指定Loader处理的文件范围，减少不必要的转换。

使用cache-loader或Webpack 5的持久化缓存功能，缓存Loader的转换结果，提高构建速度。

2.优化代码分割：

使用optimization.splitChunks进行代码分割，将公共代码提取到单独的文件中，实现代码的复用和懒加载。

利用动态导入（import()）实现组件级别的代码分割，减少首屏加载时间。

3.压缩和优化输出文件：

使用TerserPlugin压缩JavaScript代码。

利用OptimizeCSSAssetsPlugin或cssnano压缩CSS代码。

通过compression-webpack-plugin对输出文件进行Gzip或Brotli压缩，减少文件大小和网络传输时间。

4.利用Tree Shaking：

确保项目中使用的库支持ES6模块语法，以便利用Tree Shaking功能去除未使用的代码。

在package.json中设置sideEffects属性，告知Webpack哪些文件具有副作用，以便更准确地去除未使用的代码。

5.优化解析速度：

通过配置resolve.modules和resolve.extensions，减少Webpack在解析模块时的搜索范围。

使用resolve.symlinks设置为false，避免解析符号链接，提高解析速度。

6.利用多线程和并行处理：

使用thread-loader或happypack将Loader的执行过程分散到多个子进程中，提高构建速度。

利用Webpack 5的持久化缓存和并行处理功能，进一步提高构建性能。

7.优化Dev Server性能：

配置Dev Server使用热模块替换（HMR），实现快速更新而不需要重新加载整个页面。

调整Dev Server的compress和hot选项，根据项目需求进行优化。

8.监控和分析构建性能：

使用Webpack Bundle Analyzer分析构建结果，找出可能的优化点。

监控构建过程中的性能瓶颈，针对瓶颈进行优化。

9.保持Webpack版本更新：

关注Webpack的更新日志和发布说明，及时将项目中的Webpack版本升级到最新版本，以便利用最新的优化和功能。

10.自定义插件和扩展：

如果需要，可以编写自定义的Webpack插件或扩展，针对特定需求进行性能优化。

优化代码

1.防抖节流

主要业务场景：1.防抖，输入框的检索功能，多次改变input的值，延迟时间不断刷新，最后一次调用接口。2.节流，滚动获取数据列表，再次的滚动请求接口，只有等待前面接口调用结束之后才可以。

2.图片懒加载和预加载

主要原理：

懒加载：img标签只有展示在可视区域才会加载图片。之前使用默认图片占位。

预加载：前端项目中的图片预加载是指在页面加载时，提前加载页面中需要使用的图片资源，并将它们缓存在浏览器中。这样，当用户需要查看这些图片时，就可以直接从缓存中获取，减少等待时间，提升用户体验。

3.骨架屏

骨架屏（Skeleton Screen）是一种前端技术，它在页面数据加载完成前，先给用户展示出页面的大致结构（通常是以灰色或其他颜色填充的占位图）。当接口数据加载完成后，这些占位图会被实际的内容所替换。骨架屏本质上是界面加载过程中的过渡效果，它可以在一定程度上降低用户的等待焦虑，使界面加载过程变得更加自然和流畅。