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

news2024/10/23 12:39:29

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