预渲染

由于SPA项目影响渲染速度，我们可以把部分页面渲染成静态页面

预渲染适合静态页面/或者变化不大的页面

在Webpack中，可以使用插件来实现预渲染。以下实现预渲染的常用插件

prerender-spa-plugin

实现预渲染

1、创建一个prerender.js新文件，以使用React DOM的renderToString函数将React组件渲染为HTML字符串。
2、修改webpack配置，添加一个新的入口文件，新的entry属性来将prerender.js文件添加为Webpack的入口文件
3、使用html-webpack-plugin插件来生成HTML文件并将预渲染内容插入到HTML文件中
4、HtmlWebpackPlugin，分别对应我们的index.html和prerender.html模板。其中chunks属性指定需要引入的chunk，也就是入口文件，这里分别对应main和prerender。
5、创建src/index.html文件和src/prerender.html文件，分别作为我们生成的HTML文件的模板。可以先创建一个通用的模板，然后在生成HTML文件时再替换相关内容。
6、将预渲染的HTML字符串插入到HTML文件中。在src/prerender.html中添加以下代码

js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    main: './src/index.js',
    prerender: './src/prerender.js'
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html',
      filename: 'index.html',
      chunks: ['main'] // 指定使用的chunk
    }),
    new HtmlWebpackPlugin({
      template: 'src/prerender.html',
      filename: 'prerender.html',
      chunks: ['prerender'] // 指定使用的chunk
    })
  ]
};

实现预渲染​

实现预渲染