chrisvfritz / prerender-spa-plugin

Prerenders static HTML in a single-page application.
MIT License
7.33k stars 634 forks source link

Depend on puppeteer-core instead of puppeteer #393

Open rudolfbyker opened 4 years ago

rudolfbyker commented 4 years ago

Is there a possibility to make a version of this that uses puppeteer-core instead of puppeteer?

Use cases:

There are probably even more use cases.

The underlying problem

The puppeteer developers have declined to fix the underlying problem on multiple occasions, and recommend that we use puppeteer-core instead:

This is probably why https://github.com/cenfun/puppeteer-chromium-resolver was created, but it requires you to remove puppeteer from your dependencies, as far as I can tell.

rudolfbyker commented 4 years ago

Sorry, I did not realize that https://github.com/JoshTheDerf/prerenderer is actually a dependency of https://github.com/chrisvfritz/prerender-spa-plugin ... I assume that means issue https://github.com/JoshTheDerf/prerenderer/issues/43 blocks this issue.

SageSanyue commented 3 years ago

Firstly I use "prerender-spa-plugin": "^3.4.0", to solve this issue(Unable to prerender all routes), set 'headless' true or delete it.

configureWebpack: {
    plugins: [
      new PrerenderSPAPlugin({
        // The path to generate the file can also be consistent with the webpakc package.
        // This directory can only have one level, if the directory level is higher than one level, there will be no error prompt when it is generated, and it will only stick when it is pre-rendered.
        staticDir: path.join(__dirname,'dist'),
        // If you have parameters for your own routing file, such as about, you need to write / about/param1.
        routes: ['/a','/b'],
        // You have to configure or you won't precompile
        renderer: new Renderer({
            // ignoreJSErrors: true,
            // headless: false,
            // In main.js, document.dispatchEvent(new Event('render-event')) should correspond to the event name of both.
            renderAfterDocumentEvent: 'render-event',
            renderAfterTime: 5000
        })
      })
    ],

npm run build succeeds locally, but fails when deployed to the server. It is most likely related to the puppeteer used in prerender-spa-plugin 3.x. (Reference: https://qiita.com/pokotyan/items/11806b8b77f4a3527951) Because the configuration on the CI was not authorized to change, I discarded version 3. Later I used v2.1.0 which based on the PhantomJS and deployed successfully on the server.

vue-cli3 & "prerender-spa-plugin": "^2.1.0" vue.config.js

configureWebpack: {
    plugins: [
      new PrerenderSpaPlugin(
        // Absolute path to compiled SPA
        path.resolve(__dirname, './dist'),
        // List of routes to prerender
        ['/a', '/b', '/c', '/d', '/e'],
        {
          // options
          ignoreJSErrors: true,
        }
      )
    ],
}

用3.x的时候本地能打包成功,但部署到服务器上时打包失败,原因很有可能跟插件版本3所使用的puppeteer有关。由于在ci上的配置我无权更改,故弃用版本三,改用基于PhantomJS.后成功部署在服务器上了。