聊聊前端MPA（Multi-Page Application）与SPA（Single-Page Application）架构优化篇（3）

相信大家读完前面两篇已经对MPA与SPA架构有了一定认识，如果还没有看过前面两篇的童鞋，点击下方链接

接下来进入正题，我们接着来看看优化怎么实施

1、性能优化

1、1 MPA优化

// 1. 静态资源缓存
// server.js - 设置缓存头
app.use(express.static('public', {
  maxAge: '1d',
  etag: false
}));

// 2. 模板缓存
app.set('view cache', true);

// 3. CDN 加速
// 使用CDN分发静态资源
<script src="https://cdn.example.com/jquery.min.js"></script>

// 4. 资源按需加载
// 每个页面只加载需要的CSS和JS

1.2 SPA优化

// vite.config.js
export default defineConfig({
  build: {
    // 代码分割
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['vue', 'vue-router', 'pinia'],
          utils: ['lodash', 'axios', 'dayjs']
        }
      }
    },
    // 压缩优化
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true
      }
    }
  },
  // 预加载优化
  plugins: [vue()]
});

// 路由懒加载
const ProductDetail = () => import('./views/ProductDetail.vue');

// 组件懒加载
const HeavyComponent = defineAsyncComponent(() => 
  import('./components/HeavyComponent.vue')
);

// 虚拟滚动优化长列表
<VirtualList :items="largeList" :item-size="50">
  <template #default="{ item }">
    <ProductCard :product="item" />
  </template>
</VirtualList>

2、SEO 解决方案

2.1 MPA SEO

<!-- 服务端渲染完整内容 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>产品列表 - 我的电商网站</title>
    <meta name="description" content="优质产品推荐...">
    <meta name="keywords" content="产品,电商,购物">
</head>
<body>
    <h1>产品列表</h1>
    <div class="products">
        <!-- 服务端渲染的产品列表 -->
        <div class="product">
            <h2>产品名称</h2>
            <p>产品描述...</p>
        </div>
    </div>
</body>
</html>

2.2 SPA SEO

// 1. 服务端渲染 (SSR)
// 使用 Nuxt.js (Vue) 或 Next.js (React)

// 2. 预渲染 (Prerendering)
// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import prerender from '@prerenderer/rollup-plugin';

export default defineConfig({
  plugins: [
    vue(),
    prerender({
      routes: ['/', '/about', '/products'],
      renderer: '@prerenderer/renderer-puppeteer'
    })
  ]
});

// 3. 动态 meta 管理
// useMeta.js 组合式函数
export function useMeta(meta) {
  const { title, description, keywords } = meta;
  
  watchEffect(() => {
    if (title) {
      document.title = title;
    }
    
    let descriptionTag = document.querySelector('meta[name="description"]');
    if (!descriptionTag) {
      descriptionTag = document.createElement('meta');
      descriptionTag.name = 'description';
      document.head.appendChild(descriptionTag);
    }
    descriptionTag.content = description || '';
    
    // 类似处理其他meta标签
  });
}

// 在组件中使用
setup() {
  useMeta({
    title: '产品详情',
    description: '产品详细描述信息...',
    keywords: '产品,详情,购买'
  });
}

总结：MPA 和 SPA 各有适用场景，现代项目往往采用混合方案。选择时需综合考虑项目需求、团队能力、性能要求和SEO需求