Трафарет js После добавления 2 страниц предварительный рендеринг застревает - PullRequest
Новая
       47

Трафарет js После добавления 2 страниц предварительный рендеринг застревает

0 голосов
/ 08 апреля 2020

Я клонировал этот репозиторий: https://github.com/ionic-team/ionic-stencil-conference-app (Текущая основная ветвь. Ха sh: 551666b31f33a9b11ea115853f1b9e69e0ffa52a)

И обновленная версия @ stencil / core до 1.12.3

И я добавил 2 новых маршрута и страницы:

app- root .tsx: 

renderRouter() {
        ...
          <ion-route url="/about" component="tab-about"></ion-route>
        </ion-route>

+        <ion-route url="/render-list" component="page-render-list"></ion-route>
+        <ion-route url="/render-detail/:renderId" component="page-render-detail"></ion-route>
        <ion-route url="/tutorial" component="page-tutorial"></ion-route>
        <ion-route url="/login" component="page-login"></ion-route>
        <ion-route url="/account" component="page-account"></ion-route>
        ...
}

render() {
              ...
              <ion-list lines="none">
                <ion-list-header>Account</ion-list-header>

+                <ion-menu-toggle autoHide={false}>
+                    <ion-item detail={false} href="/render-list" class={{ 'selected': this.isActiveUrl('/render-list') }}>
+                    <ion-icon slot="start" name="help"></ion-icon>
+                    <ion-label>Render List</ion-label>
+                  </ion-item>
+                </ion-menu-toggle>

                <ion-menu-toggle autoHide={false}>
                  {this.loggedIn ? (
                    <ion-item detail={false} href="account" class={{ 'selected': this.isActiveUrl('/account') }}>
                    ...
}

, где page-render-list - точная копия page-speaker-list, за исключением следующие изменения: 

                      <ion-item detail={false} lines="none" class="speaker-item" href={`/**render-detail**/${speaker.id}`}>

и page-render-detail является точной копией `page-Speaker-Detail, за исключением: 

  @Prop() **renderId**: string;
  async componentWillLoad() {
    this.speaker = await ConferenceData.getSpeaker(this.**renderId**);
  }

В основном я реплицировал список ораторов и страницу с подробностями, но сделал их связанными для бокового меню, а не частью вкладок.

С этими изменениями live serve работает нормально. Но предварительный рендеринг застревает. Вот мой лог с флагом verbose: 

[ ~/projects/gr/stencilconf ]$ npm run build --prerender --verbose
npm info it worked if it ends with ok
npm verb cli [ '/usr/local/bin/node',
npm verb cli   '/usr/local/bin/npm',
npm verb cli   'run',
npm verb cli   'build',
npm verb cli   '--prerender',
npm verb cli   '--verbose' ]
npm info using npm@6.14.4
npm info using node@v10.16.0
npm verb run-script [ 'prebuild', 'build', 'postbuild' ]
npm info lifecycle ionic-stencil-conference-app@0.0.1~prebuild: ionic-stencil-conference-app@0.0.1
npm info lifecycle ionic-stencil-conference-app@0.0.1~build: ionic-stencil-conference-app@0.0.1

> ionic-stencil-conference-app@0.0.1 build /Users/saiy2k/projects/gr/stencilconf
> stencil build --prerender

[39:07.6]  @stencil/core v1.12.3 ?
[39:07.6]  darwin, Intel(R) Core(TM) i5-5350U CPU @ 1.80GHz  MEM: 82.0MB
[39:07.6]  cpus: 4, freemem: 1334MB, totalmem: 8590MB  MEM: 82.0MB
[39:07.6]  node v10.16.0  MEM: 82.0MB
[39:07.6]  compiler: /Users/saiy2k/projects/gr/stencilconf/node_modules/@stencil/core/compiler/stencil.js  MEM:
           82.1MB
[39:07.6]  build: 20200406180126  MEM: 82.1MB
[39:07.6]  cache enabled, cacheDir: /Users/saiy2k/projects/gr/stencilconf/.stencil  MEM: 84.3MB
[39:07.6]  Starting compilation in watch mode...  MEM: 84.5MB
[39:10.0]  build, app, prod mode, started ...
[39:10.0]  start build, 2020-04-08T16:09:10  MEM: 187.8MB
[39:10.0]  transpile started ...
[39:11.1]  load collection: @ionic/core, ./node_modules/@ionic/core/dist/collection/collection-manifest.json  MEM:
           219.6MB
[39:11.7]  load collection: ionicons, ./node_modules/ionicons/dist/collection/collection-manifest.json  MEM:
           243.3MB
[39:18.0]  generated app types started ...  MEM: 330.9MB
[39:18.0]  generated app types finished: ./src/components.d.ts in 11 ms  MEM: 330.1MB
[39:18.0]  transpile finished in 8.05 s
[39:18.0]  generate outputs started ...  MEM: 329.7MB
[39:18.0]  getComponentAssetsCopyTasks: 2  MEM: 329.7MB
[39:18.0]  copy started ...
[39:18.0]  generate hydrate app started ...
[39:18.0]  generate lazy started ...
[39:18.1]  generateEntryModules, 60 entryModules  MEM: 330.0MB
[39:21.7]  copy finished (1260 files) in 3.63 s
[39:33.6]  generate hydrate app finished in 15.55 s
[39:47.6]  Upfront metadata is 19168 bytes  MEM: 636.8MB
[40:12.6]  Upfront metadata is 19805 bytes  MEM: 417.1MB
[40:12.7]  generate lazy finished in 54.64 s
[40:12.7]  generate www started ...  MEM: 417.1MB
[40:12.7]  generateIndexHtml, write: ./www/index.html  MEM: 417.7MB
[40:12.7]  generate www finished in 17 ms  MEM: 417.8MB
[40:12.7]  generate outputs finished in 54.67 s  MEM: 417.8MB
[40:12.7]  writeBuildFiles started ...  MEM: 417.8MB
[40:12.8]  in-memory-fs: data length: 3340  MEM: 427.3MB
[40:12.8]  writeBuildFiles finished, files wrote: 260 in 91 ms  MEM: 427.4MB
[40:12.8]  finished build, 2020-04-08T16:09:10  MEM: 427.4MB
[40:12.8]  build finished in 62.83 s

[40:12.8]  starting dev server ...  MEM: 424.1MB
[40:13.1]  dev server started: http://localhost:3334/ in 265 ms  MEM: 424.1MB
[40:13.1]  prerendering started ...
[40:13.1]  prerender hydrate app: /Users/saiy2k/projects/gr/stencilconf/dist/hydrate/index.js  MEM: 424.1MB
[40:13.1]  prerender dev server: http://localhost:3334  MEM: 424.1MB
[40:13.1]  prerender queue: / (from #entryUrl)  MEM: 424.1MB
[40:13.3]  prerender template: /var/folders/h8/vmbrp_gj6fd2j11btj6tphtr0000gp/T/prerender-template-f0fa1cb47267.html
            MEM: 426.9MB
[40:13.3]  prerender start: / ...  MEM: 428.3MB
[40:14.3]  prerender finish: /, www/index.html in 1.01 s  MEM: 428.3MB
[40:14.3]  prerender queue: /about (from /)  MEM: 428.3MB
[40:14.3]  prerender queue: /login (from /)  MEM: 428.3MB
[40:14.3]  prerender queue: /map (from /)  MEM: 428.3MB
[40:14.3]  prerender queue: /render-list (from /)  MEM: 428.3MB
[40:14.3]  prerender queue: /schedule (from /)  MEM: 428.3MB
[40:14.3]  prerender queue: /signup (from /)  MEM: 428.3MB
[40:14.3]  prerender queue: /speakers (from /)  MEM: 428.3MB
[40:14.3]  prerender queue: /support (from /)  MEM: 428.3MB
[40:14.3]  prerender queue: /tutorial (from /)  MEM: 428.4MB
[40:14.3]  prerender start: /about ...  MEM: 428.4MB
[40:14.3]  prerender start: /login ...  MEM: 428.4MB
[40:14.3]  prerender start: /map ...  MEM: 428.4MB
[40:14.3]  prerender start: /render-list ...  MEM: 428.4MB
[40:14.3]  prerender start: /schedule ...  MEM: 428.4MB
[40:14.3]  prerender start: /signup ...  MEM: 428.4MB
[40:14.3]  prerender start: /speakers ...  MEM: 429.0MB
[40:14.3]  prerender start: /support ...  MEM: 429.0MB
[40:14.3]  prerender start: /tutorial ...  MEM: 429.0MB
[40:15.4]  prerender finish: /map, www/map/index.html in 1.12 s  MEM: 429.0MB
[40:15.4]  prerender finish: /signup, www/signup/index.html in 1.11 s  MEM: 429.0MB
[40:15.4]  prerender finish: /tutorial, www/tutorial/index.html in 1.11 s  MEM: 429.0MB
[40:15.7]  prerender finish: /about, www/about/index.html in 1.33 s  MEM: 429.0MB
[40:15.7]  prerender finish: /speakers, www/speakers/index.html in 1.33 s  MEM: 429.0MB
[40:15.8]  prerender finish: /schedule, www/schedule/index.html in 1.44 s  MEM: 429.0MB
[40:15.8]  prerender finish: /login, www/login/index.html in 1.45 s  MEM: 429.0MB
[40:15.8]  prerender finish: /support, www/support/index.html in 1.44 s  MEM: 429.0MB

Также подана проблема с репо @ https://github.com/ionic-team/ionic-stencil-conference-app/issues/439

1 Ответ

1 голос
/ 16 апреля 2020

Всякий раз, когда у меня возникают проблемы с предварительным рендерингом, в большинстве случаев это происходит из-за того, что находится внутри componentDidLoad или других хуков.

В этом случае ответ всегда заключает все в componentDidLoad в условное выражение Build.isBrowser. Пример: 

import {/* Other imports */, Build} from "@stencil/core";

...

componentDidLoad() {
    if(Build.isBrowser) {
        // You code
    }
}
...