当前位置：首页 > web >正文

海外独立站VUE3加载优化

web 2025/5/3 2:12:30

主要有几个明显问题

1. 请求数量太多（139 requests）

网页请求了*大量 JS 文件*（都是 index-xxxx.js），而且每个文件都比较小。

每次建立请求都有 TCP 连接开销（特别是 HTTP/1.1），导致整体加载时间拉长。

解决办法：

打包合并 JS 资源：用 Webpack/Vite 等工具做更细致的打包，减少文件数量。

//  vite.config.jsimport { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import viteCompression from 'vite-plugin-compression'
import { visualizer } from 'rollup-plugin-visualizer'
import viteImagemin from 'vite-plugin-imagemin'export default defineConfig({plugins: [vue(),// gzip 压缩viteCompression({threshold: 10240,algorithm: 'gzip',ext: '.gz'}),// 图片压缩viteImagemin({gifsicle: { optimizationLevel: 7, interlaced: false },optipng: { optimizationLevel: 7 },mozjpeg: { quality: 65 },pngquant: { quality: [0.65, 0.9], speed: 4 },svgo: {plugins: [{ name: 'removeViewBox' },{ name: 'removeEmptyAttrs', active: false }]}}),// 打包分析visualizer({open: true,gzipSize: true,brotliSize: true})],build: {target: 'es2015',minify: 'terser',terserOptions: {compress: {drop_console: true,drop_debugger: true}},cssCodeSplit: true, // css代码分割sourcemap: false,chunkSizeWarningLimit: 1000,assetsDir: 'static',rollupOptions: {output: {manualChunks(id) {if (id.includes('node_modules')) {return 'vendor';}if (id.includes('src/components')) {return 'common';}},chunkFileNames: 'static/js/[name]-[hash].js',entryFileNames: 'static/js/[name]-[hash].js',assetFileNames: 'static/[ext]/[name]-[hash].[ext]'}}},server: {host: '0.0.0.0',port: 3000,open: true,proxy: {'/api': {target: 'http://你的后端接口地址',changeOrigin: true,rewrite: path => path.replace(/^\/api/, '')}}}
})

启用 HTTP/2 或 HTTP/3：如果服务器支持，HTTP/2 多路复用能显著提升加载速度。

# 本地检测 HTTP/2
curl -I -k --http2 https://yourdomain.com# 本地检测 HTTP/3 (需要curl版本高)
curl -I --http3 https://yourdomain.com# 在线测HTTP/2
tools.keycdn.com/http2-test# 在线测 测HTTP/3
cloudflare-quic.com

同时开启nginx的http2/http3

server {listen 443 ssl http2;listen [::]:443 ssl http2;listen 443 quic reuseport;listen [::]:443 quic reuseport;server_name yourdomain.com;ssl_certificate     /path/to/fullchain.pem;ssl_certificate_key /path/to/privkey.pem;ssl_protocols TLSv1.3; # 注意，只能TLSv1.3ssl_prefer_server_ciphers off;# QUIC specific settingsssl_early_data on;add_header Alt-Svc 'h3=":443"'; # 告诉浏览器可以用h3add_header QUIC-Status $quic;root /your/project/path;index index.html;location / {try_files $uri $uri/ /index.html;}
}

2. 静态资源未压缩

很多 JS/CSS 文件在传输时体积较大，例如：

- inject.ed.js 有 4.9MB，且没有 gzip 或 brotli 压缩。

- card.vue_type_style_index_0_lang-xxx.js 系列很多几十 KB，可以进一步压缩。

解决办法：

开启 gzip 或 brotli 压缩：

- Nginx 配置 gzip on; 并加上 gzip_types application/javascript text/css。

- Brotli（更好，特别是 JS/CSS）可以进一步减小体积。

3. 首屏渲染慢

看到 DOMContentLoaded: 1.7s，Load 完成：2.2s，而整体 finish 花了 12.6分钟（这说明后面有很多慢资源/异步资源）。

重要内容要等很多资源回来才能渲染。

解决办法：

按需加载（Lazy Load）

只在用户需要时再加载不重要的 JS 模块或图片。
样式、首屏必要组件要提前加载，其他延迟。
使用 Skeleton Screen 骨架屏

提高用户的视觉反馈，不要一直白屏。

4. 图片处理不合理

很多图片是原图直接传输（看到了 500KB+、800KB 的 png）。

图片格式老（PNG），没有用更现代的 WebP 或 AVIF。

解决办法：

图片压缩+格式优化：

小图片可以转成 WebP/AVIF，体积减少 50%以上。
无损压缩工具：tinypng、imagemin。
CDN 加速图片资源
图片放到 CDN 上，靠近用户快速分发。

5. 缓存优化

很多静态资源没有合理设置缓存头（或者看不到缓存信息）。

每次访问都重新请求了静态文件。

解决办法：

给 JS、CSS、图片资源加上 Cache-Control 头，例如：
Cache-Control: max-age=31536000, immutable
文件名带 hash（例如 index-xxxx.js），更新文件时浏览器自然重新拉取。

6. 预连接/预加载

目前页面没有看到用 preconnect、dns-prefetch、preload。

比如 card-bin?mainTitle=Apple 加载时依赖了很多静态资源，预连接可以加速首次请求。

解决办法：

在 <head> 提前加上：
{{<link rel="preconnect" href="https://你的静态资源域名.com">
<link rel="dns-prefetch" href="https://你的静态资源域名.com">}}
把重要 JS/CSS 用 <link rel="preload"> 提前加载。