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

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

真实效果截图如下

未优化前：

开启压缩：

去掉工作流代码：