面试题：Webpack懒加载与服务器端渲染（SSR）结合时，如何确保SEO最佳实践

Webpack配置

代码分割：

使用splitChunks插件进行代码分割，确保公共代码和懒加载代码能够正确分离。例如：

module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name:'vendors',
          chunks: 'all'
        }
      }
    }
  }
};

对于懒加载组件，使用动态导入语法import()，Webpack会自动将其分割成单独的文件。例如在React项目中：

const MyLazyComponent = React.lazy(() => import('./MyLazyComponent'));

SSR友好配置：
- 使用@babel/plugin-syntax-dynamic-import插件，它允许Babel解析动态导入语法，同时确保在SSR环境下能够正确处理代码。在.babelrc或babel.config.js中配置：
```
{
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}
```
- 配置Webpack的output，确保生成的文件路径和命名符合SSR的要求。例如，设置libraryTarget为umd，以便在服务器和客户端都能正确使用：
```
module.exports = {
  //...
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[chunkhash].js',
    libraryTarget: 'umd'
  }
};
```

SSR框架选择与整合

框架选择：

React：搭配Next.js框架，它对SSR和代码分割有良好的支持。Next.js可以自动处理页面的懒加载，并且其内置的getStaticProps和getServerSideProps方法可以有效地为爬虫提供数据，提升SEO。例如，在页面组件中：

export async function getStaticProps() {
  const data = await fetch('https://api.example.com/data');
  const json = await data.json();
  return {
    props: {
      data: json
    },
    revalidate: 60 // 可选，用于增量静态再生
  };
}
const MyPage = ({ data }) => {
  return (
    <div>
      {data.map(item => (
        <div key={item.id}>{item.title}</div>
      ))}
    </div>
  );
};
export default MyPage;

Vue：使用Nuxt.js框架，它同样易于实现SSR和懒加载。Nuxt.js通过asyncData方法来获取服务器端数据，并且对代码分割和懒加载组件的处理也很方便。例如：

export default {
  async asyncData({ $axios }) {
    const response = await $axios.get('https://api.example.com/data');
    return {
      data: response.data
    };
  },
  components: {
    MyLazyComponent: () => import('~/components/MyLazyComponent.vue')
  }
};

整合：
- 在项目中，将Webpack配置与SSR框架进行整合。例如，在Next.js项目中，Webpack配置会被Next.js自动读取和应用，只需要按照上述Webpack配置的要求设置即可。在Nuxt.js项目中，也可以通过nuxt.config.js中的extendWebpack方法对Webpack配置进行扩展和定制。例如：
```
export default {
  extendWebpack(config) {
    config.optimization.splitChunks = {
      chunks: 'all',
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name:'vendors',
          chunks: 'all'
        }
      }
    };
  }
};
```

爬虫友好的内容输出

预渲染：
- 利用SSR框架的预渲染功能，确保在服务器端生成完整的HTML页面。例如，在Next.js中使用getStaticProps方法生成静态HTML页面，爬虫可以直接获取到页面的主要内容。
- 在Nuxt.js中，使用generate命令进行静态站点生成，生成的HTML文件包含完整的内容，对爬虫友好。

Meta标签和结构化数据：

在页面组件中，设置正确的Meta标签，包括title、description、keywords等，以提供给搜索引擎准确的页面信息。例如在React项目中使用react - helmet库：

import React from'react';
import Helmet from'react - helmet';
const MyPage = () => {
  return (
    <div>
      <Helmet>
        <title>My Page Title</title>
        <meta name="description" content="This is a description of my page" />
        <meta name="keywords" content="keyword1, keyword2, keyword3" />
      </Helmet>
      {/* 页面内容 */}
    </div>
  );
};
export default MyPage;

对于结构化数据，如JSON - LD格式的Schema.org数据，在页面中添加，帮助搜索引擎更好地理解页面内容。例如：

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "My Article Title",
  "datePublished": "2023 - 01 - 01",
  "author": {
    "@type": "Person",
    "name": "John Doe"
  },
  "articleBody": "This is the body of my article..."
}
</script>

避免JavaScript依赖渲染内容：
- 确保页面的关键内容，如标题、描述、主要文本等，不依赖于JavaScript的执行来渲染。因为爬虫可能不会执行JavaScript，所以这些内容应该在服务器端渲染时就已经存在于HTML中。在设计页面布局和组件时，优先考虑将重要内容直接在模板中渲染。

星途面试题库

面试题：Webpack懒加载与服务器端渲染（SSR）结合时，如何确保SEO最佳实践

知识考点

面试题答案

Webpack配置

SSR框架选择与整合

爬虫友好的内容输出