在 Web 开发中，静态资源（如 JavaScript、CSS、图像等）可能会占用大量的带宽，影响页面加载速度和性能。最近在做这方面的优化，以下是常用几种可以减少静态资源大小的策略，逐一尝试，顺手记录一下：
代码压缩和优化
对于 JavaScript 和 CSS，可以使用工具如 UglifyJS 或 CSSNano 来压缩和优化代码，移除不必要的空格、注释和符号。
在react项目中，默认使用的是 terser-webpack-plugin 来进行代码压缩，实际上并不需要自己配置，所以除非需要根据项目进行自定义其配置。
使用 Gzip 或 Brotli 压缩
很多 Web 服务器都支持 Gzip 或 Brotli 压缩，它可以在发送到浏览器之前将静态资源进行压缩，然后由浏览器解压缩。
详细的出门左转 react项目开启gzip压缩
利用树摇（Tree Shaking）技术
对于 ES6 模块，Webpack 等打包工具可以通过 Tree Shaking 移除没有被引用的代码，从而减少 JavaScript 文件的大小。
在大部分情况下，react项目的webpack已经默认开启了 Tree Shaking。
代码分割（Code Splitting）
使用像 Webpack 这样的打包工具，可以将代码分割成多个小的块（chunks），然后按需加载，这样可以避免一次性加载所有的代码。 在大部分情况下，react的webpack已经默认开启了 Code Splitting。
优化图片
对于图片，可以考虑使用压缩工具或者使用更小的格式。例如，可以使用 WebP 格式替代 JPEG 或 PNG，可以显著减少图片的大小 需要外部配合，而且并非所有的浏览器都支持 WebP 格式。暂且跳过。
使用CDN
使用内容分发网络 (CDN) 可以加快静态资源的传输速度。
详细的出门右转 react使用cdn加载第三方库
–未完待续–