问题:vue项目使用vite打包后,部署在nginx服务器上,页面上访问时很慢,发现有个js文件很大导致加载很慢
先说结论:
方式 | 时间 |
---|---|
未优化前 | 21s |
开启压缩(6级) | 6s |
去掉大依赖(flowable) | 2s |
当使用 Vite 打包 Vue 项目并部署在 Nginx 服务器上后,如果发现某个 JS 文件很大导致页面加载缓慢,可以采取以下优化策略:
1. 代码分割和懒加载
Vite 默认支持 Rollup 作为打包工具,Rollup 提供了强大的代码分割功能。你可以利用动态 import()
语法来按需加载组件,从而减小初始加载的 JS 文件大小。
- 路由级懒加载 :在 Vue Router 中配置路由时,使用动态
import()
来加载组件。
javascript
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:
nginx
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
模块):
nginx
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 缓存配置:
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
真实效果截图如下
未优化前:
开启压缩:
去掉工作流代码: