前端优化,解决页面加载慢

问题: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.includeoptimizeDeps.exclude 来优化依赖的预构建过程。
  • 使用 Rollup 插件:根据需要添加 Rollup 插件来进一步优化打包结果。

通过实施这些策略,你应该能够显著减少 Vite 打包后的 JS 文件大小,并提高 Vue 项目在 Nginx 服务器上的加载速度。记得在每次修改配置后重新构建项目并测试效果。

实践方式

由于有的方式已经在项目中采用了,发现nginx上没有配置压缩,于是采用该方法,链接如下
Nginx如何配置Gzip

真实效果截图如下

未优化前:

开启压缩:

去掉工作流代码:

相关推荐
无尽的大道16 分钟前
深入理解 Java 阻塞队列:使用场景、原理与性能优化
java·开发语言·性能优化
loey_ln20 分钟前
webpack配置和打包性能优化
前端·webpack·性能优化
建群新人小猿22 分钟前
会员等级经验问题
android·开发语言·前端·javascript·php
爱上语文23 分钟前
HTML和CSS 表单、表格练习
前端·css·html
djk888833 分钟前
Layui Table 行号
前端·javascript·layui
NightCyberpunk1 小时前
HTML、CSS
前端·css·html
xcLeigh1 小时前
HTML5超酷响应式视频背景动画特效(六种风格,附源码)
前端·音视频·html5
zhenryx1 小时前
前端-react(class组件和Hooks)
前端·react.js·前端框架
ZwaterZ2 小时前
el-table-column自动生成序号&&在序号前插入图标
前端·javascript·c#·vue