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

问题: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

真实效果截图如下

未优化前:

开启压缩:

去掉工作流代码:

相关推荐
小政爱学习!18 分钟前
封装axios、环境变量、api解耦、解决跨域、全局组件注入
开发语言·前端·javascript
魏大帅。23 分钟前
Axios 的 responseType 属性详解及 Blob 与 ArrayBuffer 解析
前端·javascript·ajax
花花鱼29 分钟前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
k093333 分钟前
sourceTree回滚版本到某次提交
开发语言·前端·javascript
EricWang13581 小时前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
September_ning1 小时前
React.lazy() 懒加载
前端·react.js·前端框架
web行路人1 小时前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
人工智能培训咨询叶梓1 小时前
探索开放资源上指令微调语言模型的现状
人工智能·语言模型·自然语言处理·性能优化·调优·大模型微调·指令微调
超雄代码狂1 小时前
ajax关于axios库的运用小案例
前端·javascript·ajax
长弓三石2 小时前
鸿蒙网络编程系列44-仓颉版HttpRequest上传文件示例
前端·网络·华为·harmonyos·鸿蒙