前端优化，解决页面加载慢
问题：vue项目使用vite打包后，部署在nginx服务器上，页面上访问时很慢，发现有个js文件很大导致加载很慢
先说结论：
| 方式 | 时间 |
|---|---|
| 未优化前 | 21s |
| 开启压缩（6级） | 6s |
| 去掉大依赖（flowable） | 2s |
当使用 Vite 打包 Vue 项目并部署在 Nginx 服务器上后，如果发现某个 JS 文件很大导致页面加载缓慢，可以采取以下优化策略：
1. 代码分割和懒加载
Vite 默认支持 Rollup 作为打包工具，Rollup 提供了强大的代码分割功能。你可以利用动态 import() 语法来按需加载组件，从而减小初始加载的 JS 文件大小。
- 路由级懒加载：在 Vue Router 中配置路由时，使用动态
import()来加载组件。
const routes = [
{
path: '/some-path',
component: () => import(/* webpackChunkName: "some-component" */ './views/SomeComponent.vue'),
},
// 其他路由配置...
];
注意：虽然这里注释了 webpackChunkName，但 Vite 使用的是 Rollup，这个注释不会被直接使用。不过，为了代码的可读性和未来可能的迁移，保留这样的注释也是可以接受的，或者你可以使用 Rollup 的 input 配置中的动态导入语法。
2. 优化依赖
- 外部化大型依赖：如果项目中包含大型的第三方库，并且这些库不会频繁更改，可以考虑将它们外部化，通过 CDN 加载。
- Tree Shaking：确保你的依赖项是 ES6 模块，并且 Vite 能够正确地进行 Tree Shaking，移除未使用的代码。
3. 压缩和混淆代码
Vite 在生产模式下默认会启用代码压缩和混淆。确保你使用的是 vite build --mode production 命令来构建项目。
4. 启用 Gzip 或 Brotli 压缩
在 Nginx 服务器上启用 Gzip 或 Brotli 压缩可以显著减小传输的文件大小。
- Nginx 配置 Gzip：
http {
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
gzip_min_length 256;
# 其他配置...
}
- Nginx 配置 Brotli（需要安装
ngx_brotli模块）：
http {
brotli on;
brotli_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
brotli_static off; # 动态压缩
brotli_comp_level 6; # 压缩级别，1-11，默认6
brotli_buffers 16 8k; # 缓冲区设置
# 其他配置...
}
5. 缓存策略
利用 Nginx 的缓存策略来缓存静态资源，包括 JS 文件。
- Nginx 缓存配置：
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
expires 30d; # 缓存时间
add_header Cache-Control "public, no-transform";
# 可以添加更多的缓存控制头，如 ETag、Last-Modified 等
}
6. 分析和优化打包结果
使用 Rollup 的分析工具（如 rollup-plugin-visualizer）来分析打包后的文件大小，找出哪些模块或库占用了大部分空间。虽然 Vite 没有直接集成这个插件，但你可以通过配置 Vite 的 Rollup 选项来添加它。
7. 检查网络性能
- 网络延迟：使用网络测速工具检查服务器到客户端的网络延迟。
- CDN 加速：如果服务器和客户端之间的地理距离较远，考虑使用 CDN 来加速资源加载。
8. 优化 Vite 配置
- 减少打包范围：通过配置
optimizeDeps.include和optimizeDeps.exclude来优化依赖的预构建过程。 - 使用 Rollup 插件：根据需要添加 Rollup 插件来进一步优化打包结果。
通过实施这些策略，你应该能够显著减少 Vite 打包后的 JS 文件大小，并提高 Vue 项目在 Nginx 服务器上的加载速度。记得在每次修改配置后重新构建项目并测试效果。
实践方式
由于有的方式已经在项目中采用了，发现nginx上没有配置压缩，于是采用该方法，链接如下
Nginx如何配置Gzip
真实效果截图如下
未优化前：
开启压缩：
去掉工作流代码：
原文地址：https://blog.csdn.net/qq_42535394/article/details/142882589
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！