文章目录
- 使用CDN
- 1. 请求定位：
- 2.内容缓存：
- 3.负载均衡：
- 4.边缘计算：
- 优化Webpack
- 1.合理配置Loader：
- 2.优化代码分割：
- 3.压缩和优化输出文件：
- 4.利用Tree Shaking：
- 5.优化解析速度：
- 6.利用多线程和并行处理：
- 7.优化Dev Server性能：
- 8.监控和分析构建性能：
- 9.保持Webpack版本更新：
- 10.自定义插件和扩展：
- 优化代码
- 1.防抖节流
- 2.图片懒加载和预加载
- 3.骨架屏
- 4.减少定时器的使用以及及时删除定时器
使用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）是一种前端技术，它在页面数据加载完成前，先给用户展示出页面的大致结构（通常是以灰色或其他颜色填充的占位图）。当接口数据加载完成后，这些占位图会被实际的内容所替换。骨架屏本质上是界面加载过程中的过渡效果，它可以在一定程度上降低用户的等待焦虑，使界面加载过程变得更加自然和流畅。
