前端预渲染的坑

在开发一个官网项目时，由于使用传统的多页面开发模式，不利于做优化。为了解决这个问题，可以使用代理，将cdn地址代理到本地。

我查阅了几篇文章，发现大部分文章都建议重新用node起一个代理服务，但其实prerender-spa-plugin本身就可以设置代理。在使用prerender-spa-plugin时，我遇到了以下几个问题：

1. 代理不生效

devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:8000',
                pathRewrite: { '^/api': '' }
            }
        }
    }

在这样的配置下，代理是不生效的。需要将代理配置改为如下：

devServer: {
        proxy: 'http://localhost:8000'
    }

2. 预渲染的页面无法加载资源
   在使用prerender-spa-plugin预渲染页面时，发现预渲染的页面无法加载资源。这是因为prerender-spa-plugin在预渲染页面时，会将页面中的资源URL替换成相对路径。然而，在实际环境中，这些资源可能并不存在于相对路径下。

为了解决这个问题，可以在prerender-spa-plugin的配置中，将resolveAssets选项设置为true。这样，prerender-spa-plugin就会在预渲染页面时，将页面中的资源URL替换成绝对路径。

    plugins: [
        new PrerenderSPAPlugin({
            staticDir: path.join(__dirname, 'dist'),
            outputDir: path.join(__dirname, 'dist/_prerendered'),
            indexPath: path.join(__dirname, 'dist/index.html'),
            routes: ['/', '/about', '/contact'],
            postProcessHtml: html => html.replace(/href="\//g, 'href="/'),
            resolveAssets: true
        })
    ]

3. 预渲染的页面加载速度慢
   在使用prerender-spa-plugin预渲染页面时，发现预渲染的页面加载速度很慢。这是因为prerender-spa-plugin在预渲染页面时，会将页面中的所有资源都下载下来，然后再将这些资源嵌入到预渲染的页面中。

为了解决这个问题，可以在prerender-spa-plugin的配置中，将include选项设置为true。这样，prerender-spa-plugin就会只预渲染页面中的HTML和CSS，而不会预渲染页面中的其他资源。

    plugins: [
        new PrerenderSPAPlugin({
            staticDir: path.join(__dirname, 'dist'),
            outputDir: path.join(__dirname, 'dist/_prerendered'),
            indexPath: path.join(__dirname, 'dist/index.html'),
            routes: ['/', '/about', '/contact'],
            postProcessHtml: html => html.replace(/href="\//g, 'href="/'),
            include: ['html', 'css']
        })
    ]

通过对以上问题的解决，我成功地实现了前端预渲染。希望我的分享能够帮助您避免在使用前端预渲染时遇到的问题，提高网站的SEO排名和用户体验。