使用prerender-spa-plugin实现Vanilla JS项目的静态预渲染
什么是prerender-spa-plugin
prerender-spa-plugin是一个基于Webpack的插件，它能够将单页应用(SPA)在构建时预渲染成静态HTML文件。这对于改善应用的SEO和首屏加载速度非常有帮助。
为什么需要预渲染
传统的单页应用在初始加载时通常只有一个空的HTML外壳，然后通过JavaScript动态生成内容。这种方式虽然用户体验流畅，但对搜索引擎爬虫不友好，也不利于首屏性能。预渲染技术可以在构建阶段就生成完整的HTML内容，兼顾了SPA的交互体验和传统多页应用的SEO优势。
项目结构解析
这个示例项目展示了如何在Vanilla JS（纯JavaScript）项目中使用prerender-spa-plugin。项目配置了三个静态路由：
- 根路径
/ - 关于页面
/about - 深层嵌套路由
/some/deep/nested/route
如何使用
1. 安装依赖
首先需要安装项目依赖：
npm install
2. 构建项目
运行构建命令将生成预渲染后的静态文件：
npm run build
构建完成后，会在项目目录下生成dist文件夹，里面包含了预渲染后的静态文件。
3. 查看效果
为了查看预渲染效果，可以使用任意静态文件服务器。例如安装http-server：
npm install -g http-server
然后在dist目录下运行：
http-server
访问以下URL查看效果（注意保留末尾斜杠）：
- 首页：http://localhost:8000/
- 关于页：http://localhost:8000/about/
- 深层路由：http://localhost:8000/some/deep/nested/route/
你会注意到页面内容已经预先渲染完成，包括动态生成的内容（如示例中的TODO列表）。
配置详解
预渲染的核心配置位于webpack.config.js文件中，主要关注PrerenderSPAPlugin插件的配置项：
new PrerenderSPAPlugin({
// 静态文件输出目录
staticDir: path.join(__dirname, 'dist'),
// 需要预渲染的路由
routes: ['/', '/about', '/some/deep/nested/route'],
// 其他可选配置...
})
主要配置项说明
staticDir: 指定构建输出的静态文件目录routes: 需要预渲染的路由数组，每个路由对应一个HTML文件postProcess: 可选的HTML后处理函数renderer: 配置渲染器选项，如超时时间、是否显示控制台输出等
自定义配置
如果需要添加更多路由或修改现有路由，只需编辑routes数组即可。例如：
routes: [
'/',
'/about',
'/contact',
'/products',
'/products/:id'
]
对于动态路由（如/products/:id），可以通过renderer配置提供具体参数。
技术原理
prerender-spa-plugin的工作原理是：
- 启动一个无头浏览器（如Puppeteer）
- 访问指定的路由
- 等待页面完全加载（包括异步数据）
- 将渲染完成的DOM序列化为HTML
- 保存为静态文件
这个过程确保了生成的HTML包含了所有动态内容，就像用户在浏览器中看到的一样。
注意事项
- 确保路由路径以斜杠开头
- 对于动态内容，需要确保预渲染时有足够的时间加载（可通过
renderer配置超时时间） - 预渲染不会执行某些浏览器特有的API，如地理位置等
- 生产环境部署时，服务器应配置为优先返回预渲染的HTML文件
总结
通过prerender-spa-plugin，我们可以轻松地为Vanilla JS项目添加预渲染功能，既保持了单页应用的交互体验，又获得了静态页面的SEO和性能优势。这种技术特别适合内容型网站、营销页面等需要良好搜索引擎可见性的应用场景。
