AngularUniversal（SSR）模式下首次加载时间很长 _编程开发

AngularUniversal（SSR）模式下首次加载时间很长

创始人

2024-10-29 21:31:02

0次

可以使用预先重渲染（pre rendering）来加速首次加载时间。具体步骤如下：

首先安装 prerender-spa-plugin插件：

npm install --save-dev prerender-spa-plugin

在webpack.config.js文件中添加以下代码：

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模拟浏览器，生成预渲染文件。

在index.html文件的head标签中添加以下代码：

以上代码中，第一行是为了优化打印页面而添加的，第二行为防止浏览器禁用JavaScript而添加的。

通过以上步骤，就可以使用预先重渲染来加速首次加载时间了。

上一篇：AngularUniversal中动态元标题未在视图页面源中显示

下一篇：AngularUniversal，渲染前按钮不起作用

AngularUniversal（SSR）模式下首次加载时间很长

相关内容

热门资讯