可以使用预先重渲染(pre rendering)来加速首次加载时间。具体步骤如下:
npm install --save-dev prerender-spa-plugin
const PrerenderSPAPlugin = require('prerender-spa-plugin'); const Renderer = PrerenderSPAPlugin.PuppeteerRenderer; plugins: [ ... new PrerenderSPAPlugin({ staticDir: path.join(__dirname, 'dist'), routes: ['/','/about', '/contact'], renderer: new Renderer({ renderAfterDocumentEvent: 'prerender-ready', headless: true }) }), ]
以上代码中,staticDir指定了输出目录,routes中为需要预渲染的路由地址,renderer通过Puppeteer模拟浏览器,生成预渲染文件。
以上代码中,第一行是为了优化打印页面而添加的,第二行为防止浏览器禁用JavaScript而添加的。
通过以上步骤,就可以使用预先重渲染来加速首次加载时间了。