search

vercel / next.js

The React Framework
https://nextjs.org
MIT License
125.09k stars 26.72k forks source link

Implement granular chunks #7696

Closed atcastle closed 5 years ago

atcastle commented 5 years ago

This PR implements the new Webpack SplitChunksPlugin configuration described in #7631 behind a new experimental flag called "granularChunks".

This also refactors the various SplitChunksPlugin configs out of the main config object, as it was getting unwieldy with the introduction of the large new config. However, without enabling the granularChunks flag, this change should have no effect at all on the build.

github-actions[bot] commented 5 years ago

Stats from current PR

Click to expand stats | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 13.3s | 13.2s | -105ms | | `node_modules` Size | 41.3 MB | 41.3 MB | ⚠️ +2.47 kB | | Total Bundle (main, webpack, commons) Size | 213 kB | 213 kB | ✓ | | Total Bundle (main, webpack, commons) gzip Size | 70.1 kB | 70.1 kB | ✓ | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.8 kB | 8.8 kB | ✓ | | Client `_error` gzip Size | 3.31 kB | 3.31 kB | ✓ | | Client `pages/index` Size | 296 B | 296 B | ✓ | | Client `pages/index` gzip Size | 222 B | 222 B | ✓ | | Client `pages/link` Size | 4.86 kB | 4.86 kB | ✓ | | Client `pages/link` gzip Size | 2.08 kB | 2.08 kB | ✓ | | Client `pages/routerDirect` Size | 411 B | 411 B | ✓ | | Client `pages/routerDirect` gzip Size | 296 B | 296 B | ✓ | | Client `pages/withRouter` Size | 393 B | 393 B | ✓ | | Client `pages/withRouter` gzip Size | 280 B | 280 B | ✓ | | Client `main` Size | 27.6 kB | 27.6 kB | ✓ | | Client `main` gzip Size | 9.14 kB | 9.14 kB | ✓ | | Client `commons` Size | 183 kB | 183 kB | ✓ | | Client `commons` gzip Size | 59.6 kB | 59.6 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Base Rendered Size | 1.34 kB | 1.34 kB | ✓ | | Build Dir Size | 805 kB | 805 kB | ✓ |
Click to expand serverless stats | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 14.7s | 14.5s | -204ms | | `node_modules` Size | 41.3 MB | 41.3 MB | ⚠️ +2.47 kB | | Total Bundle (main, webpack, commons) Size | 213 kB | 213 kB | ✓ | | Total Bundle (main, webpack, commons) gzip Size | 70.1 kB | 70.1 kB | ✓ | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.8 kB | 8.8 kB | ✓ | | Client `_error` gzip Size | 3.31 kB | 3.31 kB | ✓ | | Client `pages/index` Size | 296 B | 296 B | ✓ | | Client `pages/index` gzip Size | 222 B | 222 B | ✓ | | Client `pages/link` Size | 4.86 kB | 4.86 kB | ✓ | | Client `pages/link` gzip Size | 2.08 kB | 2.08 kB | ✓ | | Client `pages/routerDirect` Size | 411 B | 411 B | ✓ | | Client `pages/routerDirect` gzip Size | 296 B | 296 B | ✓ | | Client `pages/withRouter` Size | 393 B | 393 B | ✓ | | Client `pages/withRouter` gzip Size | 280 B | 280 B | ✓ | | Client `main` Size | 27.6 kB | 27.6 kB | ✓ | | Client `main` gzip Size | 9.14 kB | 9.14 kB | ✓ | | Client `commons` Size | 183 kB | 183 kB | ✓ | | Client `commons` gzip Size | 59.6 kB | 59.6 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Serverless `pages/link` Size | 340 kB | 340 kB | ✓ | | Serverless `pages/link` gzip Size | 87.2 kB | 87.2 kB | ⚠️ +1 B | | Serverless `pages/index` Size | 331 kB | 331 kB | ✓ | | Serverless `pages/index` gzip Size | 84.7 kB | 84.7 kB | ⚠️ +1 B | | Serverless `pages/_error` Size | 330 kB | 330 kB | ✓ | | Serverless `pages/_error` gzip Size | 84.4 kB | 84.4 kB | ⚠️ +2 B | | Serverless `pages/routerDirect` Size | 331 kB | 331 kB | ✓ | | Serverless `pages/routerDirect` gzip Size | 84.7 kB | 84.7 kB | ⚠️ +2 B | | Serverless `pages/withRouter` Size | 331 kB | 331 kB | ✓ | | Serverless `pages/withRouter` gzip Size | 84.6 kB | 84.6 kB | ⚠️ +1 B | | Build Dir Size | 2.3 MB | 2.3 MB | ✓ |
github-actions[bot] commented 5 years ago

Stats from current PR

Click to expand stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 14.3s | 14.5s | ⚠️ +197ms | | `node_modules` Size | 45.4 MB | 45.4 MB | ⚠️ +7.93 kB | | Total Bundle (main, webpack, commons) Size | 210 kB | 212 kB | ⚠️ +1.77 kB | | Total Bundle (main, webpack, commons) gzip Size | 68.8 kB | 69.4 kB | ⚠️ +625 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.45 kB | 8.45 kB | ✓ | | Client `_error` gzip Size | 3.24 kB | 3.24 kB | ✓ | | Client `pages/index` Size | 296 B | 296 B | ✓ | | Client `pages/index` gzip Size | 222 B | 222 B | ✓ | | Client `pages/link` Size | 4.76 kB | 4.76 kB | ✓ | | Client `pages/link` gzip Size | 2.03 kB | 2.03 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 24.3 kB | 26 kB | ⚠️ +1.77 kB | | Client `main` gzip Size | 7.97 kB | 8.6 kB | ⚠️ +625 B | | Client `commons` Size | 183 kB | 183 kB | ✓ | | Client `commons` gzip Size | 59.5 kB | 59.5 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Base Rendered Size | 1.36 kB | 1.36 kB | ✓ | | Build Dir Size | 785 kB | 791 kB | ⚠️ +6.22 kB |
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 16s | 16.1s | ⚠️ +119ms | | `node_modules` Size | 45.4 MB | 45.4 MB | ⚠️ +7.93 kB | | Total Bundle (main, webpack, commons) Size | 210 kB | 212 kB | ⚠️ +1.77 kB | | Total Bundle (main, webpack, commons) gzip Size | 68.8 kB | 69.4 kB | ⚠️ +625 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.45 kB | 8.45 kB | ✓ | | Client `_error` gzip Size | 3.24 kB | 3.24 kB | ✓ | | Client `pages/index` Size | 296 B | 296 B | ✓ | | Client `pages/index` gzip Size | 222 B | 222 B | ✓ | | Client `pages/link` Size | 4.76 kB | 4.76 kB | ✓ | | Client `pages/link` gzip Size | 2.03 kB | 2.03 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 24.3 kB | 26 kB | ⚠️ +1.77 kB | | Client `main` gzip Size | 7.97 kB | 8.6 kB | ⚠️ +625 B | | Client `commons` Size | 183 kB | 183 kB | ✓ | | Client `commons` gzip Size | 59.5 kB | 59.5 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Serverless `pages/link` Size | 338 kB | 338 kB | ✓ | | Serverless `pages/link` gzip Size | 86.7 kB | 86.7 kB | ✓ | | Serverless `pages/index` Size | Error getting size | Error getting size | ✓ | | Serverless `pages/index` gzip Size | Error getting size | Error getting size | ✓ | | Serverless `pages/_error` Size | 328 kB | 328 kB | ✓ | | Serverless `pages/_error` gzip Size | 84 kB | 84 kB | ✓ | | Serverless `pages/routerDirect` Size | 329 kB | 329 kB | ✓ | | Serverless `pages/routerDirect` gzip Size | 84.3 kB | 84.3 kB | ✓ | | Serverless `pages/withRouter` Size | 329 kB | 329 kB | ✓ | | Serverless `pages/withRouter` gzip Size | 84.2 kB | 84.2 kB | ✓ | | Build Dir Size | 2.04 MB | 2.04 MB | ⚠️ +6.22 kB |
github-actions[bot] commented 5 years ago

Stats from current PR

Click to expand stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 13.8s | 13.7s | -114ms | | `node_modules` Size | 45.4 MB | 45.4 MB | ⚠️ +7.93 kB | | Total Bundle (main, webpack, commons) Size | 210 kB | 212 kB | ⚠️ +1.77 kB | | Total Bundle (main, webpack, commons) gzip Size | 68.8 kB | 69.4 kB | ⚠️ +625 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.45 kB | 8.45 kB | ✓ | | Client `_error` gzip Size | 3.24 kB | 3.24 kB | ✓ | | Client `pages/index` Size | 296 B | 296 B | ✓ | | Client `pages/index` gzip Size | 222 B | 222 B | ✓ | | Client `pages/link` Size | 4.76 kB | 4.76 kB | ✓ | | Client `pages/link` gzip Size | 2.03 kB | 2.03 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 24.3 kB | 26 kB | ⚠️ +1.77 kB | | Client `main` gzip Size | 7.97 kB | 8.6 kB | ⚠️ +625 B | | Client `commons` Size | 183 kB | 183 kB | ✓ | | Client `commons` gzip Size | 59.5 kB | 59.5 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Base Rendered Size | 1.36 kB | 1.36 kB | ✓ | | Build Dir Size | 785 kB | 791 kB | ⚠️ +6.22 kB |
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 15.8s | 15.8s | ⚠️ +15ms | | `node_modules` Size | 45.4 MB | 45.4 MB | ⚠️ +7.93 kB | | Total Bundle (main, webpack, commons) Size | 210 kB | 212 kB | ⚠️ +1.77 kB | | Total Bundle (main, webpack, commons) gzip Size | 68.8 kB | 69.4 kB | ⚠️ +625 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.45 kB | 8.45 kB | ✓ | | Client `_error` gzip Size | 3.24 kB | 3.24 kB | ✓ | | Client `pages/index` Size | 296 B | 296 B | ✓ | | Client `pages/index` gzip Size | 222 B | 222 B | ✓ | | Client `pages/link` Size | 4.76 kB | 4.76 kB | ✓ | | Client `pages/link` gzip Size | 2.03 kB | 2.03 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 24.3 kB | 26 kB | ⚠️ +1.77 kB | | Client `main` gzip Size | 7.97 kB | 8.6 kB | ⚠️ +625 B | | Client `commons` Size | 183 kB | 183 kB | ✓ | | Client `commons` gzip Size | 59.5 kB | 59.5 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Serverless `pages/link` Size | 338 kB | 338 kB | ✓ | | Serverless `pages/link` gzip Size | 86.7 kB | 86.7 kB | ✓ | | Serverless `pages/index` Size | Error getting size | Error getting size | ✓ | | Serverless `pages/index` gzip Size | Error getting size | Error getting size | ✓ | | Serverless `pages/_error` Size | 328 kB | 328 kB | ✓ | | Serverless `pages/_error` gzip Size | 84 kB | 84 kB | ✓ | | Serverless `pages/routerDirect` Size | 329 kB | 329 kB | ✓ | | Serverless `pages/routerDirect` gzip Size | 84.3 kB | 84.3 kB | -2 B | | Serverless `pages/withRouter` Size | 329 kB | 329 kB | ✓ | | Serverless `pages/withRouter` gzip Size | 84.2 kB | 84.2 kB | ⚠️ +1 B | | Build Dir Size | 2.04 MB | 2.04 MB | ⚠️ +6.22 kB |
github-actions[bot] commented 5 years ago

Stats from current PR

Click to expand stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 14.3s | 14.4s | ⚠️ +63ms | | `node_modules` Size | 45.4 MB | 45.4 MB | ⚠️ +117 B | | Total Bundle (main, webpack, commons) Size | 210 kB | 212 kB | ⚠️ +1.75 kB | | Total Bundle (main, webpack, commons) gzip Size | 68.8 kB | 69.4 kB | ⚠️ +643 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.45 kB | 8.45 kB | ✓ | | Client `_error` gzip Size | 3.24 kB | 3.24 kB | ✓ | | Client `pages/index` Size | 296 B | 296 B | ✓ | | Client `pages/index` gzip Size | 222 B | 222 B | ✓ | | Client `pages/link` Size | 4.19 kB | 4.76 kB | ⚠️ +564 B | | Client `pages/link` gzip Size | 1.82 kB | 2.03 kB | ⚠️ +208 B | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 23.7 kB | 26 kB | ⚠️ +2.35 kB | | Client `main` gzip Size | 7.81 kB | 8.6 kB | ⚠️ +786 B | | Client `commons` Size | 184 kB | 183 kB | -602 B | | Client `commons` gzip Size | 59.7 kB | 59.5 kB | -143 B | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Base Rendered Size | 1.36 kB | 1.36 kB | ✓ | | Build Dir Size | 757 kB | 791 kB | ⚠️ +34.7 kB |
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 15.3s | 16.4s | ⚠️ +1.1s | | `node_modules` Size | 45.4 MB | 45.4 MB | ⚠️ +117 B | | Total Bundle (main, webpack, commons) Size | 210 kB | 212 kB | ⚠️ +1.75 kB | | Total Bundle (main, webpack, commons) gzip Size | 68.8 kB | 69.4 kB | ⚠️ +643 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.45 kB | 8.45 kB | ✓ | | Client `_error` gzip Size | 3.24 kB | 3.24 kB | ✓ | | Client `pages/index` Size | 296 B | 296 B | ✓ | | Client `pages/index` gzip Size | 222 B | 222 B | ✓ | | Client `pages/link` Size | 4.19 kB | 4.76 kB | ⚠️ +564 B | | Client `pages/link` gzip Size | 1.82 kB | 2.03 kB | ⚠️ +208 B | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 23.7 kB | 26 kB | ⚠️ +2.35 kB | | Client `main` gzip Size | 7.81 kB | 8.6 kB | ⚠️ +786 B | | Client `commons` Size | 184 kB | 183 kB | -602 B | | Client `commons` gzip Size | 59.7 kB | 59.5 kB | -143 B | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Serverless `pages/link` Size | 338 kB | 338 kB | -31 B | | Serverless `pages/link` gzip Size | 86.8 kB | 86.7 kB | -26 B | | Serverless `pages/index` Size | Error getting size | Error getting size | ✓ | | Serverless `pages/index` gzip Size | Error getting size | Error getting size | ✓ | | Serverless `pages/_error` Size | 328 kB | 328 kB | -31 B | | Serverless `pages/_error` gzip Size | 84 kB | 84 kB | -26 B | | Serverless `pages/routerDirect` Size | 329 kB | 329 kB | -31 B | | Serverless `pages/routerDirect` gzip Size | 84.3 kB | 84.3 kB | -26 B | | Serverless `pages/withRouter` Size | 329 kB | 329 kB | -31 B | | Serverless `pages/withRouter` gzip Size | 84.3 kB | 84.2 kB | -24 B | | Build Dir Size | 1.94 MB | 2.04 MB | ⚠️ +98.3 kB |
github-actions[bot] commented 5 years ago

Stats from current PR

Click to expand stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 14.5s | 14.8s | ⚠️ +228ms | | `node_modules` Size | 45.4 MB | 45.4 MB | ⚠️ +21 B | | Total Bundle (main, webpack, commons) Size | 210 kB | 212 kB | ⚠️ +1.71 kB | | Total Bundle (main, webpack, commons) gzip Size | 68.8 kB | 69.4 kB | ⚠️ +640 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.45 kB | 8.45 kB | ✓ | | Client `_error` gzip Size | 3.24 kB | 3.24 kB | ✓ | | Client `pages/index` Size | 296 B | 296 B | ✓ | | Client `pages/index` gzip Size | 222 B | 222 B | ✓ | | Client `pages/link` Size | 4.19 kB | 4.76 kB | ⚠️ +564 B | | Client `pages/link` gzip Size | 1.82 kB | 2.03 kB | ⚠️ +208 B | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 23.7 kB | 26 kB | ⚠️ +2.32 kB | | Client `main` gzip Size | 7.81 kB | 8.6 kB | ⚠️ +783 B | | Client `commons` Size | 184 kB | 183 kB | -602 B | | Client `commons` gzip Size | 59.7 kB | 59.5 kB | -143 B | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Base Rendered Size | 1.36 kB | 1.36 kB | ✓ | | Build Dir Size | 757 kB | 791 kB | ⚠️ +34.5 kB |
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 15.5s | 16.7s | ⚠️ +1.2s | | `node_modules` Size | 45.4 MB | 45.4 MB | ⚠️ +21 B | | Total Bundle (main, webpack, commons) Size | 210 kB | 212 kB | ⚠️ +1.71 kB | | Total Bundle (main, webpack, commons) gzip Size | 68.8 kB | 69.4 kB | ⚠️ +640 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.45 kB | 8.45 kB | ✓ | | Client `_error` gzip Size | 3.24 kB | 3.24 kB | ✓ | | Client `pages/index` Size | 296 B | 296 B | ✓ | | Client `pages/index` gzip Size | 222 B | 222 B | ✓ | | Client `pages/link` Size | 4.19 kB | 4.76 kB | ⚠️ +564 B | | Client `pages/link` gzip Size | 1.82 kB | 2.03 kB | ⚠️ +208 B | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 23.7 kB | 26 kB | ⚠️ +2.32 kB | | Client `main` gzip Size | 7.81 kB | 8.6 kB | ⚠️ +783 B | | Client `commons` Size | 184 kB | 183 kB | -602 B | | Client `commons` gzip Size | 59.7 kB | 59.5 kB | -143 B | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Serverless `pages/link` Size | 338 kB | 338 kB | -31 B | | Serverless `pages/link` gzip Size | 86.8 kB | 86.7 kB | -27 B | | Serverless `pages/index` Size | Error getting size | Error getting size | ✓ | | Serverless `pages/index` gzip Size | Error getting size | Error getting size | ✓ | | Serverless `pages/_error` Size | 328 kB | 328 kB | -31 B | | Serverless `pages/_error` gzip Size | 84 kB | 84 kB | -28 B | | Serverless `pages/routerDirect` Size | 329 kB | 329 kB | -31 B | | Serverless `pages/routerDirect` gzip Size | 84.3 kB | 84.3 kB | -29 B | | Serverless `pages/withRouter` Size | 329 kB | 329 kB | -31 B | | Serverless `pages/withRouter` gzip Size | 84.3 kB | 84.2 kB | -25 B | | Build Dir Size | 1.94 MB | 2.04 MB | ⚠️ +98.1 kB |
github-actions[bot] commented 5 years ago

Stats from current PR

Click to expand stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 13.3s | 13.1s | -144ms | | `node_modules` Size | 45.4 MB | 45.4 MB | -129 B | | Total Bundle (main, webpack, commons) Size | 210 kB | 212 kB | ⚠️ +1.71 kB | | Total Bundle (main, webpack, commons) gzip Size | 68.8 kB | 69.4 kB | ⚠️ +639 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ⚠️ +1 B | | Client `_error` Size | 8.45 kB | 8.45 kB | ✓ | | Client `_error` gzip Size | 3.24 kB | 3.24 kB | ✓ | | Client `pages/index` Size | 296 B | 296 B | ✓ | | Client `pages/index` gzip Size | 224 B | 222 B | -2 B | | Client `pages/link` Size | 4.19 kB | 4.76 kB | ⚠️ +564 B | | Client `pages/link` gzip Size | 1.82 kB | 2.03 kB | ⚠️ +208 B | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 300 B | 301 B | ⚠️ +1 B | | Client `main` Size | 23.7 kB | 26 kB | ⚠️ +2.32 kB | | Client `main` gzip Size | 7.81 kB | 8.6 kB | ⚠️ +783 B | | Client `commons` Size | 184 kB | 183 kB | -602 B | | Client `commons` gzip Size | 59.7 kB | 59.5 kB | -143 B | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Base Rendered Size | 1.36 kB | 1.36 kB | ✓ | | Build Dir Size | 757 kB | 791 kB | ⚠️ +34.5 kB |
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 13.8s | 14.7s | ⚠️ +856ms | | `node_modules` Size | 45.4 MB | 45.4 MB | -129 B | | Total Bundle (main, webpack, commons) Size | 210 kB | 212 kB | ⚠️ +1.71 kB | | Total Bundle (main, webpack, commons) gzip Size | 68.8 kB | 69.4 kB | ⚠️ +641 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | -1 B | | Client `_error` Size | 8.45 kB | 8.45 kB | ✓ | | Client `_error` gzip Size | 3.24 kB | 3.24 kB | ✓ | | Client `pages/index` Size | 296 B | 296 B | ✓ | | Client `pages/index` gzip Size | 222 B | 224 B | ⚠️ +2 B | | Client `pages/link` Size | 4.19 kB | 4.76 kB | ⚠️ +564 B | | Client `pages/link` gzip Size | 1.82 kB | 2.03 kB | ⚠️ +208 B | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 300 B | -1 B | | Client `main` Size | 23.7 kB | 26 kB | ⚠️ +2.32 kB | | Client `main` gzip Size | 7.81 kB | 8.6 kB | ⚠️ +783 B | | Client `commons` Size | 184 kB | 183 kB | -602 B | | Client `commons` gzip Size | 59.7 kB | 59.5 kB | -143 B | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Serverless `pages/link` Size | 338 kB | 338 kB | -31 B | | Serverless `pages/link` gzip Size | 86.8 kB | 86.7 kB | -27 B | | Serverless `pages/index` Size | Error getting size | Error getting size | ✓ | | Serverless `pages/index` gzip Size | Error getting size | Error getting size | ✓ | | Serverless `pages/_error` Size | 328 kB | 328 kB | -31 B | | Serverless `pages/_error` gzip Size | 84 kB | 84 kB | -28 B | | Serverless `pages/routerDirect` Size | 329 kB | 329 kB | -31 B | | Serverless `pages/routerDirect` gzip Size | 84.3 kB | 84.3 kB | -27 B | | Serverless `pages/withRouter` Size | 329 kB | 329 kB | -31 B | | Serverless `pages/withRouter` gzip Size | 84.3 kB | 84.2 kB | -26 B | | Build Dir Size | 1.94 MB | 2.04 MB | ⚠️ +98.1 kB |
github-actions[bot] commented 5 years ago

Stats from current PR

Click to expand stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 12.9s | 12.6s | -335ms | | `node_modules` Size | 45.4 MB | 45.4 MB | ⚠️ +6.84 kB | | Total Bundle (main, webpack, commons) Size | 210 kB | 211 kB | ⚠️ +1.49 kB | | Total Bundle (main, webpack, commons) gzip Size | 68.8 kB | 69.4 kB | ⚠️ +589 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ⚠️ +1 B | | Client `_error` Size | 8.45 kB | 8.45 kB | ✓ | | Client `_error` gzip Size | 3.24 kB | 3.24 kB | ✓ | | Client `pages/index` Size | 296 B | 296 B | ✓ | | Client `pages/index` gzip Size | 224 B | 222 B | -2 B | | Client `pages/link` Size | 4.19 kB | 4.19 kB | ✓ | | Client `pages/link` gzip Size | 1.82 kB | 1.82 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 300 B | 301 B | ⚠️ +1 B | | Client `main` Size | 23.7 kB | 25.2 kB | ⚠️ +1.49 kB | | Client `main` gzip Size | 7.81 kB | 8.4 kB | ⚠️ +590 B | | Client `commons` Size | 184 kB | 184 kB | ✓ | | Client `commons` gzip Size | 59.7 kB | 59.7 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Base Rendered Size | 1.36 kB | 1.36 kB | ✓ | | Build Dir Size | 757 kB | 762 kB | ⚠️ +4.91 kB |
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 13.4s | 13.2s | -175ms | | `node_modules` Size | 45.4 MB | 45.4 MB | ⚠️ +6.84 kB | | Total Bundle (main, webpack, commons) Size | 210 kB | 211 kB | ⚠️ +1.49 kB | | Total Bundle (main, webpack, commons) gzip Size | 68.8 kB | 69.4 kB | ⚠️ +590 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.45 kB | 8.45 kB | ✓ | | Client `_error` gzip Size | 3.24 kB | 3.24 kB | ✓ | | Client `pages/index` Size | 296 B | 296 B | ✓ | | Client `pages/index` gzip Size | 222 B | 222 B | ✓ | | Client `pages/link` Size | 4.19 kB | 4.19 kB | ✓ | | Client `pages/link` gzip Size | 1.82 kB | 1.82 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 23.7 kB | 25.2 kB | ⚠️ +1.49 kB | | Client `main` gzip Size | 7.81 kB | 8.4 kB | ⚠️ +590 B | | Client `commons` Size | 184 kB | 184 kB | ✓ | | Client `commons` gzip Size | 59.7 kB | 59.7 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Serverless `pages/link` Size | 338 kB | 338 kB | ✓ | | Serverless `pages/link` gzip Size | 86.8 kB | 86.8 kB | -1 B | | Serverless `pages/index` Size | Error getting size | Error getting size | ✓ | | Serverless `pages/index` gzip Size | Error getting size | Error getting size | ✓ | | Serverless `pages/_error` Size | 328 kB | 328 kB | ✓ | | Serverless `pages/_error` gzip Size | 84 kB | 84 kB | ✓ | | Serverless `pages/routerDirect` Size | 329 kB | 329 kB | ✓ | | Serverless `pages/routerDirect` gzip Size | 84.3 kB | 84.3 kB | ✓ | | Serverless `pages/withRouter` Size | 329 kB | 329 kB | ✓ | | Serverless `pages/withRouter` gzip Size | 84.3 kB | 84.3 kB | -1 B | | Build Dir Size | 1.94 MB | 1.95 MB | ⚠️ +4.91 kB |
github-actions[bot] commented 5 years ago

Stats from current PR

Click to expand stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 14.8s | 14.5s | -233ms | | `node_modules` Size | 45.4 MB | 45.4 MB | ⚠️ +7.55 kB | | Total Bundle (main, webpack, commons) Size | 210 kB | 211 kB | ⚠️ +1.49 kB | | Total Bundle (main, webpack, commons) gzip Size | 68.8 kB | 69.4 kB | ⚠️ +590 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.45 kB | 8.45 kB | ✓ | | Client `_error` gzip Size | 3.24 kB | 3.24 kB | ✓ | | Client `pages/index` Size | 296 B | 296 B | ✓ | | Client `pages/index` gzip Size | 222 B | 222 B | ✓ | | Client `pages/link` Size | 4.19 kB | 4.19 kB | ✓ | | Client `pages/link` gzip Size | 1.82 kB | 1.82 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 23.7 kB | 25.2 kB | ⚠️ +1.49 kB | | Client `main` gzip Size | 7.81 kB | 8.4 kB | ⚠️ +590 B | | Client `commons` Size | 184 kB | 184 kB | ✓ | | Client `commons` gzip Size | 59.7 kB | 59.7 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Base Rendered Size | 1.36 kB | 1.36 kB | ✓ | | Build Dir Size | 757 kB | 761 kB | ⚠️ +4.91 kB |
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 15.5s | 15.3s | -206ms | | `node_modules` Size | 45.4 MB | 45.4 MB | ⚠️ +7.55 kB | | Total Bundle (main, webpack, commons) Size | 210 kB | 211 kB | ⚠️ +1.49 kB | | Total Bundle (main, webpack, commons) gzip Size | 68.8 kB | 69.4 kB | ⚠️ +590 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.45 kB | 8.45 kB | ✓ | | Client `_error` gzip Size | 3.24 kB | 3.24 kB | ✓ | | Client `pages/index` Size | 296 B | 296 B | ✓ | | Client `pages/index` gzip Size | 222 B | 222 B | ✓ | | Client `pages/link` Size | 4.19 kB | 4.19 kB | ✓ | | Client `pages/link` gzip Size | 1.82 kB | 1.82 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 23.7 kB | 25.2 kB | ⚠️ +1.49 kB | | Client `main` gzip Size | 7.81 kB | 8.4 kB | ⚠️ +590 B | | Client `commons` Size | 184 kB | 184 kB | ✓ | | Client `commons` gzip Size | 59.7 kB | 59.7 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Serverless `pages/link` Size | 338 kB | 338 kB | ✓ | | Serverless `pages/link` gzip Size | 86.8 kB | 86.8 kB | -2 B | | Serverless `pages/index` Size | Error getting size | Error getting size | ✓ | | Serverless `pages/index` gzip Size | Error getting size | Error getting size | ✓ | | Serverless `pages/_error` Size | 328 kB | 328 kB | ✓ | | Serverless `pages/_error` gzip Size | 84 kB | 84 kB | -3 B | | Serverless `pages/routerDirect` Size | 329 kB | 329 kB | ✓ | | Serverless `pages/routerDirect` gzip Size | 84.3 kB | 84.3 kB | -1 B | | Serverless `pages/withRouter` Size | 329 kB | 329 kB | ✓ | | Serverless `pages/withRouter` gzip Size | 84.3 kB | 84.3 kB | -2 B | | Build Dir Size | 1.94 MB | 1.95 MB | ⚠️ +4.91 kB |
github-actions[bot] commented 5 years ago

Stats from current PR

Click to expand stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 14s | 14.3s | ⚠️ +285ms | | `node_modules` Size | 45.4 MB | 45.4 MB | ⚠️ +7.25 kB | | Total Bundle (main, webpack, commons) Size | 210 kB | 211 kB | ⚠️ +1.49 kB | | Total Bundle (main, webpack, commons) gzip Size | 68.8 kB | 69.4 kB | ⚠️ +590 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.45 kB | 8.45 kB | ✓ | | Client `_error` gzip Size | 3.24 kB | 3.24 kB | ✓ | | Client `pages/index` Size | 296 B | 296 B | ✓ | | Client `pages/index` gzip Size | 222 B | 222 B | ✓ | | Client `pages/link` Size | 4.19 kB | 4.19 kB | ✓ | | Client `pages/link` gzip Size | 1.82 kB | 1.82 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 23.7 kB | 25.2 kB | ⚠️ +1.49 kB | | Client `main` gzip Size | 7.81 kB | 8.4 kB | ⚠️ +590 B | | Client `commons` Size | 184 kB | 184 kB | ✓ | | Client `commons` gzip Size | 59.7 kB | 59.7 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Base Rendered Size | 1.36 kB | 1.36 kB | ✓ | | Build Dir Size | 757 kB | 761 kB | ⚠️ +4.91 kB |
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 15.4s | 15.3s | -151ms | | `node_modules` Size | 45.4 MB | 45.4 MB | ⚠️ +7.25 kB | | Total Bundle (main, webpack, commons) Size | 210 kB | 211 kB | ⚠️ +1.49 kB | | Total Bundle (main, webpack, commons) gzip Size | 68.8 kB | 69.4 kB | ⚠️ +590 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | -1 B | | Client `_error` Size | 8.45 kB | 8.45 kB | ✓ | | Client `_error` gzip Size | 3.24 kB | 3.24 kB | ✓ | | Client `pages/index` Size | 296 B | 296 B | ✓ | | Client `pages/index` gzip Size | 222 B | 224 B | ⚠️ +2 B | | Client `pages/link` Size | 4.19 kB | 4.19 kB | ✓ | | Client `pages/link` gzip Size | 1.82 kB | 1.82 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 300 B | -1 B | | Client `main` Size | 23.7 kB | 25.2 kB | ⚠️ +1.49 kB | | Client `main` gzip Size | 7.81 kB | 8.4 kB | ⚠️ +589 B | | Client `commons` Size | 184 kB | 184 kB | ✓ | | Client `commons` gzip Size | 59.7 kB | 59.7 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Serverless `pages/link` Size | 338 kB | 338 kB | ✓ | | Serverless `pages/link` gzip Size | 86.8 kB | 86.8 kB | ✓ | | Serverless `pages/index` Size | Error getting size | Error getting size | ✓ | | Serverless `pages/index` gzip Size | Error getting size | Error getting size | ✓ | | Serverless `pages/_error` Size | 328 kB | 328 kB | ✓ | | Serverless `pages/_error` gzip Size | 84 kB | 84 kB | -1 B | | Serverless `pages/routerDirect` Size | 329 kB | 329 kB | ✓ | | Serverless `pages/routerDirect` gzip Size | 84.3 kB | 84.3 kB | ✓ | | Serverless `pages/withRouter` Size | 329 kB | 329 kB | ✓ | | Serverless `pages/withRouter` gzip Size | 84.3 kB | 84.3 kB | -1 B | | Build Dir Size | 1.94 MB | 1.95 MB | ⚠️ +4.91 kB |
github-actions[bot] commented 5 years ago

Stats from current PR

Click to expand stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 12.6s | 12.9s | ⚠️ +230ms | | `node_modules` Size | 45.5 MB | 45.5 MB | ⚠️ +7.61 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 208 kB | ⚠️ +1.49 kB | | Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 68.4 kB | ⚠️ +591 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ⚠️ +1 B | | Client `_error` Size | 8.45 kB | 8.45 kB | ✓ | | Client `_error` gzip Size | 3.24 kB | 3.24 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.14 kB | 4.14 kB | ✓ | | Client `pages/link` gzip Size | 1.82 kB | 1.82 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 300 B | 301 B | ⚠️ +1 B | | Client `main` Size | 19.8 kB | 21.3 kB | ⚠️ +1.49 kB | | Client `main` gzip Size | 6.78 kB | 7.37 kB | ⚠️ +590 B | | Client `commons` Size | 184 kB | 184 kB | ✓ | | Client `commons` gzip Size | 59.7 kB | 59.7 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Base Rendered Size | 1.34 kB | 1.34 kB | ✓ | | Build Dir Size | 699 kB | 704 kB | ⚠️ +4.91 kB |
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 14.1s | 14.1s | -42ms | | `node_modules` Size | 45.5 MB | 45.5 MB | ⚠️ +7.61 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 208 kB | ⚠️ +1.49 kB | | Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 68.4 kB | ⚠️ +589 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.45 kB | 8.45 kB | ✓ | | Client `_error` gzip Size | 3.24 kB | 3.24 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.14 kB | 4.14 kB | ✓ | | Client `pages/link` gzip Size | 1.82 kB | 1.82 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 19.8 kB | 21.3 kB | ⚠️ +1.49 kB | | Client `main` gzip Size | 6.78 kB | 7.37 kB | ⚠️ +589 B | | Client `commons` Size | 184 kB | 184 kB | ✓ | | Client `commons` gzip Size | 59.7 kB | 59.7 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Serverless `pages/link` Size | 251 kB | 251 kB | ✓ | | Serverless `pages/link` gzip Size | 67.6 kB | 67.6 kB | -1 B | | Serverless `pages/index` Size | 243 kB | 243 kB | ✓ | | Serverless `pages/index` gzip Size | 65.3 kB | 65.3 kB | ✓ | | Serverless `pages/_error` Size | 243 kB | 243 kB | ✓ | | Serverless `pages/_error` gzip Size | 65.1 kB | 65.1 kB | ✓ | | Serverless `pages/routerDirect` Size | 244 kB | 244 kB | ✓ | | Serverless `pages/routerDirect` gzip Size | 65.3 kB | 65.3 kB | -1 B | | Serverless `pages/withRouter` Size | 244 kB | 244 kB | ✓ | | Serverless `pages/withRouter` gzip Size | 65.4 kB | 65.4 kB | ✓ | | Build Dir Size | 1.88 MB | 1.89 MB | ⚠️ +4.91 kB |
github-actions[bot] commented 5 years ago

Stats from current PR

Click to expand stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 13.2s | 13.4s | ⚠️ +237ms | | `node_modules` Size | 45.4 MB | 45.5 MB | ⚠️ +7.65 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 208 kB | ⚠️ +1.53 kB | | Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 68.4 kB | ⚠️ +597 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.45 kB | 8.45 kB | ✓ | | Client `_error` gzip Size | 3.24 kB | 3.24 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.14 kB | 4.14 kB | ✓ | | Client `pages/link` gzip Size | 1.82 kB | 1.82 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 19.8 kB | 21.3 kB | ⚠️ +1.53 kB | | Client `main` gzip Size | 6.78 kB | 7.38 kB | ⚠️ +597 B | | Client `commons` Size | 184 kB | 184 kB | ✓ | | Client `commons` gzip Size | 59.7 kB | 59.7 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Base Rendered Size | 1.34 kB | 1.34 kB | ✓ | | Build Dir Size | 699 kB | 704 kB | ⚠️ +5.03 kB |
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 14.4s | 14.6s | ⚠️ +135ms | | `node_modules` Size | 45.4 MB | 45.5 MB | ⚠️ +7.65 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 208 kB | ⚠️ +1.53 kB | | Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 68.4 kB | ⚠️ +597 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.45 kB | 8.45 kB | ✓ | | Client `_error` gzip Size | 3.24 kB | 3.24 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.14 kB | 4.14 kB | ✓ | | Client `pages/link` gzip Size | 1.82 kB | 1.82 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 19.8 kB | 21.3 kB | ⚠️ +1.53 kB | | Client `main` gzip Size | 6.78 kB | 7.38 kB | ⚠️ +597 B | | Client `commons` Size | 184 kB | 184 kB | ✓ | | Client `commons` gzip Size | 59.7 kB | 59.7 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Serverless `pages/link` Size | 251 kB | 251 kB | ✓ | | Serverless `pages/link` gzip Size | 67.6 kB | 67.6 kB | ✓ | | Serverless `pages/index` Size | 243 kB | 243 kB | ✓ | | Serverless `pages/index` gzip Size | 65.3 kB | 65.3 kB | ⚠️ +1 B | | Serverless `pages/_error` Size | 243 kB | 243 kB | ✓ | | Serverless `pages/_error` gzip Size | 65.1 kB | 65.1 kB | ⚠️ +1 B | | Serverless `pages/routerDirect` Size | 244 kB | 244 kB | ✓ | | Serverless `pages/routerDirect` gzip Size | 65.3 kB | 65.3 kB | ⚠️ +1 B | | Serverless `pages/withRouter` Size | 244 kB | 244 kB | ✓ | | Serverless `pages/withRouter` gzip Size | 65.4 kB | 65.4 kB | ⚠️ +1 B | | Build Dir Size | 1.88 MB | 1.89 MB | ⚠️ +5.03 kB |
github-actions[bot] commented 5 years ago

Stats from current PR

Click to expand stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 12.3s | 12.3s | ⚠️ +55ms | | `node_modules` Size | 45.4 MB | 45.5 MB | ⚠️ +7.66 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 208 kB | ⚠️ +1.53 kB | | Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 68.4 kB | ⚠️ +597 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.45 kB | 8.45 kB | ✓ | | Client `_error` gzip Size | 3.24 kB | 3.24 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.14 kB | 4.14 kB | ✓ | | Client `pages/link` gzip Size | 1.82 kB | 1.82 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 19.8 kB | 21.3 kB | ⚠️ +1.53 kB | | Client `main` gzip Size | 6.78 kB | 7.38 kB | ⚠️ +597 B | | Client `commons` Size | 184 kB | 184 kB | ✓ | | Client `commons` gzip Size | 59.7 kB | 59.7 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Base Rendered Size | 1.34 kB | 1.34 kB | ✓ | | Build Dir Size | 699 kB | 704 kB | ⚠️ +5.03 kB |
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 13.5s | 15s | ⚠️ +1.5s | | `node_modules` Size | 45.4 MB | 45.5 MB | ⚠️ +7.66 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 208 kB | ⚠️ +1.53 kB | | Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 68.4 kB | ⚠️ +597 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.45 kB | 8.45 kB | ✓ | | Client `_error` gzip Size | 3.24 kB | 3.24 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.14 kB | 4.14 kB | ✓ | | Client `pages/link` gzip Size | 1.82 kB | 1.82 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 19.8 kB | 21.3 kB | ⚠️ +1.53 kB | | Client `main` gzip Size | 6.78 kB | 7.38 kB | ⚠️ +597 B | | Client `commons` Size | 184 kB | 184 kB | ✓ | | Client `commons` gzip Size | 59.7 kB | 59.7 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Serverless `pages/link` Size | 251 kB | 251 kB | ✓ | | Serverless `pages/link` gzip Size | 67.6 kB | 67.6 kB | ⚠️ +2 B | | Serverless `pages/index` Size | 243 kB | 243 kB | ✓ | | Serverless `pages/index` gzip Size | 65.3 kB | 65.3 kB | ⚠️ +2 B | | Serverless `pages/_error` Size | 243 kB | 243 kB | ✓ | | Serverless `pages/_error` gzip Size | 65.1 kB | 65.1 kB | ⚠️ +2 B | | Serverless `pages/routerDirect` Size | 244 kB | 244 kB | ✓ | | Serverless `pages/routerDirect` gzip Size | 65.3 kB | 65.3 kB | ⚠️ +3 B | | Serverless `pages/withRouter` Size | 244 kB | 244 kB | ✓ | | Serverless `pages/withRouter` gzip Size | 65.4 kB | 65.4 kB | ⚠️ +2 B | | Build Dir Size | 1.88 MB | 1.89 MB | ⚠️ +5.03 kB |
github-actions[bot] commented 5 years ago

Stats from current PR

Click to expand stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 12.8s | 13s | ⚠️ +199ms | | `node_modules` Size | 45.4 MB | 45.5 MB | ⚠️ +7.68 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 208 kB | ⚠️ +1.53 kB | | Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 68.4 kB | ⚠️ +597 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.45 kB | 8.45 kB | ✓ | | Client `_error` gzip Size | 3.24 kB | 3.24 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.14 kB | 4.14 kB | ✓ | | Client `pages/link` gzip Size | 1.82 kB | 1.82 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 19.8 kB | 21.3 kB | ⚠️ +1.53 kB | | Client `main` gzip Size | 6.78 kB | 7.38 kB | ⚠️ +597 B | | Client `commons` Size | 184 kB | 184 kB | ✓ | | Client `commons` gzip Size | 59.7 kB | 59.7 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Base Rendered Size | 1.34 kB | 1.34 kB | ✓ | | Build Dir Size | 699 kB | 704 kB | ⚠️ +5.03 kB |
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 14.1s | 14.5s | ⚠️ +392ms | | `node_modules` Size | 45.4 MB | 45.5 MB | ⚠️ +7.68 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 208 kB | ⚠️ +1.53 kB | | Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 68.4 kB | ⚠️ +597 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.45 kB | 8.45 kB | ✓ | | Client `_error` gzip Size | 3.24 kB | 3.24 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.14 kB | 4.14 kB | ✓ | | Client `pages/link` gzip Size | 1.82 kB | 1.82 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 19.8 kB | 21.3 kB | ⚠️ +1.53 kB | | Client `main` gzip Size | 6.78 kB | 7.38 kB | ⚠️ +597 B | | Client `commons` Size | 184 kB | 184 kB | ✓ | | Client `commons` gzip Size | 59.7 kB | 59.7 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Serverless `pages/link` Size | 251 kB | 251 kB | ✓ | | Serverless `pages/link` gzip Size | 67.6 kB | 67.6 kB | ✓ | | Serverless `pages/index` Size | 243 kB | 243 kB | ✓ | | Serverless `pages/index` gzip Size | 65.3 kB | 65.3 kB | ✓ | | Serverless `pages/_error` Size | 243 kB | 243 kB | ✓ | | Serverless `pages/_error` gzip Size | 65.1 kB | 65.1 kB | ✓ | | Serverless `pages/routerDirect` Size | 244 kB | 244 kB | ✓ | | Serverless `pages/routerDirect` gzip Size | 65.3 kB | 65.3 kB | -1 B | | Serverless `pages/withRouter` Size | 244 kB | 244 kB | ✓ | | Serverless `pages/withRouter` gzip Size | 65.4 kB | 65.4 kB | -1 B | | Build Dir Size | 1.88 MB | 1.89 MB | ⚠️ +5.03 kB |
github-actions[bot] commented 5 years ago

Stats from current PR

Click to expand stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 13.7s | 13.7s | -60ms | | `node_modules` Size | 45.5 MB | 45.5 MB | ⚠️ +7.31 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 208 kB | ⚠️ +1.53 kB | | Total Bundle (main, webpack, commons) gzip Size | 67.9 kB | 68.5 kB | ⚠️ +600 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.14 kB | 4.14 kB | ✓ | | Client `pages/link` gzip Size | 1.82 kB | 1.82 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 20 kB | 21.5 kB | ⚠️ +1.53 kB | | Client `main` gzip Size | 6.86 kB | 7.46 kB | ⚠️ +600 B | | Client `commons` Size | 184 kB | 184 kB | ✓ | | Client `commons` gzip Size | 59.7 kB | 59.7 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Base Rendered Size | 1.35 kB | 1.35 kB | ✓ | | Build Dir Size | 704 kB | 709 kB | ⚠️ +4.98 kB |
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 15s | 15s | ⚠️ +28ms | | `node_modules` Size | 45.5 MB | 45.5 MB | ⚠️ +7.31 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 208 kB | ⚠️ +1.53 kB | | Total Bundle (main, webpack, commons) gzip Size | 67.9 kB | 68.5 kB | ⚠️ +600 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.14 kB | 4.14 kB | ✓ | | Client `pages/link` gzip Size | 1.82 kB | 1.82 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 20 kB | 21.5 kB | ⚠️ +1.53 kB | | Client `main` gzip Size | 6.86 kB | 7.46 kB | ⚠️ +600 B | | Client `commons` Size | 184 kB | 184 kB | ✓ | | Client `commons` gzip Size | 59.7 kB | 59.7 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Serverless `pages/link` Size | 252 kB | 252 kB | ✓ | | Serverless `pages/link` gzip Size | 67.9 kB | 67.9 kB | ⚠️ +3 B | | Serverless `pages/index` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/index` gzip Size | 65.7 kB | 65.7 kB | ⚠️ +3 B | | Serverless `pages/_error` Size | 244 kB | 244 kB | ✓ | | Serverless `pages/_error` gzip Size | 65.5 kB | 65.5 kB | ⚠️ +3 B | | Serverless `pages/routerDirect` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/routerDirect` gzip Size | 65.7 kB | 65.7 kB | ⚠️ +3 B | | Serverless `pages/withRouter` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/withRouter` gzip Size | 65.8 kB | 65.8 kB | ⚠️ +3 B | | Build Dir Size | 1.89 MB | 1.9 MB | ⚠️ +4.98 kB |
Diff for main.js ```diff @@ -1,4 +1,4 @@ -(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[2],{ +(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[8],{ /***/ "+iuc": /***/ (function(module, exports, __webpack_require__) { @@ -98,6 +98,16 @@ __webpack_require__("cHUd")('Map'); /***/ }), +/***/ "0tVQ": +/***/ (function(module, exports, __webpack_require__) { + +__webpack_require__("FlQf"); +__webpack_require__("VJsP"); +module.exports = __webpack_require__("WEpk").Array.from; + + +/***/ }), + /***/ "B9jh": /***/ (function(module, exports, __webpack_require__) { @@ -874,6 +884,22 @@ function _doRender() { /***/ }), +/***/ "IP1Z": +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + +var $defineProperty = __webpack_require__("2faE"); +var createDesc = __webpack_require__("rr1i"); + +module.exports = function (object, index, value) { + if (index in object) $defineProperty.f(object, index, createDesc(0, value)); + else object[index] = value; +}; + + +/***/ }), + /***/ "LX0d": /***/ (function(module, exports, __webpack_require__) { @@ -926,6 +952,51 @@ __webpack_require__("aPfg")('Set'); /***/ }), +/***/ "VJsP": +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + +var ctx = __webpack_require__("2GTP"); +var $export = __webpack_require__("Y7ZC"); +var toObject = __webpack_require__("JB68"); +var call = __webpack_require__("sNwI"); +var isArrayIter = __webpack_require__("NwJ3"); +var toLength = __webpack_require__("tEej"); +var createProperty = __webpack_require__("IP1Z"); +var getIterFn = __webpack_require__("fNZA"); + +$export($export.S + $export.F * !__webpack_require__("TuGD")(function (iter) { Array.from(iter); }), 'Array', { + // 22.1.2.1 Array.from(arrayLike, mapfn = undefined, thisArg = undefined) + from: function from(arrayLike /* , mapfn = undefined, thisArg = undefined */) { + var O = toObject(arrayLike); + var C = typeof this == 'function' ? this : Array; + var aLen = arguments.length; + var mapfn = aLen > 1 ? arguments[1] : undefined; + var mapping = mapfn !== undefined; + var index = 0; + var iterFn = getIterFn(O); + var length, result, step, iterator; + if (mapping) mapfn = ctx(mapfn, aLen > 2 ? arguments[2] : undefined, 2); + // if object isn't iterable or it's array with default iterator - use simple case + if (iterFn != undefined && !(C == Array && isArrayIter(iterFn))) { + for (iterator = iterFn.call(O), result = new C(); !(step = iterator.next()).done; index++) { + createProperty(result, index, mapping ? call(iterator, mapfn, [step.value, index], true) : step.value); + } + } else { + length = toLength(O.length); + for (result = new C(length); length > index; index++) { + createProperty(result, index, mapping ? mapfn(O[index], index) : O[index]); + } + } + result.length = index; + return result; + } +}); + + +/***/ }), + /***/ "XLbu": /***/ (function(module, exports, __webpack_require__) { @@ -993,6 +1064,13 @@ exports.DataManager = DataManager; /***/ }), +/***/ "d04V": +/***/ (function(module, exports, __webpack_require__) { + +module.exports = __webpack_require__("0tVQ"); + +/***/ }), + /***/ "dL40": /***/ (function(module, exports, __webpack_require__) { @@ -1118,6 +1196,8 @@ exports["default"] = void 0; var _asyncToGenerator2 = _interopRequireDefault(__webpack_require__("+oT+")); +var _from = _interopRequireDefault(__webpack_require__("d04V")); + var _promise = _interopRequireDefault(__webpack_require__("eVuF")); var _set = _interopRequireDefault(__webpack_require__("ttDY")); @@ -1125,7 +1205,7 @@ var _set = _interopRequireDefault(__webpack_require__("ttDY")); var _mitt = _interopRequireDefault(__webpack_require__("kiME")); var _unfetch = _interopRequireDefault(__webpack_require__("m/Gl")); -/* global document */ +/* global document, window */ // smaller version of https://gist.github.com/igrigorik/a02f2359f3bc50ca7a9c @@ -1207,15 +1287,38 @@ function () { if (document.getElementById("__NEXT_PAGE__" + route)) { return; - } // Load the script if not asked to load yet. - + } if (!_this3.loadingRoutes[route]) { - _this3.loadScript(route); + // Make sure we don't load a dependency that's already loaded + var loadedModules = new _set["default"]((0, _from["default"])(document.getElementsByTagName('script'), function (el) { + var results = /\/_next\/[^?]*/g.exec(el.src); + return results ? results[0] : el.src; + })); + var deps = _this3.getDependencies(route); + + var urlsToLoad = deps.filter(function (url) { + return !loadedModules.has(url); + }); _this3.loadingRoutes[route] = true; + urlsToLoad.forEach(_this3.loadScript); + + _this3.loadRouteBundle(route); } }); + } // Retrieve a list of dependencies for a given route from the build manifest + + }, { + key: "getDependencies", + value: function getDependencies(route) { + if (!window.__BUILD_MANIFEST || !window.__BUILD_MANIFEST.pages[route]) { + return []; + } + + return window.__BUILD_MANIFEST.pages[route].map(function (url) { + return '/_next/' + url; + }); } }, { key: "onDynamicBuildId", @@ -1243,14 +1346,14 @@ function () { }); } }, { - key: "loadScript", - value: function loadScript(route) { + key: "loadRouteBundle", + value: function loadRouteBundle(route) { var _this = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee() { - var scriptRoute, script, url; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee$(_context) { while (1) { switch (_context.prev = _context.next) { @@ -1261,38 +1364,47 @@ function () { case 2: route = _this.normalizeRoute(route); scriptRoute = route === '/' ? '/index.js' : route + ".js"; - script = document.createElement('script'); - - if (false) {} - url = _this.assetPrefix + "/_next/static/" + encodeURIComponent(_this.buildId) + "/pages" + scriptRoute; - script.crossOrigin = undefined; - script.src = url; - script.onerror = function () { - var error = new Error("Error loading script " + url); - error.code = 'PAGE_LOAD_ERROR'; + _this.loadScript(url); - _this.pageRegisterEvents.emit(route, { - error: error - }); - }; - - document.body.appendChild(script); - - case 11: + case 6: case "end": return _context.stop(); } } }, _callee); }))(); + } + }, { + key: "loadScript", + value: function loadScript(url) { + var _this5 = this; + + var script = document.createElement('script'); + + if (false) {} + + script.crossOrigin = undefined; + script.src = url; + script.async = false; // Explicit async = false required for in-order execution + + script.onerror = function () { + var error = new Error("Error loading script " + url); + error.code = 'PAGE_LOAD_ERROR'; + + _this5.pageRegisterEvents.emit(url, { + error: error + }); + }; + + document.body.appendChild(script); } // This method if called by the route code. }, { key: "registerPage", value: function registerPage(route, regFn) { - var _this5 = this; + var _this6 = this; var register = function register() { try { @@ -1300,21 +1412,21 @@ function () { error = _regFn.error, page = _regFn.page; - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error, page: page }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error, page: page }); } catch (error) { - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error }); } @@ -1326,13 +1438,13 @@ function () { } }, { key: "prefetch", - value: function prefetch(route) { + value: function prefetch(route, isDependency) { var _this2 = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee2() { - var scriptRoute, link; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee2$(_context2) { while (1) { switch (_context2.prev = _context2.next) { @@ -1367,32 +1479,47 @@ function () { return _context2.abrupt("return"); case 9: + if (!isDependency) { + _this2.getDependencies(route).forEach(function (url) { + _this2.prefetch(url, true); + }); + } // Feature detection is used to see if preload is supported + // If not fall back to loading script tags before the page is loaded + // https://caniuse.com/#feat=link-rel-preload + + if (!hasPreload) { - _context2.next = 19; + _context2.next = 16; break; } - _context2.next = 12; + _context2.next = 13; return _this2.promisedBuildId; - case 12: - link = document.createElement('link'); - link.rel = 'preload'; - link.crossOrigin = undefined; - link.href = _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; - link.as = 'script'; - document.head.appendChild(link); + case 13: + url = isDependency ? route : _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; + + _this2.createPreloadLink(url); + + return _context2.abrupt("return"); + + case 16: + if (!isDependency) { + _context2.next = 18; + break; + } + return _context2.abrupt("return"); - case 19: + case 18: if (!(document.readyState === 'complete')) { - _context2.next = 23; + _context2.next = 22; break; } return _context2.abrupt("return", _this2.loadPage(route)["catch"](function () {})); - case 23: + case 22: return _context2.abrupt("return", new _promise["default"](function (resolve) { window.addEventListener('load', function () { _this2.loadPage(route).then(function () { @@ -1403,7 +1530,7 @@ function () { }); })); - case 24: + case 23: case "end": return _context2.stop(); } @@ -1412,6 +1539,16 @@ function () { }))(); } }, { + key: "createPreloadLink", + value: function createPreloadLink(url) { + var link = document.createElement('link'); + link.rel = 'preload'; + link.crossOrigin = undefined; + link.href = url; + link.as = 'script'; + document.head.appendChild(link); + } + }, { key: "clearCache", value: function clearCache(route) { route = this.normalizeRoute(route); ```
github-actions[bot] commented 5 years ago

Stats from current PR

Click to expand stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 13.9s | 13.8s | -113ms | | `node_modules` Size | 45.5 MB | 45.5 MB | ⚠️ +7.6 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 208 kB | ⚠️ +1.55 kB | | Total Bundle (main, webpack, commons) gzip Size | 67.9 kB | 68.5 kB | ⚠️ +609 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.14 kB | ⚠️ +56 B | | Client `pages/link` gzip Size | 1.8 kB | 1.82 kB | ⚠️ +20 B | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 20 kB | 21.5 kB | ⚠️ +1.55 kB | | Client `main` gzip Size | 6.86 kB | 7.46 kB | ⚠️ +609 B | | Client `commons` Size | 184 kB | 184 kB | ✓ | | Client `commons` gzip Size | 59.7 kB | 59.7 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Base Rendered Size | 1.35 kB | 1.35 kB | ✓ | | Build Dir Size | 704 kB | 710 kB | ⚠️ +5.49 kB |
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 14.9s | 14.9s | ⚠️ +30ms | | `node_modules` Size | 45.5 MB | 45.5 MB | ⚠️ +7.6 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 208 kB | ⚠️ +1.55 kB | | Total Bundle (main, webpack, commons) gzip Size | 67.9 kB | 68.5 kB | ⚠️ +609 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.14 kB | ⚠️ +56 B | | Client `pages/link` gzip Size | 1.8 kB | 1.82 kB | ⚠️ +20 B | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 20 kB | 21.5 kB | ⚠️ +1.55 kB | | Client `main` gzip Size | 6.86 kB | 7.46 kB | ⚠️ +609 B | | Client `commons` Size | 184 kB | 184 kB | ✓ | | Client `commons` gzip Size | 59.7 kB | 59.7 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Serverless `pages/link` Size | 252 kB | 252 kB | ⚠️ +81 B | | Serverless `pages/link` gzip Size | 67.9 kB | 67.9 kB | ⚠️ +20 B | | Serverless `pages/index` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/index` gzip Size | 65.7 kB | 65.7 kB | ✓ | | Serverless `pages/_error` Size | 244 kB | 244 kB | ✓ | | Serverless `pages/_error` gzip Size | 65.5 kB | 65.5 kB | ✓ | | Serverless `pages/routerDirect` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/routerDirect` gzip Size | 65.7 kB | 65.7 kB | ✓ | | Serverless `pages/withRouter` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/withRouter` gzip Size | 65.8 kB | 65.8 kB | -1 B | | Build Dir Size | 1.89 MB | 1.9 MB | ⚠️ +5.49 kB |
Diff for main.js ```diff @@ -98,6 +98,16 @@ __webpack_require__("cHUd")('Map'); /***/ }), +/***/ "0tVQ": +/***/ (function(module, exports, __webpack_require__) { + +__webpack_require__("FlQf"); +__webpack_require__("VJsP"); +module.exports = __webpack_require__("WEpk").Array.from; + + +/***/ }), + /***/ "B9jh": /***/ (function(module, exports, __webpack_require__) { @@ -874,6 +884,22 @@ function _doRender() { /***/ }), +/***/ "IP1Z": +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + +var $defineProperty = __webpack_require__("2faE"); +var createDesc = __webpack_require__("rr1i"); + +module.exports = function (object, index, value) { + if (index in object) $defineProperty.f(object, index, createDesc(0, value)); + else object[index] = value; +}; + + +/***/ }), + /***/ "LX0d": /***/ (function(module, exports, __webpack_require__) { @@ -926,6 +952,51 @@ __webpack_require__("aPfg")('Set'); /***/ }), +/***/ "VJsP": +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + +var ctx = __webpack_require__("2GTP"); +var $export = __webpack_require__("Y7ZC"); +var toObject = __webpack_require__("JB68"); +var call = __webpack_require__("sNwI"); +var isArrayIter = __webpack_require__("NwJ3"); +var toLength = __webpack_require__("tEej"); +var createProperty = __webpack_require__("IP1Z"); +var getIterFn = __webpack_require__("fNZA"); + +$export($export.S + $export.F * !__webpack_require__("TuGD")(function (iter) { Array.from(iter); }), 'Array', { + // 22.1.2.1 Array.from(arrayLike, mapfn = undefined, thisArg = undefined) + from: function from(arrayLike /* , mapfn = undefined, thisArg = undefined */) { + var O = toObject(arrayLike); + var C = typeof this == 'function' ? this : Array; + var aLen = arguments.length; + var mapfn = aLen > 1 ? arguments[1] : undefined; + var mapping = mapfn !== undefined; + var index = 0; + var iterFn = getIterFn(O); + var length, result, step, iterator; + if (mapping) mapfn = ctx(mapfn, aLen > 2 ? arguments[2] : undefined, 2); + // if object isn't iterable or it's array with default iterator - use simple case + if (iterFn != undefined && !(C == Array && isArrayIter(iterFn))) { + for (iterator = iterFn.call(O), result = new C(); !(step = iterator.next()).done; index++) { + createProperty(result, index, mapping ? call(iterator, mapfn, [step.value, index], true) : step.value); + } + } else { + length = toLength(O.length); + for (result = new C(length); length > index; index++) { + createProperty(result, index, mapping ? mapfn(O[index], index) : O[index]); + } + } + result.length = index; + return result; + } +}); + + +/***/ }), + /***/ "XLbu": /***/ (function(module, exports, __webpack_require__) { @@ -993,6 +1064,13 @@ exports.DataManager = DataManager; /***/ }), +/***/ "d04V": +/***/ (function(module, exports, __webpack_require__) { + +module.exports = __webpack_require__("0tVQ"); + +/***/ }), + /***/ "dL40": /***/ (function(module, exports, __webpack_require__) { @@ -1118,6 +1196,8 @@ exports["default"] = void 0; var _asyncToGenerator2 = _interopRequireDefault(__webpack_require__("+oT+")); +var _from = _interopRequireDefault(__webpack_require__("d04V")); + var _promise = _interopRequireDefault(__webpack_require__("eVuF")); var _set = _interopRequireDefault(__webpack_require__("ttDY")); @@ -1125,7 +1205,7 @@ var _set = _interopRequireDefault(__webpack_require__("ttDY")); var _mitt = _interopRequireDefault(__webpack_require__("kiME")); var _unfetch = _interopRequireDefault(__webpack_require__("m/Gl")); -/* global document */ +/* global document, window */ // smaller version of https://gist.github.com/igrigorik/a02f2359f3bc50ca7a9c @@ -1207,15 +1287,40 @@ function () { if (document.getElementById("__NEXT_PAGE__" + route)) { return; - } // Load the script if not asked to load yet. - + } if (!_this3.loadingRoutes[route]) { - _this3.loadScript(route); + // Make sure we don't load a dependency that's already loaded + var loadedModules = new _set["default"]((0, _from["default"])(document.getElementsByTagName('script'), function (el) { + var results = /\/_next\/[^?]*/g.exec(el.src); + return results ? results[0] : el.src; + })); + var deps = _this3.getDependencies(route); + + var urlsToLoad = deps.filter(function (url) { + return !loadedModules.has(url); + }); _this3.loadingRoutes[route] = true; + urlsToLoad.forEach(function (url) { + return _this3.loadScript(url, route); + }); + + _this3.loadRouteBundle(route); } }); + } // Retrieve a list of dependencies for a given route from the build manifest + + }, { + key: "getDependencies", + value: function getDependencies(route) { + if (!window.__BUILD_MANIFEST || !window.__BUILD_MANIFEST.pages[route]) { + return []; + } + + return window.__BUILD_MANIFEST.pages[route].map(function (url) { + return '/_next/' + url; + }); } }, { key: "onDynamicBuildId", @@ -1243,14 +1348,14 @@ function () { }); } }, { - key: "loadScript", - value: function loadScript(route) { + key: "loadRouteBundle", + value: function loadRouteBundle(route) { var _this = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee() { - var scriptRoute, script, url; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee$(_context) { while (1) { switch (_context.prev = _context.next) { @@ -1261,38 +1366,47 @@ function () { case 2: route = _this.normalizeRoute(route); scriptRoute = route === '/' ? '/index.js' : route + ".js"; - script = document.createElement('script'); - - if (false) {} - url = _this.assetPrefix + "/_next/static/" + encodeURIComponent(_this.buildId) + "/pages" + scriptRoute; - script.crossOrigin = undefined; - script.src = url; - script.onerror = function () { - var error = new Error("Error loading script " + url); - error.code = 'PAGE_LOAD_ERROR'; + _this.loadScript(url, route); - _this.pageRegisterEvents.emit(route, { - error: error - }); - }; - - document.body.appendChild(script); - - case 11: + case 6: case "end": return _context.stop(); } } }, _callee); }))(); + } + }, { + key: "loadScript", + value: function loadScript(url, route) { + var _this5 = this; + + var script = document.createElement('script'); + + if (false) {} + + script.crossOrigin = undefined; + script.src = url; + script.async = false; // Explicit async = false required for in-order execution + + script.onerror = function () { + var error = new Error("Error loading script " + url); + error.code = 'PAGE_LOAD_ERROR'; + + _this5.pageRegisterEvents.emit(route, { + error: error + }); + }; + + document.body.appendChild(script); } // This method if called by the route code. }, { key: "registerPage", value: function registerPage(route, regFn) { - var _this5 = this; + var _this6 = this; var register = function register() { try { @@ -1300,21 +1414,21 @@ function () { error = _regFn.error, page = _regFn.page; - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error, page: page }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error, page: page }); } catch (error) { - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error }); } @@ -1326,13 +1440,13 @@ function () { } }, { key: "prefetch", - value: function prefetch(route) { + value: function prefetch(route, isDependency) { var _this2 = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee2() { - var scriptRoute, link; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee2$(_context2) { while (1) { switch (_context2.prev = _context2.next) { @@ -1367,32 +1481,47 @@ function () { return _context2.abrupt("return"); case 9: + if (!isDependency) { + _this2.getDependencies(route).forEach(function (url) { + _this2.prefetch(url, true); + }); + } // Feature detection is used to see if preload is supported + // If not fall back to loading script tags before the page is loaded + // https://caniuse.com/#feat=link-rel-preload + + if (!hasPreload) { - _context2.next = 19; + _context2.next = 16; break; } - _context2.next = 12; + _context2.next = 13; return _this2.promisedBuildId; - case 12: - link = document.createElement('link'); - link.rel = 'preload'; - link.crossOrigin = undefined; - link.href = _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; - link.as = 'script'; - document.head.appendChild(link); + case 13: + url = isDependency ? route : _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; + + _this2.createPreloadLink(url); + + return _context2.abrupt("return"); + + case 16: + if (!isDependency) { + _context2.next = 18; + break; + } + return _context2.abrupt("return"); - case 19: + case 18: if (!(document.readyState === 'complete')) { - _context2.next = 23; + _context2.next = 22; break; } return _context2.abrupt("return", _this2.loadPage(route)["catch"](function () {})); - case 23: + case 22: return _context2.abrupt("return", new _promise["default"](function (resolve) { window.addEventListener('load', function () { _this2.loadPage(route).then(function () { @@ -1403,7 +1532,7 @@ function () { }); })); - case 24: + case 23: case "end": return _context2.stop(); } @@ -1412,6 +1541,16 @@ function () { }))(); } }, { + key: "createPreloadLink", + value: function createPreloadLink(url) { + var link = document.createElement('link'); + link.rel = 'preload'; + link.crossOrigin = undefined; + link.href = url; + link.as = 'script'; + document.head.appendChild(link); + } + }, { key: "clearCache", value: function clearCache(route) { route = this.normalizeRoute(route); ```
github-actions[bot] commented 5 years ago

Stats from current PR

Click to expand stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 13s | 13.3s | ⚠️ +300ms | | `node_modules` Size | 45.5 MB | 45.5 MB | ⚠️ +7.6 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 208 kB | ⚠️ +1.55 kB | | Total Bundle (main, webpack, commons) gzip Size | 67.9 kB | 68.5 kB | ⚠️ +609 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.14 kB | ⚠️ +56 B | | Client `pages/link` gzip Size | 1.8 kB | 1.82 kB | ⚠️ +20 B | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 20 kB | 21.5 kB | ⚠️ +1.55 kB | | Client `main` gzip Size | 6.86 kB | 7.46 kB | ⚠️ +609 B | | Client `commons` Size | 184 kB | 184 kB | ✓ | | Client `commons` gzip Size | 59.7 kB | 59.7 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Base Rendered Size | 1.35 kB | 1.35 kB | ✓ | | Build Dir Size | 704 kB | 710 kB | ⚠️ +5.49 kB |
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 13.8s | 14s | ⚠️ +257ms | | `node_modules` Size | 45.5 MB | 45.5 MB | ⚠️ +7.6 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 208 kB | ⚠️ +1.55 kB | | Total Bundle (main, webpack, commons) gzip Size | 67.9 kB | 68.5 kB | ⚠️ +609 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.14 kB | ⚠️ +56 B | | Client `pages/link` gzip Size | 1.8 kB | 1.82 kB | ⚠️ +20 B | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 20 kB | 21.5 kB | ⚠️ +1.55 kB | | Client `main` gzip Size | 6.86 kB | 7.46 kB | ⚠️ +609 B | | Client `commons` Size | 184 kB | 184 kB | ✓ | | Client `commons` gzip Size | 59.7 kB | 59.7 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Serverless `pages/link` Size | 252 kB | 252 kB | ⚠️ +81 B | | Serverless `pages/link` gzip Size | 67.9 kB | 67.9 kB | ⚠️ +19 B | | Serverless `pages/index` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/index` gzip Size | 65.7 kB | 65.7 kB | -1 B | | Serverless `pages/_error` Size | 244 kB | 244 kB | ✓ | | Serverless `pages/_error` gzip Size | 65.5 kB | 65.5 kB | -1 B | | Serverless `pages/routerDirect` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/routerDirect` gzip Size | 65.7 kB | 65.7 kB | -1 B | | Serverless `pages/withRouter` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/withRouter` gzip Size | 65.8 kB | 65.8 kB | ✓ | | Build Dir Size | 1.89 MB | 1.9 MB | ⚠️ +5.49 kB |
Diff for main.js ```diff @@ -98,6 +98,16 @@ __webpack_require__("cHUd")('Map'); /***/ }), +/***/ "0tVQ": +/***/ (function(module, exports, __webpack_require__) { + +__webpack_require__("FlQf"); +__webpack_require__("VJsP"); +module.exports = __webpack_require__("WEpk").Array.from; + + +/***/ }), + /***/ "B9jh": /***/ (function(module, exports, __webpack_require__) { @@ -874,6 +884,22 @@ function _doRender() { /***/ }), +/***/ "IP1Z": +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + +var $defineProperty = __webpack_require__("2faE"); +var createDesc = __webpack_require__("rr1i"); + +module.exports = function (object, index, value) { + if (index in object) $defineProperty.f(object, index, createDesc(0, value)); + else object[index] = value; +}; + + +/***/ }), + /***/ "LX0d": /***/ (function(module, exports, __webpack_require__) { @@ -926,6 +952,51 @@ __webpack_require__("aPfg")('Set'); /***/ }), +/***/ "VJsP": +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + +var ctx = __webpack_require__("2GTP"); +var $export = __webpack_require__("Y7ZC"); +var toObject = __webpack_require__("JB68"); +var call = __webpack_require__("sNwI"); +var isArrayIter = __webpack_require__("NwJ3"); +var toLength = __webpack_require__("tEej"); +var createProperty = __webpack_require__("IP1Z"); +var getIterFn = __webpack_require__("fNZA"); + +$export($export.S + $export.F * !__webpack_require__("TuGD")(function (iter) { Array.from(iter); }), 'Array', { + // 22.1.2.1 Array.from(arrayLike, mapfn = undefined, thisArg = undefined) + from: function from(arrayLike /* , mapfn = undefined, thisArg = undefined */) { + var O = toObject(arrayLike); + var C = typeof this == 'function' ? this : Array; + var aLen = arguments.length; + var mapfn = aLen > 1 ? arguments[1] : undefined; + var mapping = mapfn !== undefined; + var index = 0; + var iterFn = getIterFn(O); + var length, result, step, iterator; + if (mapping) mapfn = ctx(mapfn, aLen > 2 ? arguments[2] : undefined, 2); + // if object isn't iterable or it's array with default iterator - use simple case + if (iterFn != undefined && !(C == Array && isArrayIter(iterFn))) { + for (iterator = iterFn.call(O), result = new C(); !(step = iterator.next()).done; index++) { + createProperty(result, index, mapping ? call(iterator, mapfn, [step.value, index], true) : step.value); + } + } else { + length = toLength(O.length); + for (result = new C(length); length > index; index++) { + createProperty(result, index, mapping ? mapfn(O[index], index) : O[index]); + } + } + result.length = index; + return result; + } +}); + + +/***/ }), + /***/ "XLbu": /***/ (function(module, exports, __webpack_require__) { @@ -993,6 +1064,13 @@ exports.DataManager = DataManager; /***/ }), +/***/ "d04V": +/***/ (function(module, exports, __webpack_require__) { + +module.exports = __webpack_require__("0tVQ"); + +/***/ }), + /***/ "dL40": /***/ (function(module, exports, __webpack_require__) { @@ -1118,6 +1196,8 @@ exports["default"] = void 0; var _asyncToGenerator2 = _interopRequireDefault(__webpack_require__("+oT+")); +var _from = _interopRequireDefault(__webpack_require__("d04V")); + var _promise = _interopRequireDefault(__webpack_require__("eVuF")); var _set = _interopRequireDefault(__webpack_require__("ttDY")); @@ -1125,7 +1205,7 @@ var _set = _interopRequireDefault(__webpack_require__("ttDY")); var _mitt = _interopRequireDefault(__webpack_require__("kiME")); var _unfetch = _interopRequireDefault(__webpack_require__("m/Gl")); -/* global document */ +/* global document, window */ // smaller version of https://gist.github.com/igrigorik/a02f2359f3bc50ca7a9c @@ -1207,15 +1287,40 @@ function () { if (document.getElementById("__NEXT_PAGE__" + route)) { return; - } // Load the script if not asked to load yet. - + } if (!_this3.loadingRoutes[route]) { - _this3.loadScript(route); + // Make sure we don't load a dependency that's already loaded + var loadedModules = new _set["default"]((0, _from["default"])(document.getElementsByTagName('script'), function (el) { + var results = /\/_next\/[^?]*/g.exec(el.src); + return results ? results[0] : el.src; + })); + var deps = _this3.getDependencies(route); + + var urlsToLoad = deps.filter(function (url) { + return !loadedModules.has(url); + }); _this3.loadingRoutes[route] = true; + urlsToLoad.forEach(function (url) { + return _this3.loadScript(url, route); + }); + + _this3.loadRouteBundle(route); } }); + } // Retrieve a list of dependencies for a given route from the build manifest + + }, { + key: "getDependencies", + value: function getDependencies(route) { + if (!window.__BUILD_MANIFEST || !window.__BUILD_MANIFEST.pages[route]) { + return []; + } + + return window.__BUILD_MANIFEST.pages[route].map(function (url) { + return '/_next/' + url; + }); } }, { key: "onDynamicBuildId", @@ -1243,14 +1348,14 @@ function () { }); } }, { - key: "loadScript", - value: function loadScript(route) { + key: "loadRouteBundle", + value: function loadRouteBundle(route) { var _this = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee() { - var scriptRoute, script, url; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee$(_context) { while (1) { switch (_context.prev = _context.next) { @@ -1261,38 +1366,47 @@ function () { case 2: route = _this.normalizeRoute(route); scriptRoute = route === '/' ? '/index.js' : route + ".js"; - script = document.createElement('script'); - - if (false) {} - url = _this.assetPrefix + "/_next/static/" + encodeURIComponent(_this.buildId) + "/pages" + scriptRoute; - script.crossOrigin = undefined; - script.src = url; - script.onerror = function () { - var error = new Error("Error loading script " + url); - error.code = 'PAGE_LOAD_ERROR'; + _this.loadScript(url, route); - _this.pageRegisterEvents.emit(route, { - error: error - }); - }; - - document.body.appendChild(script); - - case 11: + case 6: case "end": return _context.stop(); } } }, _callee); }))(); + } + }, { + key: "loadScript", + value: function loadScript(url, route) { + var _this5 = this; + + var script = document.createElement('script'); + + if (false) {} + + script.crossOrigin = undefined; + script.src = url; + script.async = false; // Explicit async = false required for in-order execution + + script.onerror = function () { + var error = new Error("Error loading script " + url); + error.code = 'PAGE_LOAD_ERROR'; + + _this5.pageRegisterEvents.emit(route, { + error: error + }); + }; + + document.body.appendChild(script); } // This method if called by the route code. }, { key: "registerPage", value: function registerPage(route, regFn) { - var _this5 = this; + var _this6 = this; var register = function register() { try { @@ -1300,21 +1414,21 @@ function () { error = _regFn.error, page = _regFn.page; - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error, page: page }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error, page: page }); } catch (error) { - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error }); } @@ -1326,13 +1440,13 @@ function () { } }, { key: "prefetch", - value: function prefetch(route) { + value: function prefetch(route, isDependency) { var _this2 = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee2() { - var scriptRoute, link; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee2$(_context2) { while (1) { switch (_context2.prev = _context2.next) { @@ -1367,32 +1481,47 @@ function () { return _context2.abrupt("return"); case 9: + if (!isDependency) { + _this2.getDependencies(route).forEach(function (url) { + _this2.prefetch(url, true); + }); + } // Feature detection is used to see if preload is supported + // If not fall back to loading script tags before the page is loaded + // https://caniuse.com/#feat=link-rel-preload + + if (!hasPreload) { - _context2.next = 19; + _context2.next = 16; break; } - _context2.next = 12; + _context2.next = 13; return _this2.promisedBuildId; - case 12: - link = document.createElement('link'); - link.rel = 'preload'; - link.crossOrigin = undefined; - link.href = _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; - link.as = 'script'; - document.head.appendChild(link); + case 13: + url = isDependency ? route : _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; + + _this2.createPreloadLink(url); + + return _context2.abrupt("return"); + + case 16: + if (!isDependency) { + _context2.next = 18; + break; + } + return _context2.abrupt("return"); - case 19: + case 18: if (!(document.readyState === 'complete')) { - _context2.next = 23; + _context2.next = 22; break; } return _context2.abrupt("return", _this2.loadPage(route)["catch"](function () {})); - case 23: + case 22: return _context2.abrupt("return", new _promise["default"](function (resolve) { window.addEventListener('load', function () { _this2.loadPage(route).then(function () { @@ -1403,7 +1532,7 @@ function () { }); })); - case 24: + case 23: case "end": return _context2.stop(); } @@ -1412,6 +1541,16 @@ function () { }))(); } }, { + key: "createPreloadLink", + value: function createPreloadLink(url) { + var link = document.createElement('link'); + link.rel = 'preload'; + link.crossOrigin = undefined; + link.href = url; + link.as = 'script'; + document.head.appendChild(link); + } + }, { key: "clearCache", value: function clearCache(route) { route = this.normalizeRoute(route); ```
github-actions[bot] commented 5 years ago

Stats from current PR

Click to expand stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 12s | 12.1s | ⚠️ +65ms | | `node_modules` Size | 45.5 MB | 45.5 MB | ⚠️ +7.93 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 208 kB | ⚠️ +1.55 kB | | Total Bundle (main, webpack, commons) gzip Size | 67.9 kB | 68.5 kB | ⚠️ +609 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.14 kB | ⚠️ +56 B | | Client `pages/link` gzip Size | 1.8 kB | 1.82 kB | ⚠️ +20 B | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 20 kB | 21.5 kB | ⚠️ +1.55 kB | | Client `main` gzip Size | 6.86 kB | 7.46 kB | ⚠️ +609 B | | Client `commons` Size | 184 kB | 184 kB | ✓ | | Client `commons` gzip Size | 59.7 kB | 59.7 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Base Rendered Size | 1.35 kB | 1.35 kB | ✓ | | Build Dir Size | 704 kB | 710 kB | ⚠️ +5.49 kB |
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 13.1s | 13.1s | -31ms | | `node_modules` Size | 45.5 MB | 45.5 MB | ⚠️ +7.93 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 208 kB | ⚠️ +1.55 kB | | Total Bundle (main, webpack, commons) gzip Size | 67.9 kB | 68.5 kB | ⚠️ +607 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | -1 B | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.14 kB | ⚠️ +56 B | | Client `pages/link` gzip Size | 1.8 kB | 1.82 kB | ⚠️ +20 B | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 300 B | -1 B | | Client `main` Size | 20 kB | 21.5 kB | ⚠️ +1.55 kB | | Client `main` gzip Size | 6.86 kB | 7.46 kB | ⚠️ +608 B | | Client `commons` Size | 184 kB | 184 kB | ✓ | | Client `commons` gzip Size | 59.7 kB | 59.7 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Serverless `pages/link` Size | 252 kB | 252 kB | ⚠️ +81 B | | Serverless `pages/link` gzip Size | 67.9 kB | 67.9 kB | ⚠️ +18 B | | Serverless `pages/index` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/index` gzip Size | 65.7 kB | 65.7 kB | -1 B | | Serverless `pages/_error` Size | 244 kB | 244 kB | ✓ | | Serverless `pages/_error` gzip Size | 65.5 kB | 65.5 kB | -2 B | | Serverless `pages/routerDirect` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/routerDirect` gzip Size | 65.7 kB | 65.7 kB | -1 B | | Serverless `pages/withRouter` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/withRouter` gzip Size | 65.8 kB | 65.8 kB | -1 B | | Build Dir Size | 1.89 MB | 1.9 MB | ⚠️ +5.49 kB |
Diff for main.js ```diff @@ -98,6 +98,16 @@ __webpack_require__("cHUd")('Map'); /***/ }), +/***/ "0tVQ": +/***/ (function(module, exports, __webpack_require__) { + +__webpack_require__("FlQf"); +__webpack_require__("VJsP"); +module.exports = __webpack_require__("WEpk").Array.from; + + +/***/ }), + /***/ "B9jh": /***/ (function(module, exports, __webpack_require__) { @@ -874,6 +884,22 @@ function _doRender() { /***/ }), +/***/ "IP1Z": +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + +var $defineProperty = __webpack_require__("2faE"); +var createDesc = __webpack_require__("rr1i"); + +module.exports = function (object, index, value) { + if (index in object) $defineProperty.f(object, index, createDesc(0, value)); + else object[index] = value; +}; + + +/***/ }), + /***/ "LX0d": /***/ (function(module, exports, __webpack_require__) { @@ -926,6 +952,51 @@ __webpack_require__("aPfg")('Set'); /***/ }), +/***/ "VJsP": +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + +var ctx = __webpack_require__("2GTP"); +var $export = __webpack_require__("Y7ZC"); +var toObject = __webpack_require__("JB68"); +var call = __webpack_require__("sNwI"); +var isArrayIter = __webpack_require__("NwJ3"); +var toLength = __webpack_require__("tEej"); +var createProperty = __webpack_require__("IP1Z"); +var getIterFn = __webpack_require__("fNZA"); + +$export($export.S + $export.F * !__webpack_require__("TuGD")(function (iter) { Array.from(iter); }), 'Array', { + // 22.1.2.1 Array.from(arrayLike, mapfn = undefined, thisArg = undefined) + from: function from(arrayLike /* , mapfn = undefined, thisArg = undefined */) { + var O = toObject(arrayLike); + var C = typeof this == 'function' ? this : Array; + var aLen = arguments.length; + var mapfn = aLen > 1 ? arguments[1] : undefined; + var mapping = mapfn !== undefined; + var index = 0; + var iterFn = getIterFn(O); + var length, result, step, iterator; + if (mapping) mapfn = ctx(mapfn, aLen > 2 ? arguments[2] : undefined, 2); + // if object isn't iterable or it's array with default iterator - use simple case + if (iterFn != undefined && !(C == Array && isArrayIter(iterFn))) { + for (iterator = iterFn.call(O), result = new C(); !(step = iterator.next()).done; index++) { + createProperty(result, index, mapping ? call(iterator, mapfn, [step.value, index], true) : step.value); + } + } else { + length = toLength(O.length); + for (result = new C(length); length > index; index++) { + createProperty(result, index, mapping ? mapfn(O[index], index) : O[index]); + } + } + result.length = index; + return result; + } +}); + + +/***/ }), + /***/ "XLbu": /***/ (function(module, exports, __webpack_require__) { @@ -993,6 +1064,13 @@ exports.DataManager = DataManager; /***/ }), +/***/ "d04V": +/***/ (function(module, exports, __webpack_require__) { + +module.exports = __webpack_require__("0tVQ"); + +/***/ }), + /***/ "dL40": /***/ (function(module, exports, __webpack_require__) { @@ -1118,6 +1196,8 @@ exports["default"] = void 0; var _asyncToGenerator2 = _interopRequireDefault(__webpack_require__("+oT+")); +var _from = _interopRequireDefault(__webpack_require__("d04V")); + var _promise = _interopRequireDefault(__webpack_require__("eVuF")); var _set = _interopRequireDefault(__webpack_require__("ttDY")); @@ -1125,7 +1205,7 @@ var _set = _interopRequireDefault(__webpack_require__("ttDY")); var _mitt = _interopRequireDefault(__webpack_require__("kiME")); var _unfetch = _interopRequireDefault(__webpack_require__("m/Gl")); -/* global document */ +/* global document, window */ // smaller version of https://gist.github.com/igrigorik/a02f2359f3bc50ca7a9c @@ -1207,15 +1287,40 @@ function () { if (document.getElementById("__NEXT_PAGE__" + route)) { return; - } // Load the script if not asked to load yet. - + } if (!_this3.loadingRoutes[route]) { - _this3.loadScript(route); + // Make sure we don't load a dependency that's already loaded + var loadedModules = new _set["default"]((0, _from["default"])(document.getElementsByTagName('script'), function (el) { + var results = /\/_next\/[^?]*/g.exec(el.src); + return results ? results[0] : el.src; + })); + var deps = _this3.getDependencies(route); + + var urlsToLoad = deps.filter(function (url) { + return !loadedModules.has(url); + }); _this3.loadingRoutes[route] = true; + urlsToLoad.forEach(function (url) { + return _this3.loadScript(url, route); + }); + + _this3.loadRouteBundle(route); } }); + } // Retrieve a list of dependencies for a given route from the build manifest + + }, { + key: "getDependencies", + value: function getDependencies(route) { + if (!window.__BUILD_MANIFEST || !window.__BUILD_MANIFEST.pages[route]) { + return []; + } + + return window.__BUILD_MANIFEST.pages[route].map(function (url) { + return '/_next/' + url; + }); } }, { key: "onDynamicBuildId", @@ -1243,14 +1348,14 @@ function () { }); } }, { - key: "loadScript", - value: function loadScript(route) { + key: "loadRouteBundle", + value: function loadRouteBundle(route) { var _this = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee() { - var scriptRoute, script, url; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee$(_context) { while (1) { switch (_context.prev = _context.next) { @@ -1261,38 +1366,47 @@ function () { case 2: route = _this.normalizeRoute(route); scriptRoute = route === '/' ? '/index.js' : route + ".js"; - script = document.createElement('script'); - - if (false) {} - url = _this.assetPrefix + "/_next/static/" + encodeURIComponent(_this.buildId) + "/pages" + scriptRoute; - script.crossOrigin = undefined; - script.src = url; - script.onerror = function () { - var error = new Error("Error loading script " + url); - error.code = 'PAGE_LOAD_ERROR'; + _this.loadScript(url, route); - _this.pageRegisterEvents.emit(route, { - error: error - }); - }; - - document.body.appendChild(script); - - case 11: + case 6: case "end": return _context.stop(); } } }, _callee); }))(); + } + }, { + key: "loadScript", + value: function loadScript(url, route) { + var _this5 = this; + + var script = document.createElement('script'); + + if (false) {} + + script.crossOrigin = undefined; + script.src = url; + script.async = false; // Explicit async = false required for in-order execution + + script.onerror = function () { + var error = new Error("Error loading script " + url); + error.code = 'PAGE_LOAD_ERROR'; + + _this5.pageRegisterEvents.emit(route, { + error: error + }); + }; + + document.body.appendChild(script); } // This method if called by the route code. }, { key: "registerPage", value: function registerPage(route, regFn) { - var _this5 = this; + var _this6 = this; var register = function register() { try { @@ -1300,21 +1414,21 @@ function () { error = _regFn.error, page = _regFn.page; - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error, page: page }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error, page: page }); } catch (error) { - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error }); } @@ -1326,13 +1440,13 @@ function () { } }, { key: "prefetch", - value: function prefetch(route) { + value: function prefetch(route, isDependency) { var _this2 = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee2() { - var scriptRoute, link; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee2$(_context2) { while (1) { switch (_context2.prev = _context2.next) { @@ -1367,32 +1481,47 @@ function () { return _context2.abrupt("return"); case 9: + if (!isDependency) { + _this2.getDependencies(route).forEach(function (url) { + _this2.prefetch(url, true); + }); + } // Feature detection is used to see if preload is supported + // If not fall back to loading script tags before the page is loaded + // https://caniuse.com/#feat=link-rel-preload + + if (!hasPreload) { - _context2.next = 19; + _context2.next = 16; break; } - _context2.next = 12; + _context2.next = 13; return _this2.promisedBuildId; - case 12: - link = document.createElement('link'); - link.rel = 'preload'; - link.crossOrigin = undefined; - link.href = _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; - link.as = 'script'; - document.head.appendChild(link); + case 13: + url = isDependency ? route : _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; + + _this2.createPreloadLink(url); + + return _context2.abrupt("return"); + + case 16: + if (!isDependency) { + _context2.next = 18; + break; + } + return _context2.abrupt("return"); - case 19: + case 18: if (!(document.readyState === 'complete')) { - _context2.next = 23; + _context2.next = 22; break; } return _context2.abrupt("return", _this2.loadPage(route)["catch"](function () {})); - case 23: + case 22: return _context2.abrupt("return", new _promise["default"](function (resolve) { window.addEventListener('load', function () { _this2.loadPage(route).then(function () { @@ -1403,7 +1532,7 @@ function () { }); })); - case 24: + case 23: case "end": return _context2.stop(); } @@ -1412,6 +1541,16 @@ function () { }))(); } }, { + key: "createPreloadLink", + value: function createPreloadLink(url) { + var link = document.createElement('link'); + link.rel = 'preload'; + link.crossOrigin = undefined; + link.href = url; + link.as = 'script'; + document.head.appendChild(link); + } + }, { key: "clearCache", value: function clearCache(route) { route = this.normalizeRoute(route); ```
github-actions[bot] commented 5 years ago

Stats from current PR

Click to expand stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 14.1s | 14.3s | ⚠️ +169ms | | `node_modules` Size | 45.5 MB | 45.5 MB | ⚠️ +8 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 208 kB | ⚠️ +1.55 kB | | Total Bundle (main, webpack, commons) gzip Size | 67.9 kB | 68.5 kB | ⚠️ +609 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.14 kB | ⚠️ +56 B | | Client `pages/link` gzip Size | 1.8 kB | 1.82 kB | ⚠️ +20 B | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 20 kB | 21.5 kB | ⚠️ +1.55 kB | | Client `main` gzip Size | 6.86 kB | 7.46 kB | ⚠️ +609 B | | Client `commons` Size | 184 kB | 184 kB | ✓ | | Client `commons` gzip Size | 59.7 kB | 59.7 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Base Rendered Size | 1.35 kB | 1.35 kB | ✓ | | Build Dir Size | 704 kB | 710 kB | ⚠️ +5.49 kB |
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 15.1s | 15.2s | ⚠️ +61ms | | `node_modules` Size | 45.5 MB | 45.5 MB | ⚠️ +8 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 208 kB | ⚠️ +1.55 kB | | Total Bundle (main, webpack, commons) gzip Size | 67.9 kB | 68.5 kB | ⚠️ +609 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.14 kB | ⚠️ +56 B | | Client `pages/link` gzip Size | 1.8 kB | 1.82 kB | ⚠️ +20 B | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 20 kB | 21.5 kB | ⚠️ +1.55 kB | | Client `main` gzip Size | 6.86 kB | 7.46 kB | ⚠️ +609 B | | Client `commons` Size | 184 kB | 184 kB | ✓ | | Client `commons` gzip Size | 59.7 kB | 59.7 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Serverless `pages/link` Size | 252 kB | 252 kB | ⚠️ +81 B | | Serverless `pages/link` gzip Size | 67.9 kB | 67.9 kB | ⚠️ +20 B | | Serverless `pages/index` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/index` gzip Size | 65.7 kB | 65.7 kB | ⚠️ +2 B | | Serverless `pages/_error` Size | 244 kB | 244 kB | ✓ | | Serverless `pages/_error` gzip Size | 65.5 kB | 65.5 kB | ⚠️ +1 B | | Serverless `pages/routerDirect` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/routerDirect` gzip Size | 65.7 kB | 65.7 kB | ⚠️ +1 B | | Serverless `pages/withRouter` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/withRouter` gzip Size | 65.8 kB | 65.8 kB | ⚠️ +2 B | | Build Dir Size | 1.89 MB | 1.9 MB | ⚠️ +5.49 kB |
Diff for main.js ```diff @@ -1,4 +1,4 @@ -(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[8],{ +(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[2],{ /***/ "+iuc": /***/ (function(module, exports, __webpack_require__) { @@ -98,6 +98,16 @@ __webpack_require__("cHUd")('Map'); /***/ }), +/***/ "0tVQ": +/***/ (function(module, exports, __webpack_require__) { + +__webpack_require__("FlQf"); +__webpack_require__("VJsP"); +module.exports = __webpack_require__("WEpk").Array.from; + + +/***/ }), + /***/ "B9jh": /***/ (function(module, exports, __webpack_require__) { @@ -874,6 +884,22 @@ function _doRender() { /***/ }), +/***/ "IP1Z": +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + +var $defineProperty = __webpack_require__("2faE"); +var createDesc = __webpack_require__("rr1i"); + +module.exports = function (object, index, value) { + if (index in object) $defineProperty.f(object, index, createDesc(0, value)); + else object[index] = value; +}; + + +/***/ }), + /***/ "LX0d": /***/ (function(module, exports, __webpack_require__) { @@ -926,6 +952,51 @@ __webpack_require__("aPfg")('Set'); /***/ }), +/***/ "VJsP": +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + +var ctx = __webpack_require__("2GTP"); +var $export = __webpack_require__("Y7ZC"); +var toObject = __webpack_require__("JB68"); +var call = __webpack_require__("sNwI"); +var isArrayIter = __webpack_require__("NwJ3"); +var toLength = __webpack_require__("tEej"); +var createProperty = __webpack_require__("IP1Z"); +var getIterFn = __webpack_require__("fNZA"); + +$export($export.S + $export.F * !__webpack_require__("TuGD")(function (iter) { Array.from(iter); }), 'Array', { + // 22.1.2.1 Array.from(arrayLike, mapfn = undefined, thisArg = undefined) + from: function from(arrayLike /* , mapfn = undefined, thisArg = undefined */) { + var O = toObject(arrayLike); + var C = typeof this == 'function' ? this : Array; + var aLen = arguments.length; + var mapfn = aLen > 1 ? arguments[1] : undefined; + var mapping = mapfn !== undefined; + var index = 0; + var iterFn = getIterFn(O); + var length, result, step, iterator; + if (mapping) mapfn = ctx(mapfn, aLen > 2 ? arguments[2] : undefined, 2); + // if object isn't iterable or it's array with default iterator - use simple case + if (iterFn != undefined && !(C == Array && isArrayIter(iterFn))) { + for (iterator = iterFn.call(O), result = new C(); !(step = iterator.next()).done; index++) { + createProperty(result, index, mapping ? call(iterator, mapfn, [step.value, index], true) : step.value); + } + } else { + length = toLength(O.length); + for (result = new C(length); length > index; index++) { + createProperty(result, index, mapping ? mapfn(O[index], index) : O[index]); + } + } + result.length = index; + return result; + } +}); + + +/***/ }), + /***/ "XLbu": /***/ (function(module, exports, __webpack_require__) { @@ -993,6 +1064,13 @@ exports.DataManager = DataManager; /***/ }), +/***/ "d04V": +/***/ (function(module, exports, __webpack_require__) { + +module.exports = __webpack_require__("0tVQ"); + +/***/ }), + /***/ "dL40": /***/ (function(module, exports, __webpack_require__) { @@ -1118,6 +1196,8 @@ exports["default"] = void 0; var _asyncToGenerator2 = _interopRequireDefault(__webpack_require__("+oT+")); +var _from = _interopRequireDefault(__webpack_require__("d04V")); + var _promise = _interopRequireDefault(__webpack_require__("eVuF")); var _set = _interopRequireDefault(__webpack_require__("ttDY")); @@ -1125,7 +1205,7 @@ var _set = _interopRequireDefault(__webpack_require__("ttDY")); var _mitt = _interopRequireDefault(__webpack_require__("kiME")); var _unfetch = _interopRequireDefault(__webpack_require__("m/Gl")); -/* global document */ +/* global document, window */ // smaller version of https://gist.github.com/igrigorik/a02f2359f3bc50ca7a9c @@ -1207,15 +1287,40 @@ function () { if (document.getElementById("__NEXT_PAGE__" + route)) { return; - } // Load the script if not asked to load yet. - + } if (!_this3.loadingRoutes[route]) { - _this3.loadScript(route); + // Make sure we don't load a dependency that's already loaded + var loadedModules = new _set["default"]((0, _from["default"])(document.getElementsByTagName('script'), function (el) { + var results = /\/_next\/[^?]*/g.exec(el.src); + return results ? results[0] : el.src; + })); + var deps = _this3.getDependencies(route); + + var urlsToLoad = deps.filter(function (url) { + return !loadedModules.has(url); + }); _this3.loadingRoutes[route] = true; + urlsToLoad.forEach(function (url) { + return _this3.loadScript(url, route); + }); + + _this3.loadRouteBundle(route); } }); + } // Retrieve a list of dependencies for a given route from the build manifest + + }, { + key: "getDependencies", + value: function getDependencies(route) { + if (!window.__BUILD_MANIFEST || !window.__BUILD_MANIFEST.pages[route]) { + return []; + } + + return window.__BUILD_MANIFEST.pages[route].map(function (url) { + return '/_next/' + url; + }); } }, { key: "onDynamicBuildId", @@ -1243,14 +1348,14 @@ function () { }); } }, { - key: "loadScript", - value: function loadScript(route) { + key: "loadRouteBundle", + value: function loadRouteBundle(route) { var _this = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee() { - var scriptRoute, script, url; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee$(_context) { while (1) { switch (_context.prev = _context.next) { @@ -1261,38 +1366,47 @@ function () { case 2: route = _this.normalizeRoute(route); scriptRoute = route === '/' ? '/index.js' : route + ".js"; - script = document.createElement('script'); - - if (false) {} - url = _this.assetPrefix + "/_next/static/" + encodeURIComponent(_this.buildId) + "/pages" + scriptRoute; - script.crossOrigin = undefined; - script.src = url; - script.onerror = function () { - var error = new Error("Error loading script " + url); - error.code = 'PAGE_LOAD_ERROR'; + _this.loadScript(url, route); - _this.pageRegisterEvents.emit(route, { - error: error - }); - }; - - document.body.appendChild(script); - - case 11: + case 6: case "end": return _context.stop(); } } }, _callee); }))(); + } + }, { + key: "loadScript", + value: function loadScript(url, route) { + var _this5 = this; + + var script = document.createElement('script'); + + if (false) {} + + script.crossOrigin = undefined; + script.src = url; + script.async = false; // Explicit async = false required for in-order execution + + script.onerror = function () { + var error = new Error("Error loading script " + url); + error.code = 'PAGE_LOAD_ERROR'; + + _this5.pageRegisterEvents.emit(route, { + error: error + }); + }; + + document.body.appendChild(script); } // This method if called by the route code. }, { key: "registerPage", value: function registerPage(route, regFn) { - var _this5 = this; + var _this6 = this; var register = function register() { try { @@ -1300,21 +1414,21 @@ function () { error = _regFn.error, page = _regFn.page; - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error, page: page }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error, page: page }); } catch (error) { - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error }); } @@ -1326,13 +1440,13 @@ function () { } }, { key: "prefetch", - value: function prefetch(route) { + value: function prefetch(route, isDependency) { var _this2 = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee2() { - var scriptRoute, link; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee2$(_context2) { while (1) { switch (_context2.prev = _context2.next) { @@ -1367,32 +1481,47 @@ function () { return _context2.abrupt("return"); case 9: + if (!isDependency) { + _this2.getDependencies(route).forEach(function (url) { + _this2.prefetch(url, true); + }); + } // Feature detection is used to see if preload is supported + // If not fall back to loading script tags before the page is loaded + // https://caniuse.com/#feat=link-rel-preload + + if (!hasPreload) { - _context2.next = 19; + _context2.next = 16; break; } - _context2.next = 12; + _context2.next = 13; return _this2.promisedBuildId; - case 12: - link = document.createElement('link'); - link.rel = 'preload'; - link.crossOrigin = undefined; - link.href = _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; - link.as = 'script'; - document.head.appendChild(link); + case 13: + url = isDependency ? route : _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; + + _this2.createPreloadLink(url); + + return _context2.abrupt("return"); + + case 16: + if (!isDependency) { + _context2.next = 18; + break; + } + return _context2.abrupt("return"); - case 19: + case 18: if (!(document.readyState === 'complete')) { - _context2.next = 23; + _context2.next = 22; break; } return _context2.abrupt("return", _this2.loadPage(route)["catch"](function () {})); - case 23: + case 22: return _context2.abrupt("return", new _promise["default"](function (resolve) { window.addEventListener('load', function () { _this2.loadPage(route).then(function () { @@ -1403,7 +1532,7 @@ function () { }); })); - case 24: + case 23: case "end": return _context2.stop(); } @@ -1412,6 +1541,16 @@ function () { }))(); } }, { + key: "createPreloadLink", + value: function createPreloadLink(url) { + var link = document.createElement('link'); + link.rel = 'preload'; + link.crossOrigin = undefined; + link.href = url; + link.as = 'script'; + document.head.appendChild(link); + } + }, { key: "clearCache", value: function clearCache(route) { route = this.normalizeRoute(route); ```
github-actions[bot] commented 5 years ago

Stats from current PR

Click to expand stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 14.1s | 14s | -40ms | | `node_modules` Size | 45.5 MB | 45.5 MB | ⚠️ +8.2 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 208 kB | ⚠️ +1.55 kB | | Total Bundle (main, webpack, commons) gzip Size | 67.9 kB | 68.5 kB | ⚠️ +609 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 20 kB | 21.5 kB | ⚠️ +1.55 kB | | Client `main` gzip Size | 6.86 kB | 7.46 kB | ⚠️ +609 B | | Client `commons` Size | 184 kB | 184 kB | ✓ | | Client `commons` gzip Size | 59.7 kB | 59.7 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Base Rendered Size | 1.35 kB | 1.35 kB | ✓ | | Build Dir Size | 705 kB | 710 kB | ⚠️ +5.11 kB |
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 15.1s | 15.3s | ⚠️ +263ms | | `node_modules` Size | 45.5 MB | 45.5 MB | ⚠️ +8.2 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 208 kB | ⚠️ +1.55 kB | | Total Bundle (main, webpack, commons) gzip Size | 67.9 kB | 68.5 kB | ⚠️ +609 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 20 kB | 21.5 kB | ⚠️ +1.55 kB | | Client `main` gzip Size | 6.86 kB | 7.46 kB | ⚠️ +609 B | | Client `commons` Size | 184 kB | 184 kB | ✓ | | Client `commons` gzip Size | 59.7 kB | 59.7 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Serverless `pages/link` Size | 252 kB | 252 kB | ✓ | | Serverless `pages/link` gzip Size | 68 kB | 68 kB | ✓ | | Serverless `pages/index` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/index` gzip Size | 65.8 kB | 65.8 kB | ✓ | | Serverless `pages/_error` Size | 244 kB | 244 kB | ✓ | | Serverless `pages/_error` gzip Size | 65.5 kB | 65.5 kB | ⚠️ +1 B | | Serverless `pages/routerDirect` Size | 246 kB | 246 kB | ✓ | | Serverless `pages/routerDirect` gzip Size | 65.7 kB | 65.7 kB | -1 B | | Serverless `pages/withRouter` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/withRouter` gzip Size | 65.9 kB | 65.9 kB | ⚠️ +1 B | | Build Dir Size | 1.89 MB | 1.9 MB | ⚠️ +5.11 kB |
Diff for main.js ```diff @@ -98,6 +98,16 @@ __webpack_require__("cHUd")('Map'); /***/ }), +/***/ "0tVQ": +/***/ (function(module, exports, __webpack_require__) { + +__webpack_require__("FlQf"); +__webpack_require__("VJsP"); +module.exports = __webpack_require__("WEpk").Array.from; + + +/***/ }), + /***/ "B9jh": /***/ (function(module, exports, __webpack_require__) { @@ -874,6 +884,22 @@ function _doRender() { /***/ }), +/***/ "IP1Z": +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + +var $defineProperty = __webpack_require__("2faE"); +var createDesc = __webpack_require__("rr1i"); + +module.exports = function (object, index, value) { + if (index in object) $defineProperty.f(object, index, createDesc(0, value)); + else object[index] = value; +}; + + +/***/ }), + /***/ "LX0d": /***/ (function(module, exports, __webpack_require__) { @@ -926,6 +952,51 @@ __webpack_require__("aPfg")('Set'); /***/ }), +/***/ "VJsP": +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + +var ctx = __webpack_require__("2GTP"); +var $export = __webpack_require__("Y7ZC"); +var toObject = __webpack_require__("JB68"); +var call = __webpack_require__("sNwI"); +var isArrayIter = __webpack_require__("NwJ3"); +var toLength = __webpack_require__("tEej"); +var createProperty = __webpack_require__("IP1Z"); +var getIterFn = __webpack_require__("fNZA"); + +$export($export.S + $export.F * !__webpack_require__("TuGD")(function (iter) { Array.from(iter); }), 'Array', { + // 22.1.2.1 Array.from(arrayLike, mapfn = undefined, thisArg = undefined) + from: function from(arrayLike /* , mapfn = undefined, thisArg = undefined */) { + var O = toObject(arrayLike); + var C = typeof this == 'function' ? this : Array; + var aLen = arguments.length; + var mapfn = aLen > 1 ? arguments[1] : undefined; + var mapping = mapfn !== undefined; + var index = 0; + var iterFn = getIterFn(O); + var length, result, step, iterator; + if (mapping) mapfn = ctx(mapfn, aLen > 2 ? arguments[2] : undefined, 2); + // if object isn't iterable or it's array with default iterator - use simple case + if (iterFn != undefined && !(C == Array && isArrayIter(iterFn))) { + for (iterator = iterFn.call(O), result = new C(); !(step = iterator.next()).done; index++) { + createProperty(result, index, mapping ? call(iterator, mapfn, [step.value, index], true) : step.value); + } + } else { + length = toLength(O.length); + for (result = new C(length); length > index; index++) { + createProperty(result, index, mapping ? mapfn(O[index], index) : O[index]); + } + } + result.length = index; + return result; + } +}); + + +/***/ }), + /***/ "XLbu": /***/ (function(module, exports, __webpack_require__) { @@ -993,6 +1064,13 @@ exports.DataManager = DataManager; /***/ }), +/***/ "d04V": +/***/ (function(module, exports, __webpack_require__) { + +module.exports = __webpack_require__("0tVQ"); + +/***/ }), + /***/ "dL40": /***/ (function(module, exports, __webpack_require__) { @@ -1118,6 +1196,8 @@ exports["default"] = void 0; var _asyncToGenerator2 = _interopRequireDefault(__webpack_require__("+oT+")); +var _from = _interopRequireDefault(__webpack_require__("d04V")); + var _promise = _interopRequireDefault(__webpack_require__("eVuF")); var _set = _interopRequireDefault(__webpack_require__("ttDY")); @@ -1125,7 +1205,7 @@ var _set = _interopRequireDefault(__webpack_require__("ttDY")); var _mitt = _interopRequireDefault(__webpack_require__("kiME")); var _unfetch = _interopRequireDefault(__webpack_require__("m/Gl")); -/* global document */ +/* global document, window */ // smaller version of https://gist.github.com/igrigorik/a02f2359f3bc50ca7a9c @@ -1207,15 +1287,40 @@ function () { if (document.getElementById("__NEXT_PAGE__" + route)) { return; - } // Load the script if not asked to load yet. - + } if (!_this3.loadingRoutes[route]) { - _this3.loadScript(route); + // Make sure we don't load a dependency that's already loaded + var loadedModules = new _set["default"]((0, _from["default"])(document.getElementsByTagName('script'), function (el) { + var results = /\/_next\/[^?]*/g.exec(el.src); + return results ? results[0] : el.src; + })); + var deps = _this3.getDependencies(route); + + var urlsToLoad = deps.filter(function (url) { + return !loadedModules.has(url); + }); _this3.loadingRoutes[route] = true; + urlsToLoad.forEach(function (url) { + return _this3.loadScript(url, route); + }); + + _this3.loadRouteBundle(route); } }); + } // Retrieve a list of dependencies for a given route from the build manifest + + }, { + key: "getDependencies", + value: function getDependencies(route) { + if (!window.__BUILD_MANIFEST || !window.__BUILD_MANIFEST.pages[route]) { + return []; + } + + return window.__BUILD_MANIFEST.pages[route].map(function (url) { + return '/_next/' + url; + }); } }, { key: "onDynamicBuildId", @@ -1243,14 +1348,14 @@ function () { }); } }, { - key: "loadScript", - value: function loadScript(route) { + key: "loadRouteBundle", + value: function loadRouteBundle(route) { var _this = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee() { - var scriptRoute, script, url; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee$(_context) { while (1) { switch (_context.prev = _context.next) { @@ -1261,38 +1366,47 @@ function () { case 2: route = _this.normalizeRoute(route); scriptRoute = route === '/' ? '/index.js' : route + ".js"; - script = document.createElement('script'); - - if (false) {} - url = _this.assetPrefix + "/_next/static/" + encodeURIComponent(_this.buildId) + "/pages" + scriptRoute; - script.crossOrigin = undefined; - script.src = url; - script.onerror = function () { - var error = new Error("Error loading script " + url); - error.code = 'PAGE_LOAD_ERROR'; + _this.loadScript(url, route); - _this.pageRegisterEvents.emit(route, { - error: error - }); - }; - - document.body.appendChild(script); - - case 11: + case 6: case "end": return _context.stop(); } } }, _callee); }))(); + } + }, { + key: "loadScript", + value: function loadScript(url, route) { + var _this5 = this; + + var script = document.createElement('script'); + + if (false) {} + + script.crossOrigin = undefined; + script.src = url; + script.async = false; // Explicit async = false required for in-order execution + + script.onerror = function () { + var error = new Error("Error loading script " + url); + error.code = 'PAGE_LOAD_ERROR'; + + _this5.pageRegisterEvents.emit(route, { + error: error + }); + }; + + document.body.appendChild(script); } // This method if called by the route code. }, { key: "registerPage", value: function registerPage(route, regFn) { - var _this5 = this; + var _this6 = this; var register = function register() { try { @@ -1300,21 +1414,21 @@ function () { error = _regFn.error, page = _regFn.page; - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error, page: page }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error, page: page }); } catch (error) { - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error }); } @@ -1326,13 +1440,13 @@ function () { } }, { key: "prefetch", - value: function prefetch(route) { + value: function prefetch(route, isDependency) { var _this2 = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee2() { - var scriptRoute, link; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee2$(_context2) { while (1) { switch (_context2.prev = _context2.next) { @@ -1367,32 +1481,47 @@ function () { return _context2.abrupt("return"); case 9: + if (!isDependency) { + _this2.getDependencies(route).forEach(function (url) { + _this2.prefetch(url, true); + }); + } // Feature detection is used to see if preload is supported + // If not fall back to loading script tags before the page is loaded + // https://caniuse.com/#feat=link-rel-preload + + if (!hasPreload) { - _context2.next = 19; + _context2.next = 16; break; } - _context2.next = 12; + _context2.next = 13; return _this2.promisedBuildId; - case 12: - link = document.createElement('link'); - link.rel = 'preload'; - link.crossOrigin = undefined; - link.href = _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; - link.as = 'script'; - document.head.appendChild(link); + case 13: + url = isDependency ? route : _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; + + _this2.createPreloadLink(url); + + return _context2.abrupt("return"); + + case 16: + if (!isDependency) { + _context2.next = 18; + break; + } + return _context2.abrupt("return"); - case 19: + case 18: if (!(document.readyState === 'complete')) { - _context2.next = 23; + _context2.next = 22; break; } return _context2.abrupt("return", _this2.loadPage(route)["catch"](function () {})); - case 23: + case 22: return _context2.abrupt("return", new _promise["default"](function (resolve) { window.addEventListener('load', function () { _this2.loadPage(route).then(function () { @@ -1403,7 +1532,7 @@ function () { }); })); - case 24: + case 23: case "end": return _context2.stop(); } @@ -1412,6 +1541,16 @@ function () { }))(); } }, { + key: "createPreloadLink", + value: function createPreloadLink(url) { + var link = document.createElement('link'); + link.rel = 'preload'; + link.crossOrigin = undefined; + link.href = url; + link.as = 'script'; + document.head.appendChild(link); + } + }, { key: "clearCache", value: function clearCache(route) { route = this.normalizeRoute(route); ```
github-actions[bot] commented 5 years ago

Stats from current PR

Click to expand stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 12.6s | 12.2s | -373ms | | `node_modules` Size | 45.5 MB | 45.5 MB | ⚠️ +8.22 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 208 kB | ⚠️ +1.55 kB | | Total Bundle (main, webpack, commons) gzip Size | 67.9 kB | 68.4 kB | ⚠️ +558 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 20 kB | 17 kB | -3.01 kB | | Client `main` gzip Size | 6.86 kB | 5.97 kB | -885 B | | Client `commons` Size | 184 kB | 188 kB | ⚠️ +4.56 kB | | Client `commons` gzip Size | 59.7 kB | 61.1 kB | ⚠️ +1.44 kB | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Base Rendered Size | 1.35 kB | 1.35 kB | ✓ | | Build Dir Size | 705 kB | 710 kB | ⚠️ +5.11 kB |
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 13.4s | 13.6s | ⚠️ +191ms | | `node_modules` Size | 45.5 MB | 45.5 MB | ⚠️ +8.22 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 208 kB | ⚠️ +1.55 kB | | Total Bundle (main, webpack, commons) gzip Size | 67.9 kB | 68.4 kB | ⚠️ +558 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 20 kB | 17 kB | -3.01 kB | | Client `main` gzip Size | 6.86 kB | 5.97 kB | -885 B | | Client `commons` Size | 184 kB | 188 kB | ⚠️ +4.56 kB | | Client `commons` gzip Size | 59.7 kB | 61.1 kB | ⚠️ +1.44 kB | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Serverless `pages/link` Size | 252 kB | 252 kB | ✓ | | Serverless `pages/link` gzip Size | 68 kB | 68 kB | ⚠️ +1 B | | Serverless `pages/index` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/index` gzip Size | 65.8 kB | 65.8 kB | ⚠️ +1 B | | Serverless `pages/_error` Size | 244 kB | 244 kB | ✓ | | Serverless `pages/_error` gzip Size | 65.5 kB | 65.5 kB | ⚠️ +1 B | | Serverless `pages/routerDirect` Size | 246 kB | 246 kB | ✓ | | Serverless `pages/routerDirect` gzip Size | 65.7 kB | 65.7 kB | ⚠️ +1 B | | Serverless `pages/withRouter` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/withRouter` gzip Size | 65.9 kB | 65.9 kB | ⚠️ +1 B | | Build Dir Size | 1.89 MB | 1.9 MB | ⚠️ +5.11 kB |
Diff for commons.js ```diff @@ -21,6 +21,35 @@ module.exports = __webpack_require__("WEpk").Object.getPrototypeOf; /***/ }), +/***/ "+wdc": +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; +/** @license React v0.13.6 + * scheduler.production.min.js + * + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +Object.defineProperty(exports,"__esModule",{value:!0});var d=null,e=!1,g=3,k=-1,l=-1,m=!1,n=!1;function p(){if(!m){var a=d.expirationTime;n?q():n=!0;r(t,a)}} +function u(){var a=d,b=d.next;if(d===b)d=null;else{var c=d.previous;d=c.next=b;b.previous=c}a.next=a.previous=null;c=a.callback;b=a.expirationTime;a=a.priorityLevel;var f=g,Q=l;g=a;l=b;try{var h=c()}finally{g=f,l=Q}if("function"===typeof h)if(h={callback:h,priorityLevel:a,expirationTime:b,next:null,previous:null},null===d)d=h.next=h.previous=h;else{c=null;a=d;do{if(a.expirationTime>=b){c=a;break}a=a.next}while(a!==d);null===c?c=d:c===d&&(d=h,p());b=c.previous;b.next=c.previous=h;h.next=c;h.previous= +b}}function v(){if(-1===k&&null!==d&&1===d.priorityLevel){m=!0;try{do u();while(null!==d&&1===d.priorityLevel)}finally{m=!1,null!==d?p():n=!1}}}function t(a){m=!0;var b=e;e=a;try{if(a)for(;null!==d;){var c=exports.unstable_now();if(d.expirationTime<=c){do u();while(null!==d&&d.expirationTime<=c)}else break}else if(null!==d){do u();while(null!==d&&!w())}}finally{m=!1,e=b,null!==d?p():n=!1,v()}} +var x=Date,y="function"===typeof setTimeout?setTimeout:void 0,z="function"===typeof clearTimeout?clearTimeout:void 0,A="function"===typeof requestAnimationFrame?requestAnimationFrame:void 0,B="function"===typeof cancelAnimationFrame?cancelAnimationFrame:void 0,C,D;function E(a){C=A(function(b){z(D);a(b)});D=y(function(){B(C);a(exports.unstable_now())},100)} +if("object"===typeof performance&&"function"===typeof performance.now){var F=performance;exports.unstable_now=function(){return F.now()}}else exports.unstable_now=function(){return x.now()};var r,q,w,G=null; true?G=window:undefined; +if(G&&G._schedMock){var H=G._schedMock;r=H[0];q=H[1];w=H[2];exports.unstable_now=H[3]}else if( false||"function"!==typeof MessageChannel){var I=null,J=function(a){if(null!==I)try{I(a)}finally{I=null}};r=function(a){null!==I?setTimeout(r,0,a):(I=a,setTimeout(J,0,!1))};q=function(){I=null};w=function(){return!1}}else{"undefined"!==typeof console&&("function"!==typeof A&&console.error("This browser doesn't support requestAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills"), +"function"!==typeof B&&console.error("This browser doesn't support cancelAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills"));var K=null,L=!1,M=-1,N=!1,O=!1,P=0,R=33,S=33;w=function(){return P<=exports.unstable_now()};var T=new MessageChannel,U=T.port2;T.port1.onmessage=function(){L=!1;var a=K,b=M;K=null;M=-1;var c=exports.unstable_now(),f=!1;if(0>=P-c)if(-1!==b&&b<=c)f=!0;else{N||(N=!0,E(V));K=a;M=b;return}if(null!==a){O=!0;try{a(f)}finally{O=!1}}}; +var V=function(a){if(null!==K){E(V);var b=a-P+S;bb&&(b=8),S=bb?U.postMessage(void 0):N||(N=!0,E(V))};q=function(){K=null;L=!1;M=-1}}exports.unstable_ImmediatePriority=1;exports.unstable_UserBlockingPriority=2;exports.unstable_NormalPriority=3;exports.unstable_IdlePriority=5;exports.unstable_LowPriority=4; +exports.unstable_runWithPriority=function(a,b){switch(a){case 1:case 2:case 3:case 4:case 5:break;default:a=3}var c=g,f=k;g=a;k=exports.unstable_now();try{return b()}finally{g=c,k=f,v()}};exports.unstable_next=function(a){switch(g){case 1:case 2:case 3:var b=3;break;default:b=g}var c=g,f=k;g=b;k=exports.unstable_now();try{return a()}finally{g=c,k=f,v()}}; +exports.unstable_scheduleCallback=function(a,b){var c=-1!==k?k:exports.unstable_now();if("object"===typeof b&&null!==b&&"number"===typeof b.timeout)b=c+b.timeout;else switch(g){case 1:b=c+-1;break;case 2:b=c+250;break;case 5:b=c+1073741823;break;case 4:b=c+1E4;break;default:b=c+5E3}a={callback:a,priorityLevel:g,expirationTime:b,next:null,previous:null};if(null===d)d=a.next=a.previous=a,p();else{c=null;var f=d;do{if(f.expirationTime>b){c=f;break}f=f.next}while(f!==d);null===c?c=d:c===d&&(d=a,p()); +b=c.previous;b.next=c.previous=a;a.next=c;a.previous=b}return a};exports.unstable_cancelCallback=function(a){var b=a.next;if(null!==b){if(b===a)d=null;else{a===d&&(d=b);var c=a.previous;c.next=b;b.previous=c}a.next=a.previous=null}};exports.unstable_wrapCallback=function(a){var b=g;return function(){var c=g,f=k;g=b;k=exports.unstable_now();try{return a.apply(this,arguments)}finally{g=c,k=f,v()}}};exports.unstable_getCurrentPriorityLevel=function(){return g}; +exports.unstable_shouldYield=function(){return!e&&(null!==d&&d.expirationTime
Diff for main.js ```diff @@ -1,4 +1,4 @@ -(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[2],{ +(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[8],{ /***/ "+iuc": /***/ (function(module, exports, __webpack_require__) { @@ -60,40 +60,21 @@ module.exports = _asyncToGenerator; /***/ }), -/***/ "+wdc": +/***/ "/h46": /***/ (function(module, exports, __webpack_require__) { -"use strict"; -/** @license React v0.13.6 - * scheduler.production.min.js - * - * Copyright (c) Facebook, Inc. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ - -Object.defineProperty(exports,"__esModule",{value:!0});var d=null,e=!1,g=3,k=-1,l=-1,m=!1,n=!1;function p(){if(!m){var a=d.expirationTime;n?q():n=!0;r(t,a)}} -function u(){var a=d,b=d.next;if(d===b)d=null;else{var c=d.previous;d=c.next=b;b.previous=c}a.next=a.previous=null;c=a.callback;b=a.expirationTime;a=a.priorityLevel;var f=g,Q=l;g=a;l=b;try{var h=c()}finally{g=f,l=Q}if("function"===typeof h)if(h={callback:h,priorityLevel:a,expirationTime:b,next:null,previous:null},null===d)d=h.next=h.previous=h;else{c=null;a=d;do{if(a.expirationTime>=b){c=a;break}a=a.next}while(a!==d);null===c?c=d:c===d&&(d=h,p());b=c.previous;b.next=c.previous=h;h.next=c;h.previous= -b}}function v(){if(-1===k&&null!==d&&1===d.priorityLevel){m=!0;try{do u();while(null!==d&&1===d.priorityLevel)}finally{m=!1,null!==d?p():n=!1}}}function t(a){m=!0;var b=e;e=a;try{if(a)for(;null!==d;){var c=exports.unstable_now();if(d.expirationTime<=c){do u();while(null!==d&&d.expirationTime<=c)}else break}else if(null!==d){do u();while(null!==d&&!w())}}finally{m=!1,e=b,null!==d?p():n=!1,v()}} -var x=Date,y="function"===typeof setTimeout?setTimeout:void 0,z="function"===typeof clearTimeout?clearTimeout:void 0,A="function"===typeof requestAnimationFrame?requestAnimationFrame:void 0,B="function"===typeof cancelAnimationFrame?cancelAnimationFrame:void 0,C,D;function E(a){C=A(function(b){z(D);a(b)});D=y(function(){B(C);a(exports.unstable_now())},100)} -if("object"===typeof performance&&"function"===typeof performance.now){var F=performance;exports.unstable_now=function(){return F.now()}}else exports.unstable_now=function(){return x.now()};var r,q,w,G=null; true?G=window:undefined; -if(G&&G._schedMock){var H=G._schedMock;r=H[0];q=H[1];w=H[2];exports.unstable_now=H[3]}else if( false||"function"!==typeof MessageChannel){var I=null,J=function(a){if(null!==I)try{I(a)}finally{I=null}};r=function(a){null!==I?setTimeout(r,0,a):(I=a,setTimeout(J,0,!1))};q=function(){I=null};w=function(){return!1}}else{"undefined"!==typeof console&&("function"!==typeof A&&console.error("This browser doesn't support requestAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills"), -"function"!==typeof B&&console.error("This browser doesn't support cancelAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills"));var K=null,L=!1,M=-1,N=!1,O=!1,P=0,R=33,S=33;w=function(){return P<=exports.unstable_now()};var T=new MessageChannel,U=T.port2;T.port1.onmessage=function(){L=!1;var a=K,b=M;K=null;M=-1;var c=exports.unstable_now(),f=!1;if(0>=P-c)if(-1!==b&&b<=c)f=!0;else{N||(N=!0,E(V));K=a;M=b;return}if(null!==a){O=!0;try{a(f)}finally{O=!1}}}; -var V=function(a){if(null!==K){E(V);var b=a-P+S;bb&&(b=8),S=bb?U.postMessage(void 0):N||(N=!0,E(V))};q=function(){K=null;L=!1;M=-1}}exports.unstable_ImmediatePriority=1;exports.unstable_UserBlockingPriority=2;exports.unstable_NormalPriority=3;exports.unstable_IdlePriority=5;exports.unstable_LowPriority=4; -exports.unstable_runWithPriority=function(a,b){switch(a){case 1:case 2:case 3:case 4:case 5:break;default:a=3}var c=g,f=k;g=a;k=exports.unstable_now();try{return b()}finally{g=c,k=f,v()}};exports.unstable_next=function(a){switch(g){case 1:case 2:case 3:var b=3;break;default:b=g}var c=g,f=k;g=b;k=exports.unstable_now();try{return a()}finally{g=c,k=f,v()}}; -exports.unstable_scheduleCallback=function(a,b){var c=-1!==k?k:exports.unstable_now();if("object"===typeof b&&null!==b&&"number"===typeof b.timeout)b=c+b.timeout;else switch(g){case 1:b=c+-1;break;case 2:b=c+250;break;case 5:b=c+1073741823;break;case 4:b=c+1E4;break;default:b=c+5E3}a={callback:a,priorityLevel:g,expirationTime:b,next:null,previous:null};if(null===d)d=a.next=a.previous=a,p();else{c=null;var f=d;do{if(f.expirationTime>b){c=f;break}f=f.next}while(f!==d);null===c?c=d:c===d&&(d=a,p()); -b=c.previous;b.next=c.previous=a;a.next=c;a.previous=b}return a};exports.unstable_cancelCallback=function(a){var b=a.next;if(null!==b){if(b===a)d=null;else{a===d&&(d=b);var c=a.previous;c.next=b;b.previous=c}a.next=a.previous=null}};exports.unstable_wrapCallback=function(a){var b=g;return function(){var c=g,f=k;g=b;k=exports.unstable_now();try{return a.apply(this,arguments)}finally{g=c,k=f,v()}}};exports.unstable_getCurrentPriorityLevel=function(){return g}; -exports.unstable_shouldYield=function(){return!e&&(null!==d&&d.expirationTime 1 ? arguments[1] : undefined; + var mapping = mapfn !== undefined; + var index = 0; + var iterFn = getIterFn(O); + var length, result, step, iterator; + if (mapping) mapfn = ctx(mapfn, aLen > 2 ? arguments[2] : undefined, 2); + // if object isn't iterable or it's array with default iterator - use simple case + if (iterFn != undefined && !(C == Array && isArrayIter(iterFn))) { + for (iterator = iterFn.call(O), result = new C(); !(step = iterator.next()).done; index++) { + createProperty(result, index, mapping ? call(iterator, mapfn, [step.value, index], true) : step.value); + } + } else { + length = toLength(O.length); + for (result = new C(length); length > index; index++) { + createProperty(result, index, mapping ? mapfn(O[index], index) : O[index]); + } + } + result.length = index; + return result; + } +}); + + +/***/ }), + /***/ "XLbu": /***/ (function(module, exports, __webpack_require__) { @@ -993,6 +1022,13 @@ exports.DataManager = DataManager; /***/ }), +/***/ "d04V": +/***/ (function(module, exports, __webpack_require__) { + +module.exports = __webpack_require__("0tVQ"); + +/***/ }), + /***/ "dL40": /***/ (function(module, exports, __webpack_require__) { @@ -1118,6 +1154,8 @@ exports["default"] = void 0; var _asyncToGenerator2 = _interopRequireDefault(__webpack_require__("+oT+")); +var _from = _interopRequireDefault(__webpack_require__("d04V")); + var _promise = _interopRequireDefault(__webpack_require__("eVuF")); var _set = _interopRequireDefault(__webpack_require__("ttDY")); @@ -1125,7 +1163,7 @@ var _set = _interopRequireDefault(__webpack_require__("ttDY")); var _mitt = _interopRequireDefault(__webpack_require__("kiME")); var _unfetch = _interopRequireDefault(__webpack_require__("m/Gl")); -/* global document */ +/* global document, window */ // smaller version of https://gist.github.com/igrigorik/a02f2359f3bc50ca7a9c @@ -1207,15 +1245,40 @@ function () { if (document.getElementById("__NEXT_PAGE__" + route)) { return; - } // Load the script if not asked to load yet. - + } if (!_this3.loadingRoutes[route]) { - _this3.loadScript(route); + // Make sure we don't load a dependency that's already loaded + var loadedModules = new _set["default"]((0, _from["default"])(document.getElementsByTagName('script'), function (el) { + var results = /\/_next\/[^?]*/g.exec(el.src); + return results ? results[0] : el.src; + })); + + var deps = _this3.getDependencies(route); + var urlsToLoad = deps.filter(function (url) { + return !loadedModules.has(url); + }); _this3.loadingRoutes[route] = true; + urlsToLoad.forEach(function (url) { + return _this3.loadScript(url, route); + }); + + _this3.loadRouteBundle(route); } }); + } // Retrieve a list of dependencies for a given route from the build manifest + + }, { + key: "getDependencies", + value: function getDependencies(route) { + if (!window.__BUILD_MANIFEST || !window.__BUILD_MANIFEST.pages[route]) { + return []; + } + + return window.__BUILD_MANIFEST.pages[route].map(function (url) { + return '/_next/' + url; + }); } }, { key: "onDynamicBuildId", @@ -1243,14 +1306,14 @@ function () { }); } }, { - key: "loadScript", - value: function loadScript(route) { + key: "loadRouteBundle", + value: function loadRouteBundle(route) { var _this = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee() { - var scriptRoute, script, url; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee$(_context) { while (1) { switch (_context.prev = _context.next) { @@ -1261,38 +1324,47 @@ function () { case 2: route = _this.normalizeRoute(route); scriptRoute = route === '/' ? '/index.js' : route + ".js"; - script = document.createElement('script'); - - if (false) {} - url = _this.assetPrefix + "/_next/static/" + encodeURIComponent(_this.buildId) + "/pages" + scriptRoute; - script.crossOrigin = undefined; - script.src = url; - - script.onerror = function () { - var error = new Error("Error loading script " + url); - error.code = 'PAGE_LOAD_ERROR'; - - _this.pageRegisterEvents.emit(route, { - error: error - }); - }; - document.body.appendChild(script); + _this.loadScript(url, route); - case 11: + case 6: case "end": return _context.stop(); } } }, _callee); }))(); + } + }, { + key: "loadScript", + value: function loadScript(url, route) { + var _this5 = this; + + var script = document.createElement('script'); + + if (false) {} + + script.crossOrigin = undefined; + script.src = url; + script.async = false; // Explicit async = false required for in-order execution + + script.onerror = function () { + var error = new Error("Error loading script " + url); + error.code = 'PAGE_LOAD_ERROR'; + + _this5.pageRegisterEvents.emit(route, { + error: error + }); + }; + + document.body.appendChild(script); } // This method if called by the route code. }, { key: "registerPage", value: function registerPage(route, regFn) { - var _this5 = this; + var _this6 = this; var register = function register() { try { @@ -1300,21 +1372,21 @@ function () { error = _regFn.error, page = _regFn.page; - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error, page: page }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error, page: page }); } catch (error) { - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error }); } @@ -1326,13 +1398,13 @@ function () { } }, { key: "prefetch", - value: function prefetch(route) { + value: function prefetch(route, isDependency) { var _this2 = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee2() { - var scriptRoute, link; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee2$(_context2) { while (1) { switch (_context2.prev = _context2.next) { @@ -1367,32 +1439,47 @@ function () { return _context2.abrupt("return"); case 9: + if (!isDependency) { + _this2.getDependencies(route).forEach(function (url) { + _this2.prefetch(url, true); + }); + } // Feature detection is used to see if preload is supported + // If not fall back to loading script tags before the page is loaded + // https://caniuse.com/#feat=link-rel-preload + + if (!hasPreload) { - _context2.next = 19; + _context2.next = 16; break; } - _context2.next = 12; + _context2.next = 13; return _this2.promisedBuildId; - case 12: - link = document.createElement('link'); - link.rel = 'preload'; - link.crossOrigin = undefined; - link.href = _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; - link.as = 'script'; - document.head.appendChild(link); + case 13: + url = isDependency ? route : _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; + + _this2.createPreloadLink(url); + return _context2.abrupt("return"); - case 19: + case 16: + if (!isDependency) { + _context2.next = 18; + break; + } + + return _context2.abrupt("return"); + + case 18: if (!(document.readyState === 'complete')) { - _context2.next = 23; + _context2.next = 22; break; } return _context2.abrupt("return", _this2.loadPage(route)["catch"](function () {})); - case 23: + case 22: return _context2.abrupt("return", new _promise["default"](function (resolve) { window.addEventListener('load', function () { _this2.loadPage(route).then(function () { @@ -1403,7 +1490,7 @@ function () { }); })); - case 24: + case 23: case "end": return _context2.stop(); } @@ -1412,6 +1499,16 @@ function () { }))(); } }, { + key: "createPreloadLink", + value: function createPreloadLink(url) { + var link = document.createElement('link'); + link.rel = 'preload'; + link.crossOrigin = undefined; + link.href = url; + link.as = 'script'; + document.head.appendChild(link); + } + }, { key: "clearCache", value: function clearCache(route) { route = this.normalizeRoute(route); ```
github-actions[bot] commented 5 years ago

Stats from current PR

Click to expand stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 12.7s | 12.9s | ⚠️ +191ms | | `node_modules` Size | 45.5 MB | 45.5 MB | ⚠️ +8.22 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 208 kB | ⚠️ +1.55 kB | | Total Bundle (main, webpack, commons) gzip Size | 67.9 kB | 68.4 kB | ⚠️ +558 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 20 kB | 17 kB | -3.01 kB | | Client `main` gzip Size | 6.86 kB | 5.97 kB | -885 B | | Client `commons` Size | 184 kB | 188 kB | ⚠️ +4.56 kB | | Client `commons` gzip Size | 59.7 kB | 61.1 kB | ⚠️ +1.44 kB | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Base Rendered Size | 1.35 kB | 1.35 kB | ✓ | | Build Dir Size | 705 kB | 710 kB | ⚠️ +5.11 kB |
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 13.9s | 14.1s | ⚠️ +258ms | | `node_modules` Size | 45.5 MB | 45.5 MB | ⚠️ +8.22 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 208 kB | ⚠️ +1.55 kB | | Total Bundle (main, webpack, commons) gzip Size | 67.9 kB | 68.4 kB | ⚠️ +558 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 20 kB | 17 kB | -3.01 kB | | Client `main` gzip Size | 6.86 kB | 5.97 kB | -885 B | | Client `commons` Size | 184 kB | 188 kB | ⚠️ +4.56 kB | | Client `commons` gzip Size | 59.7 kB | 61.1 kB | ⚠️ +1.44 kB | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Serverless `pages/link` Size | 252 kB | 252 kB | ✓ | | Serverless `pages/link` gzip Size | 68 kB | 68 kB | ✓ | | Serverless `pages/index` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/index` gzip Size | 65.8 kB | 65.8 kB | -1 B | | Serverless `pages/_error` Size | 244 kB | 244 kB | ✓ | | Serverless `pages/_error` gzip Size | 65.5 kB | 65.5 kB | -1 B | | Serverless `pages/routerDirect` Size | 246 kB | 246 kB | ✓ | | Serverless `pages/routerDirect` gzip Size | 65.7 kB | 65.7 kB | ✓ | | Serverless `pages/withRouter` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/withRouter` gzip Size | 65.9 kB | 65.9 kB | -1 B | | Build Dir Size | 1.89 MB | 1.9 MB | ⚠️ +5.11 kB |
Diff for commons.js ```diff @@ -21,6 +21,35 @@ module.exports = __webpack_require__("WEpk").Object.getPrototypeOf; /***/ }), +/***/ "+wdc": +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; +/** @license React v0.13.6 + * scheduler.production.min.js + * + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +Object.defineProperty(exports,"__esModule",{value:!0});var d=null,e=!1,g=3,k=-1,l=-1,m=!1,n=!1;function p(){if(!m){var a=d.expirationTime;n?q():n=!0;r(t,a)}} +function u(){var a=d,b=d.next;if(d===b)d=null;else{var c=d.previous;d=c.next=b;b.previous=c}a.next=a.previous=null;c=a.callback;b=a.expirationTime;a=a.priorityLevel;var f=g,Q=l;g=a;l=b;try{var h=c()}finally{g=f,l=Q}if("function"===typeof h)if(h={callback:h,priorityLevel:a,expirationTime:b,next:null,previous:null},null===d)d=h.next=h.previous=h;else{c=null;a=d;do{if(a.expirationTime>=b){c=a;break}a=a.next}while(a!==d);null===c?c=d:c===d&&(d=h,p());b=c.previous;b.next=c.previous=h;h.next=c;h.previous= +b}}function v(){if(-1===k&&null!==d&&1===d.priorityLevel){m=!0;try{do u();while(null!==d&&1===d.priorityLevel)}finally{m=!1,null!==d?p():n=!1}}}function t(a){m=!0;var b=e;e=a;try{if(a)for(;null!==d;){var c=exports.unstable_now();if(d.expirationTime<=c){do u();while(null!==d&&d.expirationTime<=c)}else break}else if(null!==d){do u();while(null!==d&&!w())}}finally{m=!1,e=b,null!==d?p():n=!1,v()}} +var x=Date,y="function"===typeof setTimeout?setTimeout:void 0,z="function"===typeof clearTimeout?clearTimeout:void 0,A="function"===typeof requestAnimationFrame?requestAnimationFrame:void 0,B="function"===typeof cancelAnimationFrame?cancelAnimationFrame:void 0,C,D;function E(a){C=A(function(b){z(D);a(b)});D=y(function(){B(C);a(exports.unstable_now())},100)} +if("object"===typeof performance&&"function"===typeof performance.now){var F=performance;exports.unstable_now=function(){return F.now()}}else exports.unstable_now=function(){return x.now()};var r,q,w,G=null; true?G=window:undefined; +if(G&&G._schedMock){var H=G._schedMock;r=H[0];q=H[1];w=H[2];exports.unstable_now=H[3]}else if( false||"function"!==typeof MessageChannel){var I=null,J=function(a){if(null!==I)try{I(a)}finally{I=null}};r=function(a){null!==I?setTimeout(r,0,a):(I=a,setTimeout(J,0,!1))};q=function(){I=null};w=function(){return!1}}else{"undefined"!==typeof console&&("function"!==typeof A&&console.error("This browser doesn't support requestAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills"), +"function"!==typeof B&&console.error("This browser doesn't support cancelAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills"));var K=null,L=!1,M=-1,N=!1,O=!1,P=0,R=33,S=33;w=function(){return P<=exports.unstable_now()};var T=new MessageChannel,U=T.port2;T.port1.onmessage=function(){L=!1;var a=K,b=M;K=null;M=-1;var c=exports.unstable_now(),f=!1;if(0>=P-c)if(-1!==b&&b<=c)f=!0;else{N||(N=!0,E(V));K=a;M=b;return}if(null!==a){O=!0;try{a(f)}finally{O=!1}}}; +var V=function(a){if(null!==K){E(V);var b=a-P+S;bb&&(b=8),S=bb?U.postMessage(void 0):N||(N=!0,E(V))};q=function(){K=null;L=!1;M=-1}}exports.unstable_ImmediatePriority=1;exports.unstable_UserBlockingPriority=2;exports.unstable_NormalPriority=3;exports.unstable_IdlePriority=5;exports.unstable_LowPriority=4; +exports.unstable_runWithPriority=function(a,b){switch(a){case 1:case 2:case 3:case 4:case 5:break;default:a=3}var c=g,f=k;g=a;k=exports.unstable_now();try{return b()}finally{g=c,k=f,v()}};exports.unstable_next=function(a){switch(g){case 1:case 2:case 3:var b=3;break;default:b=g}var c=g,f=k;g=b;k=exports.unstable_now();try{return a()}finally{g=c,k=f,v()}}; +exports.unstable_scheduleCallback=function(a,b){var c=-1!==k?k:exports.unstable_now();if("object"===typeof b&&null!==b&&"number"===typeof b.timeout)b=c+b.timeout;else switch(g){case 1:b=c+-1;break;case 2:b=c+250;break;case 5:b=c+1073741823;break;case 4:b=c+1E4;break;default:b=c+5E3}a={callback:a,priorityLevel:g,expirationTime:b,next:null,previous:null};if(null===d)d=a.next=a.previous=a,p();else{c=null;var f=d;do{if(f.expirationTime>b){c=f;break}f=f.next}while(f!==d);null===c?c=d:c===d&&(d=a,p()); +b=c.previous;b.next=c.previous=a;a.next=c;a.previous=b}return a};exports.unstable_cancelCallback=function(a){var b=a.next;if(null!==b){if(b===a)d=null;else{a===d&&(d=b);var c=a.previous;c.next=b;b.previous=c}a.next=a.previous=null}};exports.unstable_wrapCallback=function(a){var b=g;return function(){var c=g,f=k;g=b;k=exports.unstable_now();try{return a.apply(this,arguments)}finally{g=c,k=f,v()}}};exports.unstable_getCurrentPriorityLevel=function(){return g}; +exports.unstable_shouldYield=function(){return!e&&(null!==d&&d.expirationTime
Diff for main.js ```diff @@ -60,40 +60,21 @@ module.exports = _asyncToGenerator; /***/ }), -/***/ "+wdc": +/***/ "/h46": /***/ (function(module, exports, __webpack_require__) { -"use strict"; -/** @license React v0.13.6 - * scheduler.production.min.js - * - * Copyright (c) Facebook, Inc. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ - -Object.defineProperty(exports,"__esModule",{value:!0});var d=null,e=!1,g=3,k=-1,l=-1,m=!1,n=!1;function p(){if(!m){var a=d.expirationTime;n?q():n=!0;r(t,a)}} -function u(){var a=d,b=d.next;if(d===b)d=null;else{var c=d.previous;d=c.next=b;b.previous=c}a.next=a.previous=null;c=a.callback;b=a.expirationTime;a=a.priorityLevel;var f=g,Q=l;g=a;l=b;try{var h=c()}finally{g=f,l=Q}if("function"===typeof h)if(h={callback:h,priorityLevel:a,expirationTime:b,next:null,previous:null},null===d)d=h.next=h.previous=h;else{c=null;a=d;do{if(a.expirationTime>=b){c=a;break}a=a.next}while(a!==d);null===c?c=d:c===d&&(d=h,p());b=c.previous;b.next=c.previous=h;h.next=c;h.previous= -b}}function v(){if(-1===k&&null!==d&&1===d.priorityLevel){m=!0;try{do u();while(null!==d&&1===d.priorityLevel)}finally{m=!1,null!==d?p():n=!1}}}function t(a){m=!0;var b=e;e=a;try{if(a)for(;null!==d;){var c=exports.unstable_now();if(d.expirationTime<=c){do u();while(null!==d&&d.expirationTime<=c)}else break}else if(null!==d){do u();while(null!==d&&!w())}}finally{m=!1,e=b,null!==d?p():n=!1,v()}} -var x=Date,y="function"===typeof setTimeout?setTimeout:void 0,z="function"===typeof clearTimeout?clearTimeout:void 0,A="function"===typeof requestAnimationFrame?requestAnimationFrame:void 0,B="function"===typeof cancelAnimationFrame?cancelAnimationFrame:void 0,C,D;function E(a){C=A(function(b){z(D);a(b)});D=y(function(){B(C);a(exports.unstable_now())},100)} -if("object"===typeof performance&&"function"===typeof performance.now){var F=performance;exports.unstable_now=function(){return F.now()}}else exports.unstable_now=function(){return x.now()};var r,q,w,G=null; true?G=window:undefined; -if(G&&G._schedMock){var H=G._schedMock;r=H[0];q=H[1];w=H[2];exports.unstable_now=H[3]}else if( false||"function"!==typeof MessageChannel){var I=null,J=function(a){if(null!==I)try{I(a)}finally{I=null}};r=function(a){null!==I?setTimeout(r,0,a):(I=a,setTimeout(J,0,!1))};q=function(){I=null};w=function(){return!1}}else{"undefined"!==typeof console&&("function"!==typeof A&&console.error("This browser doesn't support requestAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills"), -"function"!==typeof B&&console.error("This browser doesn't support cancelAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills"));var K=null,L=!1,M=-1,N=!1,O=!1,P=0,R=33,S=33;w=function(){return P<=exports.unstable_now()};var T=new MessageChannel,U=T.port2;T.port1.onmessage=function(){L=!1;var a=K,b=M;K=null;M=-1;var c=exports.unstable_now(),f=!1;if(0>=P-c)if(-1!==b&&b<=c)f=!0;else{N||(N=!0,E(V));K=a;M=b;return}if(null!==a){O=!0;try{a(f)}finally{O=!1}}}; -var V=function(a){if(null!==K){E(V);var b=a-P+S;bb&&(b=8),S=bb?U.postMessage(void 0):N||(N=!0,E(V))};q=function(){K=null;L=!1;M=-1}}exports.unstable_ImmediatePriority=1;exports.unstable_UserBlockingPriority=2;exports.unstable_NormalPriority=3;exports.unstable_IdlePriority=5;exports.unstable_LowPriority=4; -exports.unstable_runWithPriority=function(a,b){switch(a){case 1:case 2:case 3:case 4:case 5:break;default:a=3}var c=g,f=k;g=a;k=exports.unstable_now();try{return b()}finally{g=c,k=f,v()}};exports.unstable_next=function(a){switch(g){case 1:case 2:case 3:var b=3;break;default:b=g}var c=g,f=k;g=b;k=exports.unstable_now();try{return a()}finally{g=c,k=f,v()}}; -exports.unstable_scheduleCallback=function(a,b){var c=-1!==k?k:exports.unstable_now();if("object"===typeof b&&null!==b&&"number"===typeof b.timeout)b=c+b.timeout;else switch(g){case 1:b=c+-1;break;case 2:b=c+250;break;case 5:b=c+1073741823;break;case 4:b=c+1E4;break;default:b=c+5E3}a={callback:a,priorityLevel:g,expirationTime:b,next:null,previous:null};if(null===d)d=a.next=a.previous=a,p();else{c=null;var f=d;do{if(f.expirationTime>b){c=f;break}f=f.next}while(f!==d);null===c?c=d:c===d&&(d=a,p()); -b=c.previous;b.next=c.previous=a;a.next=c;a.previous=b}return a};exports.unstable_cancelCallback=function(a){var b=a.next;if(null!==b){if(b===a)d=null;else{a===d&&(d=b);var c=a.previous;c.next=b;b.previous=c}a.next=a.previous=null}};exports.unstable_wrapCallback=function(a){var b=g;return function(){var c=g,f=k;g=b;k=exports.unstable_now();try{return a.apply(this,arguments)}finally{g=c,k=f,v()}}};exports.unstable_getCurrentPriorityLevel=function(){return g}; -exports.unstable_shouldYield=function(){return!e&&(null!==d&&d.expirationTime 1 ? arguments[1] : undefined; + var mapping = mapfn !== undefined; + var index = 0; + var iterFn = getIterFn(O); + var length, result, step, iterator; + if (mapping) mapfn = ctx(mapfn, aLen > 2 ? arguments[2] : undefined, 2); + // if object isn't iterable or it's array with default iterator - use simple case + if (iterFn != undefined && !(C == Array && isArrayIter(iterFn))) { + for (iterator = iterFn.call(O), result = new C(); !(step = iterator.next()).done; index++) { + createProperty(result, index, mapping ? call(iterator, mapfn, [step.value, index], true) : step.value); + } + } else { + length = toLength(O.length); + for (result = new C(length); length > index; index++) { + createProperty(result, index, mapping ? mapfn(O[index], index) : O[index]); + } + } + result.length = index; + return result; + } +}); + + +/***/ }), + /***/ "XLbu": /***/ (function(module, exports, __webpack_require__) { @@ -993,6 +1022,13 @@ exports.DataManager = DataManager; /***/ }), +/***/ "d04V": +/***/ (function(module, exports, __webpack_require__) { + +module.exports = __webpack_require__("0tVQ"); + +/***/ }), + /***/ "dL40": /***/ (function(module, exports, __webpack_require__) { @@ -1118,6 +1154,8 @@ exports["default"] = void 0; var _asyncToGenerator2 = _interopRequireDefault(__webpack_require__("+oT+")); +var _from = _interopRequireDefault(__webpack_require__("d04V")); + var _promise = _interopRequireDefault(__webpack_require__("eVuF")); var _set = _interopRequireDefault(__webpack_require__("ttDY")); @@ -1125,7 +1163,7 @@ var _set = _interopRequireDefault(__webpack_require__("ttDY")); var _mitt = _interopRequireDefault(__webpack_require__("kiME")); var _unfetch = _interopRequireDefault(__webpack_require__("m/Gl")); -/* global document */ +/* global document, window */ // smaller version of https://gist.github.com/igrigorik/a02f2359f3bc50ca7a9c @@ -1207,15 +1245,40 @@ function () { if (document.getElementById("__NEXT_PAGE__" + route)) { return; - } // Load the script if not asked to load yet. - + } if (!_this3.loadingRoutes[route]) { - _this3.loadScript(route); + // Make sure we don't load a dependency that's already loaded + var loadedModules = new _set["default"]((0, _from["default"])(document.getElementsByTagName('script'), function (el) { + var results = /\/_next\/[^?]*/g.exec(el.src); + return results ? results[0] : el.src; + })); + + var deps = _this3.getDependencies(route); + var urlsToLoad = deps.filter(function (url) { + return !loadedModules.has(url); + }); _this3.loadingRoutes[route] = true; + urlsToLoad.forEach(function (url) { + return _this3.loadScript(url, route); + }); + + _this3.loadRouteBundle(route); } }); + } // Retrieve a list of dependencies for a given route from the build manifest + + }, { + key: "getDependencies", + value: function getDependencies(route) { + if (!window.__BUILD_MANIFEST || !window.__BUILD_MANIFEST.pages[route]) { + return []; + } + + return window.__BUILD_MANIFEST.pages[route].map(function (url) { + return '/_next/' + url; + }); } }, { key: "onDynamicBuildId", @@ -1243,14 +1306,14 @@ function () { }); } }, { - key: "loadScript", - value: function loadScript(route) { + key: "loadRouteBundle", + value: function loadRouteBundle(route) { var _this = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee() { - var scriptRoute, script, url; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee$(_context) { while (1) { switch (_context.prev = _context.next) { @@ -1261,38 +1324,47 @@ function () { case 2: route = _this.normalizeRoute(route); scriptRoute = route === '/' ? '/index.js' : route + ".js"; - script = document.createElement('script'); - - if (false) {} - url = _this.assetPrefix + "/_next/static/" + encodeURIComponent(_this.buildId) + "/pages" + scriptRoute; - script.crossOrigin = undefined; - script.src = url; - - script.onerror = function () { - var error = new Error("Error loading script " + url); - error.code = 'PAGE_LOAD_ERROR'; - - _this.pageRegisterEvents.emit(route, { - error: error - }); - }; - document.body.appendChild(script); + _this.loadScript(url, route); - case 11: + case 6: case "end": return _context.stop(); } } }, _callee); }))(); + } + }, { + key: "loadScript", + value: function loadScript(url, route) { + var _this5 = this; + + var script = document.createElement('script'); + + if (false) {} + + script.crossOrigin = undefined; + script.src = url; + script.async = false; // Explicit async = false required for in-order execution + + script.onerror = function () { + var error = new Error("Error loading script " + url); + error.code = 'PAGE_LOAD_ERROR'; + + _this5.pageRegisterEvents.emit(route, { + error: error + }); + }; + + document.body.appendChild(script); } // This method if called by the route code. }, { key: "registerPage", value: function registerPage(route, regFn) { - var _this5 = this; + var _this6 = this; var register = function register() { try { @@ -1300,21 +1372,21 @@ function () { error = _regFn.error, page = _regFn.page; - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error, page: page }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error, page: page }); } catch (error) { - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error }); } @@ -1326,13 +1398,13 @@ function () { } }, { key: "prefetch", - value: function prefetch(route) { + value: function prefetch(route, isDependency) { var _this2 = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee2() { - var scriptRoute, link; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee2$(_context2) { while (1) { switch (_context2.prev = _context2.next) { @@ -1367,32 +1439,47 @@ function () { return _context2.abrupt("return"); case 9: + if (!isDependency) { + _this2.getDependencies(route).forEach(function (url) { + _this2.prefetch(url, true); + }); + } // Feature detection is used to see if preload is supported + // If not fall back to loading script tags before the page is loaded + // https://caniuse.com/#feat=link-rel-preload + + if (!hasPreload) { - _context2.next = 19; + _context2.next = 16; break; } - _context2.next = 12; + _context2.next = 13; return _this2.promisedBuildId; - case 12: - link = document.createElement('link'); - link.rel = 'preload'; - link.crossOrigin = undefined; - link.href = _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; - link.as = 'script'; - document.head.appendChild(link); + case 13: + url = isDependency ? route : _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; + + _this2.createPreloadLink(url); + return _context2.abrupt("return"); - case 19: + case 16: + if (!isDependency) { + _context2.next = 18; + break; + } + + return _context2.abrupt("return"); + + case 18: if (!(document.readyState === 'complete')) { - _context2.next = 23; + _context2.next = 22; break; } return _context2.abrupt("return", _this2.loadPage(route)["catch"](function () {})); - case 23: + case 22: return _context2.abrupt("return", new _promise["default"](function (resolve) { window.addEventListener('load', function () { _this2.loadPage(route).then(function () { @@ -1403,7 +1490,7 @@ function () { }); })); - case 24: + case 23: case "end": return _context2.stop(); } @@ -1412,6 +1499,16 @@ function () { }))(); } }, { + key: "createPreloadLink", + value: function createPreloadLink(url) { + var link = document.createElement('link'); + link.rel = 'preload'; + link.crossOrigin = undefined; + link.href = url; + link.as = 'script'; + document.head.appendChild(link); + } + }, { key: "clearCache", value: function clearCache(route) { route = this.normalizeRoute(route); ```
github-actions[bot] commented 5 years ago

Stats from current PR

Click to expand stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 15.3s | 14.7s | -511ms | | `node_modules` Size | 45.5 MB | 45.5 MB | ⚠️ +7.7 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 208 kB | ⚠️ +1.55 kB | | Total Bundle (main, webpack, commons) gzip Size | 67.9 kB | 68.4 kB | ⚠️ +558 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 20 kB | 17 kB | -3.01 kB | | Client `main` gzip Size | 6.86 kB | 5.97 kB | -885 B | | Client `commons` Size | 184 kB | 188 kB | ⚠️ +4.56 kB | | Client `commons` gzip Size | 59.7 kB | 61.1 kB | ⚠️ +1.44 kB | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Base Rendered Size | 1.35 kB | 1.35 kB | ✓ | | Build Dir Size | 705 kB | 710 kB | ⚠️ +5.11 kB |
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 16.1s | 16.6s | ⚠️ +457ms | | `node_modules` Size | 45.5 MB | 45.5 MB | ⚠️ +7.7 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 208 kB | ⚠️ +1.55 kB | | Total Bundle (main, webpack, commons) gzip Size | 67.9 kB | 68.4 kB | ⚠️ +558 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 20 kB | 17 kB | -3.01 kB | | Client `main` gzip Size | 6.86 kB | 5.97 kB | -885 B | | Client `commons` Size | 184 kB | 188 kB | ⚠️ +4.56 kB | | Client `commons` gzip Size | 59.7 kB | 61.1 kB | ⚠️ +1.44 kB | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Serverless `pages/link` Size | 252 kB | 252 kB | ✓ | | Serverless `pages/link` gzip Size | 68 kB | 68 kB | ⚠️ +4 B | | Serverless `pages/index` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/index` gzip Size | 65.8 kB | 65.8 kB | ⚠️ +2 B | | Serverless `pages/_error` Size | 244 kB | 244 kB | ✓ | | Serverless `pages/_error` gzip Size | 65.5 kB | 65.5 kB | ⚠️ +2 B | | Serverless `pages/routerDirect` Size | 246 kB | 246 kB | ✓ | | Serverless `pages/routerDirect` gzip Size | 65.7 kB | 65.7 kB | ⚠️ +2 B | | Serverless `pages/withRouter` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/withRouter` gzip Size | 65.9 kB | 65.9 kB | ⚠️ +2 B | | Build Dir Size | 1.89 MB | 1.9 MB | ⚠️ +5.11 kB |
Diff for commons.js ```diff @@ -21,6 +21,35 @@ module.exports = __webpack_require__("WEpk").Object.getPrototypeOf; /***/ }), +/***/ "+wdc": +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; +/** @license React v0.13.6 + * scheduler.production.min.js + * + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +Object.defineProperty(exports,"__esModule",{value:!0});var d=null,e=!1,g=3,k=-1,l=-1,m=!1,n=!1;function p(){if(!m){var a=d.expirationTime;n?q():n=!0;r(t,a)}} +function u(){var a=d,b=d.next;if(d===b)d=null;else{var c=d.previous;d=c.next=b;b.previous=c}a.next=a.previous=null;c=a.callback;b=a.expirationTime;a=a.priorityLevel;var f=g,Q=l;g=a;l=b;try{var h=c()}finally{g=f,l=Q}if("function"===typeof h)if(h={callback:h,priorityLevel:a,expirationTime:b,next:null,previous:null},null===d)d=h.next=h.previous=h;else{c=null;a=d;do{if(a.expirationTime>=b){c=a;break}a=a.next}while(a!==d);null===c?c=d:c===d&&(d=h,p());b=c.previous;b.next=c.previous=h;h.next=c;h.previous= +b}}function v(){if(-1===k&&null!==d&&1===d.priorityLevel){m=!0;try{do u();while(null!==d&&1===d.priorityLevel)}finally{m=!1,null!==d?p():n=!1}}}function t(a){m=!0;var b=e;e=a;try{if(a)for(;null!==d;){var c=exports.unstable_now();if(d.expirationTime<=c){do u();while(null!==d&&d.expirationTime<=c)}else break}else if(null!==d){do u();while(null!==d&&!w())}}finally{m=!1,e=b,null!==d?p():n=!1,v()}} +var x=Date,y="function"===typeof setTimeout?setTimeout:void 0,z="function"===typeof clearTimeout?clearTimeout:void 0,A="function"===typeof requestAnimationFrame?requestAnimationFrame:void 0,B="function"===typeof cancelAnimationFrame?cancelAnimationFrame:void 0,C,D;function E(a){C=A(function(b){z(D);a(b)});D=y(function(){B(C);a(exports.unstable_now())},100)} +if("object"===typeof performance&&"function"===typeof performance.now){var F=performance;exports.unstable_now=function(){return F.now()}}else exports.unstable_now=function(){return x.now()};var r,q,w,G=null; true?G=window:undefined; +if(G&&G._schedMock){var H=G._schedMock;r=H[0];q=H[1];w=H[2];exports.unstable_now=H[3]}else if( false||"function"!==typeof MessageChannel){var I=null,J=function(a){if(null!==I)try{I(a)}finally{I=null}};r=function(a){null!==I?setTimeout(r,0,a):(I=a,setTimeout(J,0,!1))};q=function(){I=null};w=function(){return!1}}else{"undefined"!==typeof console&&("function"!==typeof A&&console.error("This browser doesn't support requestAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills"), +"function"!==typeof B&&console.error("This browser doesn't support cancelAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills"));var K=null,L=!1,M=-1,N=!1,O=!1,P=0,R=33,S=33;w=function(){return P<=exports.unstable_now()};var T=new MessageChannel,U=T.port2;T.port1.onmessage=function(){L=!1;var a=K,b=M;K=null;M=-1;var c=exports.unstable_now(),f=!1;if(0>=P-c)if(-1!==b&&b<=c)f=!0;else{N||(N=!0,E(V));K=a;M=b;return}if(null!==a){O=!0;try{a(f)}finally{O=!1}}}; +var V=function(a){if(null!==K){E(V);var b=a-P+S;bb&&(b=8),S=bb?U.postMessage(void 0):N||(N=!0,E(V))};q=function(){K=null;L=!1;M=-1}}exports.unstable_ImmediatePriority=1;exports.unstable_UserBlockingPriority=2;exports.unstable_NormalPriority=3;exports.unstable_IdlePriority=5;exports.unstable_LowPriority=4; +exports.unstable_runWithPriority=function(a,b){switch(a){case 1:case 2:case 3:case 4:case 5:break;default:a=3}var c=g,f=k;g=a;k=exports.unstable_now();try{return b()}finally{g=c,k=f,v()}};exports.unstable_next=function(a){switch(g){case 1:case 2:case 3:var b=3;break;default:b=g}var c=g,f=k;g=b;k=exports.unstable_now();try{return a()}finally{g=c,k=f,v()}}; +exports.unstable_scheduleCallback=function(a,b){var c=-1!==k?k:exports.unstable_now();if("object"===typeof b&&null!==b&&"number"===typeof b.timeout)b=c+b.timeout;else switch(g){case 1:b=c+-1;break;case 2:b=c+250;break;case 5:b=c+1073741823;break;case 4:b=c+1E4;break;default:b=c+5E3}a={callback:a,priorityLevel:g,expirationTime:b,next:null,previous:null};if(null===d)d=a.next=a.previous=a,p();else{c=null;var f=d;do{if(f.expirationTime>b){c=f;break}f=f.next}while(f!==d);null===c?c=d:c===d&&(d=a,p()); +b=c.previous;b.next=c.previous=a;a.next=c;a.previous=b}return a};exports.unstable_cancelCallback=function(a){var b=a.next;if(null!==b){if(b===a)d=null;else{a===d&&(d=b);var c=a.previous;c.next=b;b.previous=c}a.next=a.previous=null}};exports.unstable_wrapCallback=function(a){var b=g;return function(){var c=g,f=k;g=b;k=exports.unstable_now();try{return a.apply(this,arguments)}finally{g=c,k=f,v()}}};exports.unstable_getCurrentPriorityLevel=function(){return g}; +exports.unstable_shouldYield=function(){return!e&&(null!==d&&d.expirationTime
Diff for main.js ```diff @@ -60,40 +60,21 @@ module.exports = _asyncToGenerator; /***/ }), -/***/ "+wdc": +/***/ "/h46": /***/ (function(module, exports, __webpack_require__) { -"use strict"; -/** @license React v0.13.6 - * scheduler.production.min.js - * - * Copyright (c) Facebook, Inc. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ - -Object.defineProperty(exports,"__esModule",{value:!0});var d=null,e=!1,g=3,k=-1,l=-1,m=!1,n=!1;function p(){if(!m){var a=d.expirationTime;n?q():n=!0;r(t,a)}} -function u(){var a=d,b=d.next;if(d===b)d=null;else{var c=d.previous;d=c.next=b;b.previous=c}a.next=a.previous=null;c=a.callback;b=a.expirationTime;a=a.priorityLevel;var f=g,Q=l;g=a;l=b;try{var h=c()}finally{g=f,l=Q}if("function"===typeof h)if(h={callback:h,priorityLevel:a,expirationTime:b,next:null,previous:null},null===d)d=h.next=h.previous=h;else{c=null;a=d;do{if(a.expirationTime>=b){c=a;break}a=a.next}while(a!==d);null===c?c=d:c===d&&(d=h,p());b=c.previous;b.next=c.previous=h;h.next=c;h.previous= -b}}function v(){if(-1===k&&null!==d&&1===d.priorityLevel){m=!0;try{do u();while(null!==d&&1===d.priorityLevel)}finally{m=!1,null!==d?p():n=!1}}}function t(a){m=!0;var b=e;e=a;try{if(a)for(;null!==d;){var c=exports.unstable_now();if(d.expirationTime<=c){do u();while(null!==d&&d.expirationTime<=c)}else break}else if(null!==d){do u();while(null!==d&&!w())}}finally{m=!1,e=b,null!==d?p():n=!1,v()}} -var x=Date,y="function"===typeof setTimeout?setTimeout:void 0,z="function"===typeof clearTimeout?clearTimeout:void 0,A="function"===typeof requestAnimationFrame?requestAnimationFrame:void 0,B="function"===typeof cancelAnimationFrame?cancelAnimationFrame:void 0,C,D;function E(a){C=A(function(b){z(D);a(b)});D=y(function(){B(C);a(exports.unstable_now())},100)} -if("object"===typeof performance&&"function"===typeof performance.now){var F=performance;exports.unstable_now=function(){return F.now()}}else exports.unstable_now=function(){return x.now()};var r,q,w,G=null; true?G=window:undefined; -if(G&&G._schedMock){var H=G._schedMock;r=H[0];q=H[1];w=H[2];exports.unstable_now=H[3]}else if( false||"function"!==typeof MessageChannel){var I=null,J=function(a){if(null!==I)try{I(a)}finally{I=null}};r=function(a){null!==I?setTimeout(r,0,a):(I=a,setTimeout(J,0,!1))};q=function(){I=null};w=function(){return!1}}else{"undefined"!==typeof console&&("function"!==typeof A&&console.error("This browser doesn't support requestAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills"), -"function"!==typeof B&&console.error("This browser doesn't support cancelAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills"));var K=null,L=!1,M=-1,N=!1,O=!1,P=0,R=33,S=33;w=function(){return P<=exports.unstable_now()};var T=new MessageChannel,U=T.port2;T.port1.onmessage=function(){L=!1;var a=K,b=M;K=null;M=-1;var c=exports.unstable_now(),f=!1;if(0>=P-c)if(-1!==b&&b<=c)f=!0;else{N||(N=!0,E(V));K=a;M=b;return}if(null!==a){O=!0;try{a(f)}finally{O=!1}}}; -var V=function(a){if(null!==K){E(V);var b=a-P+S;bb&&(b=8),S=bb?U.postMessage(void 0):N||(N=!0,E(V))};q=function(){K=null;L=!1;M=-1}}exports.unstable_ImmediatePriority=1;exports.unstable_UserBlockingPriority=2;exports.unstable_NormalPriority=3;exports.unstable_IdlePriority=5;exports.unstable_LowPriority=4; -exports.unstable_runWithPriority=function(a,b){switch(a){case 1:case 2:case 3:case 4:case 5:break;default:a=3}var c=g,f=k;g=a;k=exports.unstable_now();try{return b()}finally{g=c,k=f,v()}};exports.unstable_next=function(a){switch(g){case 1:case 2:case 3:var b=3;break;default:b=g}var c=g,f=k;g=b;k=exports.unstable_now();try{return a()}finally{g=c,k=f,v()}}; -exports.unstable_scheduleCallback=function(a,b){var c=-1!==k?k:exports.unstable_now();if("object"===typeof b&&null!==b&&"number"===typeof b.timeout)b=c+b.timeout;else switch(g){case 1:b=c+-1;break;case 2:b=c+250;break;case 5:b=c+1073741823;break;case 4:b=c+1E4;break;default:b=c+5E3}a={callback:a,priorityLevel:g,expirationTime:b,next:null,previous:null};if(null===d)d=a.next=a.previous=a,p();else{c=null;var f=d;do{if(f.expirationTime>b){c=f;break}f=f.next}while(f!==d);null===c?c=d:c===d&&(d=a,p()); -b=c.previous;b.next=c.previous=a;a.next=c;a.previous=b}return a};exports.unstable_cancelCallback=function(a){var b=a.next;if(null!==b){if(b===a)d=null;else{a===d&&(d=b);var c=a.previous;c.next=b;b.previous=c}a.next=a.previous=null}};exports.unstable_wrapCallback=function(a){var b=g;return function(){var c=g,f=k;g=b;k=exports.unstable_now();try{return a.apply(this,arguments)}finally{g=c,k=f,v()}}};exports.unstable_getCurrentPriorityLevel=function(){return g}; -exports.unstable_shouldYield=function(){return!e&&(null!==d&&d.expirationTime 1 ? arguments[1] : undefined; + var mapping = mapfn !== undefined; + var index = 0; + var iterFn = getIterFn(O); + var length, result, step, iterator; + if (mapping) mapfn = ctx(mapfn, aLen > 2 ? arguments[2] : undefined, 2); + // if object isn't iterable or it's array with default iterator - use simple case + if (iterFn != undefined && !(C == Array && isArrayIter(iterFn))) { + for (iterator = iterFn.call(O), result = new C(); !(step = iterator.next()).done; index++) { + createProperty(result, index, mapping ? call(iterator, mapfn, [step.value, index], true) : step.value); + } + } else { + length = toLength(O.length); + for (result = new C(length); length > index; index++) { + createProperty(result, index, mapping ? mapfn(O[index], index) : O[index]); + } + } + result.length = index; + return result; + } +}); + + +/***/ }), + /***/ "XLbu": /***/ (function(module, exports, __webpack_require__) { @@ -993,6 +1022,13 @@ exports.DataManager = DataManager; /***/ }), +/***/ "d04V": +/***/ (function(module, exports, __webpack_require__) { + +module.exports = __webpack_require__("0tVQ"); + +/***/ }), + /***/ "dL40": /***/ (function(module, exports, __webpack_require__) { @@ -1118,6 +1154,8 @@ exports["default"] = void 0; var _asyncToGenerator2 = _interopRequireDefault(__webpack_require__("+oT+")); +var _from = _interopRequireDefault(__webpack_require__("d04V")); + var _promise = _interopRequireDefault(__webpack_require__("eVuF")); var _set = _interopRequireDefault(__webpack_require__("ttDY")); @@ -1125,7 +1163,7 @@ var _set = _interopRequireDefault(__webpack_require__("ttDY")); var _mitt = _interopRequireDefault(__webpack_require__("kiME")); var _unfetch = _interopRequireDefault(__webpack_require__("m/Gl")); -/* global document */ +/* global document, window */ // smaller version of https://gist.github.com/igrigorik/a02f2359f3bc50ca7a9c @@ -1207,15 +1245,40 @@ function () { if (document.getElementById("__NEXT_PAGE__" + route)) { return; - } // Load the script if not asked to load yet. - + } if (!_this3.loadingRoutes[route]) { - _this3.loadScript(route); + // Make sure we don't load a dependency that's already loaded + var loadedModules = new _set["default"]((0, _from["default"])(document.getElementsByTagName('script'), function (el) { + var results = /\/_next\/[^?]*/g.exec(el.src); + return results ? results[0] : el.src; + })); + + var deps = _this3.getDependencies(route); + var urlsToLoad = deps.filter(function (url) { + return !loadedModules.has(url); + }); _this3.loadingRoutes[route] = true; + urlsToLoad.forEach(function (url) { + return _this3.loadScript(url, route); + }); + + _this3.loadRouteBundle(route); } }); + } // Retrieve a list of dependencies for a given route from the build manifest + + }, { + key: "getDependencies", + value: function getDependencies(route) { + if (!window.__BUILD_MANIFEST || !window.__BUILD_MANIFEST.pages[route]) { + return []; + } + + return window.__BUILD_MANIFEST.pages[route].map(function (url) { + return '/_next/' + url; + }); } }, { key: "onDynamicBuildId", @@ -1243,14 +1306,14 @@ function () { }); } }, { - key: "loadScript", - value: function loadScript(route) { + key: "loadRouteBundle", + value: function loadRouteBundle(route) { var _this = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee() { - var scriptRoute, script, url; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee$(_context) { while (1) { switch (_context.prev = _context.next) { @@ -1261,38 +1324,47 @@ function () { case 2: route = _this.normalizeRoute(route); scriptRoute = route === '/' ? '/index.js' : route + ".js"; - script = document.createElement('script'); - - if (false) {} - url = _this.assetPrefix + "/_next/static/" + encodeURIComponent(_this.buildId) + "/pages" + scriptRoute; - script.crossOrigin = undefined; - script.src = url; - - script.onerror = function () { - var error = new Error("Error loading script " + url); - error.code = 'PAGE_LOAD_ERROR'; - - _this.pageRegisterEvents.emit(route, { - error: error - }); - }; - document.body.appendChild(script); + _this.loadScript(url, route); - case 11: + case 6: case "end": return _context.stop(); } } }, _callee); }))(); + } + }, { + key: "loadScript", + value: function loadScript(url, route) { + var _this5 = this; + + var script = document.createElement('script'); + + if (false) {} + + script.crossOrigin = undefined; + script.src = url; + script.async = false; // Explicit async = false required for in-order execution + + script.onerror = function () { + var error = new Error("Error loading script " + url); + error.code = 'PAGE_LOAD_ERROR'; + + _this5.pageRegisterEvents.emit(route, { + error: error + }); + }; + + document.body.appendChild(script); } // This method if called by the route code. }, { key: "registerPage", value: function registerPage(route, regFn) { - var _this5 = this; + var _this6 = this; var register = function register() { try { @@ -1300,21 +1372,21 @@ function () { error = _regFn.error, page = _regFn.page; - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error, page: page }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error, page: page }); } catch (error) { - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error }); } @@ -1326,13 +1398,13 @@ function () { } }, { key: "prefetch", - value: function prefetch(route) { + value: function prefetch(route, isDependency) { var _this2 = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee2() { - var scriptRoute, link; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee2$(_context2) { while (1) { switch (_context2.prev = _context2.next) { @@ -1367,32 +1439,47 @@ function () { return _context2.abrupt("return"); case 9: + if (!isDependency) { + _this2.getDependencies(route).forEach(function (url) { + _this2.prefetch(url, true); + }); + } // Feature detection is used to see if preload is supported + // If not fall back to loading script tags before the page is loaded + // https://caniuse.com/#feat=link-rel-preload + + if (!hasPreload) { - _context2.next = 19; + _context2.next = 16; break; } - _context2.next = 12; + _context2.next = 13; return _this2.promisedBuildId; - case 12: - link = document.createElement('link'); - link.rel = 'preload'; - link.crossOrigin = undefined; - link.href = _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; - link.as = 'script'; - document.head.appendChild(link); + case 13: + url = isDependency ? route : _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; + + _this2.createPreloadLink(url); + return _context2.abrupt("return"); - case 19: + case 16: + if (!isDependency) { + _context2.next = 18; + break; + } + + return _context2.abrupt("return"); + + case 18: if (!(document.readyState === 'complete')) { - _context2.next = 23; + _context2.next = 22; break; } return _context2.abrupt("return", _this2.loadPage(route)["catch"](function () {})); - case 23: + case 22: return _context2.abrupt("return", new _promise["default"](function (resolve) { window.addEventListener('load', function () { _this2.loadPage(route).then(function () { @@ -1403,7 +1490,7 @@ function () { }); })); - case 24: + case 23: case "end": return _context2.stop(); } @@ -1412,6 +1499,16 @@ function () { }))(); } }, { + key: "createPreloadLink", + value: function createPreloadLink(url) { + var link = document.createElement('link'); + link.rel = 'preload'; + link.crossOrigin = undefined; + link.href = url; + link.as = 'script'; + document.head.appendChild(link); + } + }, { key: "clearCache", value: function clearCache(route) { route = this.normalizeRoute(route); ```
github-actions[bot] commented 5 years ago

Stats from current PR

Click to expand stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 12.4s | 12.1s | -234ms | | `node_modules` Size | 45.5 MB | 45.5 MB | ⚠️ +7.41 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 208 kB | ⚠️ +1.55 kB | | Total Bundle (main, webpack, commons) gzip Size | 67.9 kB | 68.4 kB | ⚠️ +558 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 20 kB | 17 kB | -3.01 kB | | Client `main` gzip Size | 6.86 kB | 5.97 kB | -885 B | | Client `commons` Size | 184 kB | 188 kB | ⚠️ +4.56 kB | | Client `commons` gzip Size | 59.7 kB | 61.1 kB | ⚠️ +1.44 kB | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Base Rendered Size | 1.35 kB | 1.35 kB | ✓ | | Build Dir Size | 705 kB | 710 kB | ⚠️ +5.11 kB |
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 13.1s | 13.3s | ⚠️ +177ms | | `node_modules` Size | 45.5 MB | 45.5 MB | ⚠️ +7.41 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 208 kB | ⚠️ +1.55 kB | | Total Bundle (main, webpack, commons) gzip Size | 67.9 kB | 68.4 kB | ⚠️ +558 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 20 kB | 17 kB | -3.01 kB | | Client `main` gzip Size | 6.86 kB | 5.97 kB | -885 B | | Client `commons` Size | 184 kB | 188 kB | ⚠️ +4.56 kB | | Client `commons` gzip Size | 59.7 kB | 61.1 kB | ⚠️ +1.44 kB | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Serverless `pages/link` Size | 252 kB | 252 kB | ✓ | | Serverless `pages/link` gzip Size | 68 kB | 68 kB | ⚠️ +2 B | | Serverless `pages/index` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/index` gzip Size | 65.8 kB | 65.8 kB | ⚠️ +1 B | | Serverless `pages/_error` Size | 244 kB | 244 kB | ✓ | | Serverless `pages/_error` gzip Size | 65.5 kB | 65.5 kB | ⚠️ +1 B | | Serverless `pages/routerDirect` Size | 246 kB | 246 kB | ✓ | | Serverless `pages/routerDirect` gzip Size | 65.7 kB | 65.7 kB | ⚠️ +1 B | | Serverless `pages/withRouter` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/withRouter` gzip Size | 65.9 kB | 65.9 kB | ⚠️ +2 B | | Build Dir Size | 1.89 MB | 1.9 MB | ⚠️ +5.11 kB |
Diff for commons.js ```diff @@ -21,6 +21,35 @@ module.exports = __webpack_require__("WEpk").Object.getPrototypeOf; /***/ }), +/***/ "+wdc": +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; +/** @license React v0.13.6 + * scheduler.production.min.js + * + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +Object.defineProperty(exports,"__esModule",{value:!0});var d=null,e=!1,g=3,k=-1,l=-1,m=!1,n=!1;function p(){if(!m){var a=d.expirationTime;n?q():n=!0;r(t,a)}} +function u(){var a=d,b=d.next;if(d===b)d=null;else{var c=d.previous;d=c.next=b;b.previous=c}a.next=a.previous=null;c=a.callback;b=a.expirationTime;a=a.priorityLevel;var f=g,Q=l;g=a;l=b;try{var h=c()}finally{g=f,l=Q}if("function"===typeof h)if(h={callback:h,priorityLevel:a,expirationTime:b,next:null,previous:null},null===d)d=h.next=h.previous=h;else{c=null;a=d;do{if(a.expirationTime>=b){c=a;break}a=a.next}while(a!==d);null===c?c=d:c===d&&(d=h,p());b=c.previous;b.next=c.previous=h;h.next=c;h.previous= +b}}function v(){if(-1===k&&null!==d&&1===d.priorityLevel){m=!0;try{do u();while(null!==d&&1===d.priorityLevel)}finally{m=!1,null!==d?p():n=!1}}}function t(a){m=!0;var b=e;e=a;try{if(a)for(;null!==d;){var c=exports.unstable_now();if(d.expirationTime<=c){do u();while(null!==d&&d.expirationTime<=c)}else break}else if(null!==d){do u();while(null!==d&&!w())}}finally{m=!1,e=b,null!==d?p():n=!1,v()}} +var x=Date,y="function"===typeof setTimeout?setTimeout:void 0,z="function"===typeof clearTimeout?clearTimeout:void 0,A="function"===typeof requestAnimationFrame?requestAnimationFrame:void 0,B="function"===typeof cancelAnimationFrame?cancelAnimationFrame:void 0,C,D;function E(a){C=A(function(b){z(D);a(b)});D=y(function(){B(C);a(exports.unstable_now())},100)} +if("object"===typeof performance&&"function"===typeof performance.now){var F=performance;exports.unstable_now=function(){return F.now()}}else exports.unstable_now=function(){return x.now()};var r,q,w,G=null; true?G=window:undefined; +if(G&&G._schedMock){var H=G._schedMock;r=H[0];q=H[1];w=H[2];exports.unstable_now=H[3]}else if( false||"function"!==typeof MessageChannel){var I=null,J=function(a){if(null!==I)try{I(a)}finally{I=null}};r=function(a){null!==I?setTimeout(r,0,a):(I=a,setTimeout(J,0,!1))};q=function(){I=null};w=function(){return!1}}else{"undefined"!==typeof console&&("function"!==typeof A&&console.error("This browser doesn't support requestAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills"), +"function"!==typeof B&&console.error("This browser doesn't support cancelAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills"));var K=null,L=!1,M=-1,N=!1,O=!1,P=0,R=33,S=33;w=function(){return P<=exports.unstable_now()};var T=new MessageChannel,U=T.port2;T.port1.onmessage=function(){L=!1;var a=K,b=M;K=null;M=-1;var c=exports.unstable_now(),f=!1;if(0>=P-c)if(-1!==b&&b<=c)f=!0;else{N||(N=!0,E(V));K=a;M=b;return}if(null!==a){O=!0;try{a(f)}finally{O=!1}}}; +var V=function(a){if(null!==K){E(V);var b=a-P+S;bb&&(b=8),S=bb?U.postMessage(void 0):N||(N=!0,E(V))};q=function(){K=null;L=!1;M=-1}}exports.unstable_ImmediatePriority=1;exports.unstable_UserBlockingPriority=2;exports.unstable_NormalPriority=3;exports.unstable_IdlePriority=5;exports.unstable_LowPriority=4; +exports.unstable_runWithPriority=function(a,b){switch(a){case 1:case 2:case 3:case 4:case 5:break;default:a=3}var c=g,f=k;g=a;k=exports.unstable_now();try{return b()}finally{g=c,k=f,v()}};exports.unstable_next=function(a){switch(g){case 1:case 2:case 3:var b=3;break;default:b=g}var c=g,f=k;g=b;k=exports.unstable_now();try{return a()}finally{g=c,k=f,v()}}; +exports.unstable_scheduleCallback=function(a,b){var c=-1!==k?k:exports.unstable_now();if("object"===typeof b&&null!==b&&"number"===typeof b.timeout)b=c+b.timeout;else switch(g){case 1:b=c+-1;break;case 2:b=c+250;break;case 5:b=c+1073741823;break;case 4:b=c+1E4;break;default:b=c+5E3}a={callback:a,priorityLevel:g,expirationTime:b,next:null,previous:null};if(null===d)d=a.next=a.previous=a,p();else{c=null;var f=d;do{if(f.expirationTime>b){c=f;break}f=f.next}while(f!==d);null===c?c=d:c===d&&(d=a,p()); +b=c.previous;b.next=c.previous=a;a.next=c;a.previous=b}return a};exports.unstable_cancelCallback=function(a){var b=a.next;if(null!==b){if(b===a)d=null;else{a===d&&(d=b);var c=a.previous;c.next=b;b.previous=c}a.next=a.previous=null}};exports.unstable_wrapCallback=function(a){var b=g;return function(){var c=g,f=k;g=b;k=exports.unstable_now();try{return a.apply(this,arguments)}finally{g=c,k=f,v()}}};exports.unstable_getCurrentPriorityLevel=function(){return g}; +exports.unstable_shouldYield=function(){return!e&&(null!==d&&d.expirationTime
Diff for main.js ```diff @@ -60,40 +60,21 @@ module.exports = _asyncToGenerator; /***/ }), -/***/ "+wdc": +/***/ "/h46": /***/ (function(module, exports, __webpack_require__) { -"use strict"; -/** @license React v0.13.6 - * scheduler.production.min.js - * - * Copyright (c) Facebook, Inc. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ - -Object.defineProperty(exports,"__esModule",{value:!0});var d=null,e=!1,g=3,k=-1,l=-1,m=!1,n=!1;function p(){if(!m){var a=d.expirationTime;n?q():n=!0;r(t,a)}} -function u(){var a=d,b=d.next;if(d===b)d=null;else{var c=d.previous;d=c.next=b;b.previous=c}a.next=a.previous=null;c=a.callback;b=a.expirationTime;a=a.priorityLevel;var f=g,Q=l;g=a;l=b;try{var h=c()}finally{g=f,l=Q}if("function"===typeof h)if(h={callback:h,priorityLevel:a,expirationTime:b,next:null,previous:null},null===d)d=h.next=h.previous=h;else{c=null;a=d;do{if(a.expirationTime>=b){c=a;break}a=a.next}while(a!==d);null===c?c=d:c===d&&(d=h,p());b=c.previous;b.next=c.previous=h;h.next=c;h.previous= -b}}function v(){if(-1===k&&null!==d&&1===d.priorityLevel){m=!0;try{do u();while(null!==d&&1===d.priorityLevel)}finally{m=!1,null!==d?p():n=!1}}}function t(a){m=!0;var b=e;e=a;try{if(a)for(;null!==d;){var c=exports.unstable_now();if(d.expirationTime<=c){do u();while(null!==d&&d.expirationTime<=c)}else break}else if(null!==d){do u();while(null!==d&&!w())}}finally{m=!1,e=b,null!==d?p():n=!1,v()}} -var x=Date,y="function"===typeof setTimeout?setTimeout:void 0,z="function"===typeof clearTimeout?clearTimeout:void 0,A="function"===typeof requestAnimationFrame?requestAnimationFrame:void 0,B="function"===typeof cancelAnimationFrame?cancelAnimationFrame:void 0,C,D;function E(a){C=A(function(b){z(D);a(b)});D=y(function(){B(C);a(exports.unstable_now())},100)} -if("object"===typeof performance&&"function"===typeof performance.now){var F=performance;exports.unstable_now=function(){return F.now()}}else exports.unstable_now=function(){return x.now()};var r,q,w,G=null; true?G=window:undefined; -if(G&&G._schedMock){var H=G._schedMock;r=H[0];q=H[1];w=H[2];exports.unstable_now=H[3]}else if( false||"function"!==typeof MessageChannel){var I=null,J=function(a){if(null!==I)try{I(a)}finally{I=null}};r=function(a){null!==I?setTimeout(r,0,a):(I=a,setTimeout(J,0,!1))};q=function(){I=null};w=function(){return!1}}else{"undefined"!==typeof console&&("function"!==typeof A&&console.error("This browser doesn't support requestAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills"), -"function"!==typeof B&&console.error("This browser doesn't support cancelAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills"));var K=null,L=!1,M=-1,N=!1,O=!1,P=0,R=33,S=33;w=function(){return P<=exports.unstable_now()};var T=new MessageChannel,U=T.port2;T.port1.onmessage=function(){L=!1;var a=K,b=M;K=null;M=-1;var c=exports.unstable_now(),f=!1;if(0>=P-c)if(-1!==b&&b<=c)f=!0;else{N||(N=!0,E(V));K=a;M=b;return}if(null!==a){O=!0;try{a(f)}finally{O=!1}}}; -var V=function(a){if(null!==K){E(V);var b=a-P+S;bb&&(b=8),S=bb?U.postMessage(void 0):N||(N=!0,E(V))};q=function(){K=null;L=!1;M=-1}}exports.unstable_ImmediatePriority=1;exports.unstable_UserBlockingPriority=2;exports.unstable_NormalPriority=3;exports.unstable_IdlePriority=5;exports.unstable_LowPriority=4; -exports.unstable_runWithPriority=function(a,b){switch(a){case 1:case 2:case 3:case 4:case 5:break;default:a=3}var c=g,f=k;g=a;k=exports.unstable_now();try{return b()}finally{g=c,k=f,v()}};exports.unstable_next=function(a){switch(g){case 1:case 2:case 3:var b=3;break;default:b=g}var c=g,f=k;g=b;k=exports.unstable_now();try{return a()}finally{g=c,k=f,v()}}; -exports.unstable_scheduleCallback=function(a,b){var c=-1!==k?k:exports.unstable_now();if("object"===typeof b&&null!==b&&"number"===typeof b.timeout)b=c+b.timeout;else switch(g){case 1:b=c+-1;break;case 2:b=c+250;break;case 5:b=c+1073741823;break;case 4:b=c+1E4;break;default:b=c+5E3}a={callback:a,priorityLevel:g,expirationTime:b,next:null,previous:null};if(null===d)d=a.next=a.previous=a,p();else{c=null;var f=d;do{if(f.expirationTime>b){c=f;break}f=f.next}while(f!==d);null===c?c=d:c===d&&(d=a,p()); -b=c.previous;b.next=c.previous=a;a.next=c;a.previous=b}return a};exports.unstable_cancelCallback=function(a){var b=a.next;if(null!==b){if(b===a)d=null;else{a===d&&(d=b);var c=a.previous;c.next=b;b.previous=c}a.next=a.previous=null}};exports.unstable_wrapCallback=function(a){var b=g;return function(){var c=g,f=k;g=b;k=exports.unstable_now();try{return a.apply(this,arguments)}finally{g=c,k=f,v()}}};exports.unstable_getCurrentPriorityLevel=function(){return g}; -exports.unstable_shouldYield=function(){return!e&&(null!==d&&d.expirationTime 1 ? arguments[1] : undefined; + var mapping = mapfn !== undefined; + var index = 0; + var iterFn = getIterFn(O); + var length, result, step, iterator; + if (mapping) mapfn = ctx(mapfn, aLen > 2 ? arguments[2] : undefined, 2); + // if object isn't iterable or it's array with default iterator - use simple case + if (iterFn != undefined && !(C == Array && isArrayIter(iterFn))) { + for (iterator = iterFn.call(O), result = new C(); !(step = iterator.next()).done; index++) { + createProperty(result, index, mapping ? call(iterator, mapfn, [step.value, index], true) : step.value); + } + } else { + length = toLength(O.length); + for (result = new C(length); length > index; index++) { + createProperty(result, index, mapping ? mapfn(O[index], index) : O[index]); + } + } + result.length = index; + return result; + } +}); + + +/***/ }), + /***/ "XLbu": /***/ (function(module, exports, __webpack_require__) { @@ -993,6 +1022,13 @@ exports.DataManager = DataManager; /***/ }), +/***/ "d04V": +/***/ (function(module, exports, __webpack_require__) { + +module.exports = __webpack_require__("0tVQ"); + +/***/ }), + /***/ "dL40": /***/ (function(module, exports, __webpack_require__) { @@ -1118,6 +1154,8 @@ exports["default"] = void 0; var _asyncToGenerator2 = _interopRequireDefault(__webpack_require__("+oT+")); +var _from = _interopRequireDefault(__webpack_require__("d04V")); + var _promise = _interopRequireDefault(__webpack_require__("eVuF")); var _set = _interopRequireDefault(__webpack_require__("ttDY")); @@ -1125,7 +1163,7 @@ var _set = _interopRequireDefault(__webpack_require__("ttDY")); var _mitt = _interopRequireDefault(__webpack_require__("kiME")); var _unfetch = _interopRequireDefault(__webpack_require__("m/Gl")); -/* global document */ +/* global document, window */ // smaller version of https://gist.github.com/igrigorik/a02f2359f3bc50ca7a9c @@ -1207,15 +1245,40 @@ function () { if (document.getElementById("__NEXT_PAGE__" + route)) { return; - } // Load the script if not asked to load yet. - + } if (!_this3.loadingRoutes[route]) { - _this3.loadScript(route); + // Make sure we don't load a dependency that's already loaded + var loadedModules = new _set["default"]((0, _from["default"])(document.getElementsByTagName('script'), function (el) { + var results = /\/_next\/[^?]*/g.exec(el.src); + return results ? results[0] : el.src; + })); + + var deps = _this3.getDependencies(route); + var urlsToLoad = deps.filter(function (url) { + return !loadedModules.has(url); + }); _this3.loadingRoutes[route] = true; + urlsToLoad.forEach(function (url) { + return _this3.loadScript(url, route); + }); + + _this3.loadRouteBundle(route); } }); + } // Retrieve a list of dependencies for a given route from the build manifest + + }, { + key: "getDependencies", + value: function getDependencies(route) { + if (!window.__BUILD_MANIFEST || !window.__BUILD_MANIFEST.pages[route]) { + return []; + } + + return window.__BUILD_MANIFEST.pages[route].map(function (url) { + return '/_next/' + url; + }); } }, { key: "onDynamicBuildId", @@ -1243,14 +1306,14 @@ function () { }); } }, { - key: "loadScript", - value: function loadScript(route) { + key: "loadRouteBundle", + value: function loadRouteBundle(route) { var _this = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee() { - var scriptRoute, script, url; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee$(_context) { while (1) { switch (_context.prev = _context.next) { @@ -1261,38 +1324,47 @@ function () { case 2: route = _this.normalizeRoute(route); scriptRoute = route === '/' ? '/index.js' : route + ".js"; - script = document.createElement('script'); - - if (false) {} - url = _this.assetPrefix + "/_next/static/" + encodeURIComponent(_this.buildId) + "/pages" + scriptRoute; - script.crossOrigin = undefined; - script.src = url; - - script.onerror = function () { - var error = new Error("Error loading script " + url); - error.code = 'PAGE_LOAD_ERROR'; - - _this.pageRegisterEvents.emit(route, { - error: error - }); - }; - document.body.appendChild(script); + _this.loadScript(url, route); - case 11: + case 6: case "end": return _context.stop(); } } }, _callee); }))(); + } + }, { + key: "loadScript", + value: function loadScript(url, route) { + var _this5 = this; + + var script = document.createElement('script'); + + if (false) {} + + script.crossOrigin = undefined; + script.src = url; + script.async = false; // Explicit async = false required for in-order execution + + script.onerror = function () { + var error = new Error("Error loading script " + url); + error.code = 'PAGE_LOAD_ERROR'; + + _this5.pageRegisterEvents.emit(route, { + error: error + }); + }; + + document.body.appendChild(script); } // This method if called by the route code. }, { key: "registerPage", value: function registerPage(route, regFn) { - var _this5 = this; + var _this6 = this; var register = function register() { try { @@ -1300,21 +1372,21 @@ function () { error = _regFn.error, page = _regFn.page; - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error, page: page }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error, page: page }); } catch (error) { - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error }); } @@ -1326,13 +1398,13 @@ function () { } }, { key: "prefetch", - value: function prefetch(route) { + value: function prefetch(route, isDependency) { var _this2 = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee2() { - var scriptRoute, link; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee2$(_context2) { while (1) { switch (_context2.prev = _context2.next) { @@ -1367,32 +1439,47 @@ function () { return _context2.abrupt("return"); case 9: + if (!isDependency) { + _this2.getDependencies(route).forEach(function (url) { + _this2.prefetch(url, true); + }); + } // Feature detection is used to see if preload is supported + // If not fall back to loading script tags before the page is loaded + // https://caniuse.com/#feat=link-rel-preload + + if (!hasPreload) { - _context2.next = 19; + _context2.next = 16; break; } - _context2.next = 12; + _context2.next = 13; return _this2.promisedBuildId; - case 12: - link = document.createElement('link'); - link.rel = 'preload'; - link.crossOrigin = undefined; - link.href = _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; - link.as = 'script'; - document.head.appendChild(link); + case 13: + url = isDependency ? route : _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; + + _this2.createPreloadLink(url); + return _context2.abrupt("return"); - case 19: + case 16: + if (!isDependency) { + _context2.next = 18; + break; + } + + return _context2.abrupt("return"); + + case 18: if (!(document.readyState === 'complete')) { - _context2.next = 23; + _context2.next = 22; break; } return _context2.abrupt("return", _this2.loadPage(route)["catch"](function () {})); - case 23: + case 22: return _context2.abrupt("return", new _promise["default"](function (resolve) { window.addEventListener('load', function () { _this2.loadPage(route).then(function () { @@ -1403,7 +1490,7 @@ function () { }); })); - case 24: + case 23: case "end": return _context2.stop(); } @@ -1412,6 +1499,16 @@ function () { }))(); } }, { + key: "createPreloadLink", + value: function createPreloadLink(url) { + var link = document.createElement('link'); + link.rel = 'preload'; + link.crossOrigin = undefined; + link.href = url; + link.as = 'script'; + document.head.appendChild(link); + } + }, { key: "clearCache", value: function clearCache(route) { route = this.normalizeRoute(route); ```
github-actions[bot] commented 5 years ago

Stats from current PR

Click to expand stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 13.2s | 13s | -198ms | | `node_modules` Size | 45.9 MB | 45.5 MB | -333 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 208 kB | ⚠️ +1.54 kB | | Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 68.4 kB | ⚠️ +639 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 15.4 kB | 17 kB | ⚠️ +1.54 kB | | Client `main` gzip Size | 5.33 kB | 5.96 kB | ⚠️ +639 B | | Client `commons` Size | 188 kB | 188 kB | ✓ | | Client `commons` gzip Size | 61.1 kB | 61.1 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Base Rendered Size | 1.35 kB | 1.35 kB | ✓ | | Build Dir Size | 705 kB | 710 kB | ⚠️ +5.07 kB |
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 14.6s | 14.4s | -139ms | | `node_modules` Size | 45.9 MB | 45.5 MB | -333 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 208 kB | ⚠️ +1.54 kB | | Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 68.4 kB | ⚠️ +639 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 15.4 kB | 17 kB | ⚠️ +1.54 kB | | Client `main` gzip Size | 5.33 kB | 5.96 kB | ⚠️ +639 B | | Client `commons` Size | 188 kB | 188 kB | ✓ | | Client `commons` gzip Size | 61.1 kB | 61.1 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Serverless `pages/link` Size | 252 kB | 252 kB | ✓ | | Serverless `pages/link` gzip Size | 68 kB | 68 kB | -4 B | | Serverless `pages/index` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/index` gzip Size | 65.8 kB | 65.8 kB | -2 B | | Serverless `pages/_error` Size | 244 kB | 244 kB | ✓ | | Serverless `pages/_error` gzip Size | 65.5 kB | 65.5 kB | -2 B | | Serverless `pages/routerDirect` Size | 246 kB | 246 kB | ✓ | | Serverless `pages/routerDirect` gzip Size | 65.7 kB | 65.7 kB | -4 B | | Serverless `pages/withRouter` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/withRouter` gzip Size | 65.9 kB | 65.9 kB | -2 B | | Build Dir Size | 1.89 MB | 1.9 MB | ⚠️ +5.07 kB |
Diff for main.js ```diff @@ -69,6 +69,16 @@ __webpack_require__("cHUd")('Map'); /***/ }), +/***/ "0tVQ": +/***/ (function(module, exports, __webpack_require__) { + +__webpack_require__("FlQf"); +__webpack_require__("VJsP"); +module.exports = __webpack_require__("WEpk").Array.from; + + +/***/ }), + /***/ "B9jh": /***/ (function(module, exports, __webpack_require__) { @@ -845,6 +855,22 @@ function _doRender() { /***/ }), +/***/ "IP1Z": +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + +var $defineProperty = __webpack_require__("2faE"); +var createDesc = __webpack_require__("rr1i"); + +module.exports = function (object, index, value) { + if (index in object) $defineProperty.f(object, index, createDesc(0, value)); + else object[index] = value; +}; + + +/***/ }), + /***/ "LX0d": /***/ (function(module, exports, __webpack_require__) { @@ -884,6 +910,51 @@ __webpack_require__("aPfg")('Set'); /***/ }), +/***/ "VJsP": +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + +var ctx = __webpack_require__("2GTP"); +var $export = __webpack_require__("Y7ZC"); +var toObject = __webpack_require__("JB68"); +var call = __webpack_require__("sNwI"); +var isArrayIter = __webpack_require__("NwJ3"); +var toLength = __webpack_require__("tEej"); +var createProperty = __webpack_require__("IP1Z"); +var getIterFn = __webpack_require__("fNZA"); + +$export($export.S + $export.F * !__webpack_require__("TuGD")(function (iter) { Array.from(iter); }), 'Array', { + // 22.1.2.1 Array.from(arrayLike, mapfn = undefined, thisArg = undefined) + from: function from(arrayLike /* , mapfn = undefined, thisArg = undefined */) { + var O = toObject(arrayLike); + var C = typeof this == 'function' ? this : Array; + var aLen = arguments.length; + var mapfn = aLen > 1 ? arguments[1] : undefined; + var mapping = mapfn !== undefined; + var index = 0; + var iterFn = getIterFn(O); + var length, result, step, iterator; + if (mapping) mapfn = ctx(mapfn, aLen > 2 ? arguments[2] : undefined, 2); + // if object isn't iterable or it's array with default iterator - use simple case + if (iterFn != undefined && !(C == Array && isArrayIter(iterFn))) { + for (iterator = iterFn.call(O), result = new C(); !(step = iterator.next()).done; index++) { + createProperty(result, index, mapping ? call(iterator, mapfn, [step.value, index], true) : step.value); + } + } else { + length = toLength(O.length); + for (result = new C(length); length > index; index++) { + createProperty(result, index, mapping ? mapfn(O[index], index) : O[index]); + } + } + result.length = index; + return result; + } +}); + + +/***/ }), + /***/ "XLbu": /***/ (function(module, exports, __webpack_require__) { @@ -951,6 +1022,13 @@ exports.DataManager = DataManager; /***/ }), +/***/ "d04V": +/***/ (function(module, exports, __webpack_require__) { + +module.exports = __webpack_require__("0tVQ"); + +/***/ }), + /***/ "dL40": /***/ (function(module, exports, __webpack_require__) { @@ -1076,6 +1154,8 @@ exports["default"] = void 0; var _asyncToGenerator2 = _interopRequireDefault(__webpack_require__("+oT+")); +var _from = _interopRequireDefault(__webpack_require__("d04V")); + var _promise = _interopRequireDefault(__webpack_require__("eVuF")); var _set = _interopRequireDefault(__webpack_require__("ttDY")); @@ -1083,7 +1163,7 @@ var _set = _interopRequireDefault(__webpack_require__("ttDY")); var _mitt = _interopRequireDefault(__webpack_require__("kiME")); var _unfetch = _interopRequireDefault(__webpack_require__("m/Gl")); -/* global document */ +/* global document, window */ // smaller version of https://gist.github.com/igrigorik/a02f2359f3bc50ca7a9c @@ -1165,15 +1245,40 @@ function () { if (document.getElementById("__NEXT_PAGE__" + route)) { return; - } // Load the script if not asked to load yet. - + } if (!_this3.loadingRoutes[route]) { - _this3.loadScript(route); + // Make sure we don't load a dependency that's already loaded + var loadedModules = new _set["default"]((0, _from["default"])(document.getElementsByTagName('script'), function (el) { + var results = /\/_next\/[^?]*/g.exec(el.src); + return results ? results[0] : el.src; + })); + var deps = _this3.getDependencies(route); + + var urlsToLoad = deps.filter(function (url) { + return !loadedModules.has(url); + }); _this3.loadingRoutes[route] = true; + urlsToLoad.forEach(function (url) { + return _this3.loadScript(url, route); + }); + + _this3.loadRoute(route); } }); + } // Retrieve a list of dependencies for a given route from the build manifest + + }, { + key: "getDependencies", + value: function getDependencies(route) { + if (!window.__BUILD_MANIFEST || !window.__BUILD_MANIFEST.pages[route]) { + return []; + } + + return window.__BUILD_MANIFEST.pages[route].map(function (url) { + return '/_next/' + url; + }); } }, { key: "onDynamicBuildId", @@ -1201,14 +1306,14 @@ function () { }); } }, { - key: "loadScript", - value: function loadScript(route) { + key: "loadRoute", + value: function loadRoute(route) { var _this = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee() { - var scriptRoute, script, url; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee$(_context) { while (1) { switch (_context.prev = _context.next) { @@ -1219,38 +1324,47 @@ function () { case 2: route = _this.normalizeRoute(route); scriptRoute = route === '/' ? '/index.js' : route + ".js"; - script = document.createElement('script'); - - if (false) {} - url = _this.assetPrefix + "/_next/static/" + encodeURIComponent(_this.buildId) + "/pages" + scriptRoute; - script.crossOrigin = undefined; - script.src = url; - script.onerror = function () { - var error = new Error("Error loading script " + url); - error.code = 'PAGE_LOAD_ERROR'; + _this.loadScript(url, route); - _this.pageRegisterEvents.emit(route, { - error: error - }); - }; - - document.body.appendChild(script); - - case 11: + case 6: case "end": return _context.stop(); } } }, _callee); }))(); + } + }, { + key: "loadScript", + value: function loadScript(url, route) { + var _this5 = this; + + var script = document.createElement('script'); + + if (false) {} + + script.crossOrigin = undefined; + script.src = url; + script.async = false; // Explicit async = false required for in-order execution + + script.onerror = function () { + var error = new Error("Error loading script " + url); + error.code = 'PAGE_LOAD_ERROR'; + + _this5.pageRegisterEvents.emit(route, { + error: error + }); + }; + + document.body.appendChild(script); } // This method if called by the route code. }, { key: "registerPage", value: function registerPage(route, regFn) { - var _this5 = this; + var _this6 = this; var register = function register() { try { @@ -1258,21 +1372,21 @@ function () { error = _regFn.error, page = _regFn.page; - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error, page: page }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error, page: page }); } catch (error) { - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error }); } @@ -1284,13 +1398,13 @@ function () { } }, { key: "prefetch", - value: function prefetch(route) { + value: function prefetch(route, isDependency) { var _this2 = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee2() { - var scriptRoute, link; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee2$(_context2) { while (1) { switch (_context2.prev = _context2.next) { @@ -1325,32 +1439,47 @@ function () { return _context2.abrupt("return"); case 9: + if (!isDependency) { + _this2.getDependencies(route).forEach(function (url) { + _this2.prefetch(url, true); + }); + } // Feature detection is used to see if preload is supported + // If not fall back to loading script tags before the page is loaded + // https://caniuse.com/#feat=link-rel-preload + + if (!hasPreload) { - _context2.next = 19; + _context2.next = 16; break; } - _context2.next = 12; + _context2.next = 13; return _this2.promisedBuildId; - case 12: - link = document.createElement('link'); - link.rel = 'preload'; - link.crossOrigin = undefined; - link.href = _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; - link.as = 'script'; - document.head.appendChild(link); + case 13: + url = isDependency ? route : _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; + + _this2.createPreloadLink(url); + + return _context2.abrupt("return"); + + case 16: + if (!isDependency) { + _context2.next = 18; + break; + } + return _context2.abrupt("return"); - case 19: + case 18: if (!(document.readyState === 'complete')) { - _context2.next = 23; + _context2.next = 22; break; } return _context2.abrupt("return", _this2.loadPage(route)["catch"](function () {})); - case 23: + case 22: return _context2.abrupt("return", new _promise["default"](function (resolve) { window.addEventListener('load', function () { _this2.loadPage(route).then(function () { @@ -1361,7 +1490,7 @@ function () { }); })); - case 24: + case 23: case "end": return _context2.stop(); } @@ -1370,6 +1499,16 @@ function () { }))(); } }, { + key: "createPreloadLink", + value: function createPreloadLink(url) { + var link = document.createElement('link'); + link.rel = 'preload'; + link.crossOrigin = undefined; + link.href = url; + link.as = 'script'; + document.head.appendChild(link); + } + }, { key: "clearCache", value: function clearCache(route) { route = this.normalizeRoute(route); ```
github-actions[bot] commented 5 years ago

Stats from current PR

Click to expand stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 12.6s | 12.5s | -86ms | | `node_modules` Size | 45.9 MB | 45.9 MB | ⚠️ +7.37 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 208 kB | ⚠️ +1.54 kB | | Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 68.4 kB | ⚠️ +639 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 15.4 kB | 17 kB | ⚠️ +1.54 kB | | Client `main` gzip Size | 5.33 kB | 5.96 kB | ⚠️ +639 B | | Client `commons` Size | 188 kB | 188 kB | ✓ | | Client `commons` gzip Size | 61.1 kB | 61.1 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Base Rendered Size | 1.35 kB | 1.35 kB | ✓ | | Build Dir Size | 705 kB | 710 kB | ⚠️ +5.07 kB |
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 13.4s | 14s | ⚠️ +620ms | | `node_modules` Size | 45.9 MB | 45.9 MB | ⚠️ +7.37 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 208 kB | ⚠️ +1.54 kB | | Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 68.4 kB | ⚠️ +638 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | -1 B | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 300 B | -1 B | | Client `main` Size | 15.4 kB | 17 kB | ⚠️ +1.54 kB | | Client `main` gzip Size | 5.33 kB | 5.96 kB | ⚠️ +639 B | | Client `commons` Size | 188 kB | 188 kB | ✓ | | Client `commons` gzip Size | 61.1 kB | 61.1 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Serverless `pages/link` Size | 252 kB | 252 kB | ✓ | | Serverless `pages/link` gzip Size | 68 kB | 68 kB | -2 B | | Serverless `pages/index` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/index` gzip Size | 65.8 kB | 65.8 kB | -2 B | | Serverless `pages/_error` Size | 244 kB | 244 kB | ✓ | | Serverless `pages/_error` gzip Size | 65.5 kB | 65.5 kB | -1 B | | Serverless `pages/routerDirect` Size | 246 kB | 246 kB | ✓ | | Serverless `pages/routerDirect` gzip Size | 65.7 kB | 65.7 kB | ✓ | | Serverless `pages/withRouter` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/withRouter` gzip Size | 65.9 kB | 65.9 kB | -1 B | | Build Dir Size | 1.89 MB | 1.9 MB | ⚠️ +5.07 kB |
Diff for main.js ```diff @@ -69,6 +69,16 @@ __webpack_require__("cHUd")('Map'); /***/ }), +/***/ "0tVQ": +/***/ (function(module, exports, __webpack_require__) { + +__webpack_require__("FlQf"); +__webpack_require__("VJsP"); +module.exports = __webpack_require__("WEpk").Array.from; + + +/***/ }), + /***/ "B9jh": /***/ (function(module, exports, __webpack_require__) { @@ -845,6 +855,22 @@ function _doRender() { /***/ }), +/***/ "IP1Z": +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + +var $defineProperty = __webpack_require__("2faE"); +var createDesc = __webpack_require__("rr1i"); + +module.exports = function (object, index, value) { + if (index in object) $defineProperty.f(object, index, createDesc(0, value)); + else object[index] = value; +}; + + +/***/ }), + /***/ "LX0d": /***/ (function(module, exports, __webpack_require__) { @@ -884,6 +910,51 @@ __webpack_require__("aPfg")('Set'); /***/ }), +/***/ "VJsP": +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + +var ctx = __webpack_require__("2GTP"); +var $export = __webpack_require__("Y7ZC"); +var toObject = __webpack_require__("JB68"); +var call = __webpack_require__("sNwI"); +var isArrayIter = __webpack_require__("NwJ3"); +var toLength = __webpack_require__("tEej"); +var createProperty = __webpack_require__("IP1Z"); +var getIterFn = __webpack_require__("fNZA"); + +$export($export.S + $export.F * !__webpack_require__("TuGD")(function (iter) { Array.from(iter); }), 'Array', { + // 22.1.2.1 Array.from(arrayLike, mapfn = undefined, thisArg = undefined) + from: function from(arrayLike /* , mapfn = undefined, thisArg = undefined */) { + var O = toObject(arrayLike); + var C = typeof this == 'function' ? this : Array; + var aLen = arguments.length; + var mapfn = aLen > 1 ? arguments[1] : undefined; + var mapping = mapfn !== undefined; + var index = 0; + var iterFn = getIterFn(O); + var length, result, step, iterator; + if (mapping) mapfn = ctx(mapfn, aLen > 2 ? arguments[2] : undefined, 2); + // if object isn't iterable or it's array with default iterator - use simple case + if (iterFn != undefined && !(C == Array && isArrayIter(iterFn))) { + for (iterator = iterFn.call(O), result = new C(); !(step = iterator.next()).done; index++) { + createProperty(result, index, mapping ? call(iterator, mapfn, [step.value, index], true) : step.value); + } + } else { + length = toLength(O.length); + for (result = new C(length); length > index; index++) { + createProperty(result, index, mapping ? mapfn(O[index], index) : O[index]); + } + } + result.length = index; + return result; + } +}); + + +/***/ }), + /***/ "XLbu": /***/ (function(module, exports, __webpack_require__) { @@ -951,6 +1022,13 @@ exports.DataManager = DataManager; /***/ }), +/***/ "d04V": +/***/ (function(module, exports, __webpack_require__) { + +module.exports = __webpack_require__("0tVQ"); + +/***/ }), + /***/ "dL40": /***/ (function(module, exports, __webpack_require__) { @@ -1076,6 +1154,8 @@ exports["default"] = void 0; var _asyncToGenerator2 = _interopRequireDefault(__webpack_require__("+oT+")); +var _from = _interopRequireDefault(__webpack_require__("d04V")); + var _promise = _interopRequireDefault(__webpack_require__("eVuF")); var _set = _interopRequireDefault(__webpack_require__("ttDY")); @@ -1083,7 +1163,7 @@ var _set = _interopRequireDefault(__webpack_require__("ttDY")); var _mitt = _interopRequireDefault(__webpack_require__("kiME")); var _unfetch = _interopRequireDefault(__webpack_require__("m/Gl")); -/* global document */ +/* global document, window */ // smaller version of https://gist.github.com/igrigorik/a02f2359f3bc50ca7a9c @@ -1165,15 +1245,40 @@ function () { if (document.getElementById("__NEXT_PAGE__" + route)) { return; - } // Load the script if not asked to load yet. - + } if (!_this3.loadingRoutes[route]) { - _this3.loadScript(route); + // Make sure we don't load a dependency that's already loaded + var loadedModules = new _set["default"]((0, _from["default"])(document.getElementsByTagName('script'), function (el) { + var results = /\/_next\/[^?]*/g.exec(el.src); + return results ? results[0] : el.src; + })); + var deps = _this3.getDependencies(route); + + var urlsToLoad = deps.filter(function (url) { + return !loadedModules.has(url); + }); _this3.loadingRoutes[route] = true; + urlsToLoad.forEach(function (url) { + return _this3.loadScript(url, route); + }); + + _this3.loadRoute(route); } }); + } // Retrieve a list of dependencies for a given route from the build manifest + + }, { + key: "getDependencies", + value: function getDependencies(route) { + if (!window.__BUILD_MANIFEST || !window.__BUILD_MANIFEST.pages[route]) { + return []; + } + + return window.__BUILD_MANIFEST.pages[route].map(function (url) { + return '/_next/' + url; + }); } }, { key: "onDynamicBuildId", @@ -1201,14 +1306,14 @@ function () { }); } }, { - key: "loadScript", - value: function loadScript(route) { + key: "loadRoute", + value: function loadRoute(route) { var _this = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee() { - var scriptRoute, script, url; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee$(_context) { while (1) { switch (_context.prev = _context.next) { @@ -1219,38 +1324,47 @@ function () { case 2: route = _this.normalizeRoute(route); scriptRoute = route === '/' ? '/index.js' : route + ".js"; - script = document.createElement('script'); - - if (false) {} - url = _this.assetPrefix + "/_next/static/" + encodeURIComponent(_this.buildId) + "/pages" + scriptRoute; - script.crossOrigin = undefined; - script.src = url; - script.onerror = function () { - var error = new Error("Error loading script " + url); - error.code = 'PAGE_LOAD_ERROR'; + _this.loadScript(url, route); - _this.pageRegisterEvents.emit(route, { - error: error - }); - }; - - document.body.appendChild(script); - - case 11: + case 6: case "end": return _context.stop(); } } }, _callee); }))(); + } + }, { + key: "loadScript", + value: function loadScript(url, route) { + var _this5 = this; + + var script = document.createElement('script'); + + if (false) {} + + script.crossOrigin = undefined; + script.src = url; + script.async = false; // Explicit async = false required for in-order execution + + script.onerror = function () { + var error = new Error("Error loading script " + url); + error.code = 'PAGE_LOAD_ERROR'; + + _this5.pageRegisterEvents.emit(route, { + error: error + }); + }; + + document.body.appendChild(script); } // This method if called by the route code. }, { key: "registerPage", value: function registerPage(route, regFn) { - var _this5 = this; + var _this6 = this; var register = function register() { try { @@ -1258,21 +1372,21 @@ function () { error = _regFn.error, page = _regFn.page; - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error, page: page }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error, page: page }); } catch (error) { - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error }); } @@ -1284,13 +1398,13 @@ function () { } }, { key: "prefetch", - value: function prefetch(route) { + value: function prefetch(route, isDependency) { var _this2 = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee2() { - var scriptRoute, link; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee2$(_context2) { while (1) { switch (_context2.prev = _context2.next) { @@ -1325,32 +1439,47 @@ function () { return _context2.abrupt("return"); case 9: + if (!isDependency) { + _this2.getDependencies(route).forEach(function (url) { + _this2.prefetch(url, true); + }); + } // Feature detection is used to see if preload is supported + // If not fall back to loading script tags before the page is loaded + // https://caniuse.com/#feat=link-rel-preload + + if (!hasPreload) { - _context2.next = 19; + _context2.next = 16; break; } - _context2.next = 12; + _context2.next = 13; return _this2.promisedBuildId; - case 12: - link = document.createElement('link'); - link.rel = 'preload'; - link.crossOrigin = undefined; - link.href = _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; - link.as = 'script'; - document.head.appendChild(link); + case 13: + url = isDependency ? route : _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; + + _this2.createPreloadLink(url); + + return _context2.abrupt("return"); + + case 16: + if (!isDependency) { + _context2.next = 18; + break; + } + return _context2.abrupt("return"); - case 19: + case 18: if (!(document.readyState === 'complete')) { - _context2.next = 23; + _context2.next = 22; break; } return _context2.abrupt("return", _this2.loadPage(route)["catch"](function () {})); - case 23: + case 22: return _context2.abrupt("return", new _promise["default"](function (resolve) { window.addEventListener('load', function () { _this2.loadPage(route).then(function () { @@ -1361,7 +1490,7 @@ function () { }); })); - case 24: + case 23: case "end": return _context2.stop(); } @@ -1370,6 +1499,16 @@ function () { }))(); } }, { + key: "createPreloadLink", + value: function createPreloadLink(url) { + var link = document.createElement('link'); + link.rel = 'preload'; + link.crossOrigin = undefined; + link.href = url; + link.as = 'script'; + document.head.appendChild(link); + } + }, { key: "clearCache", value: function clearCache(route) { route = this.normalizeRoute(route); ```
github-actions[bot] commented 5 years ago

Stats from current PR

Click to expand stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 13.6s | 13.5s | -85ms | | `node_modules` Size | 45.9 MB | 45.9 MB | ⚠️ +7.36 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 208 kB | ⚠️ +1.49 kB | | Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 68.4 kB | ⚠️ +623 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 15.4 kB | 16.9 kB | ⚠️ +1.49 kB | | Client `main` gzip Size | 5.33 kB | 5.95 kB | ⚠️ +623 B | | Client `commons` Size | 188 kB | 188 kB | ✓ | | Client `commons` gzip Size | 61.1 kB | 61.1 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Base Rendered Size | 1.35 kB | 1.35 kB | ✓ | | Build Dir Size | 705 kB | 710 kB | ⚠️ +4.87 kB |
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 14.7s | 15.1s | ⚠️ +397ms | | `node_modules` Size | 45.9 MB | 45.9 MB | ⚠️ +7.36 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 208 kB | ⚠️ +1.49 kB | | Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 68.4 kB | ⚠️ +623 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 15.4 kB | 16.9 kB | ⚠️ +1.49 kB | | Client `main` gzip Size | 5.33 kB | 5.95 kB | ⚠️ +623 B | | Client `commons` Size | 188 kB | 188 kB | ✓ | | Client `commons` gzip Size | 61.1 kB | 61.1 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Serverless `pages/link` Size | 252 kB | 252 kB | ✓ | | Serverless `pages/link` gzip Size | 68 kB | 68 kB | -5 B | | Serverless `pages/index` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/index` gzip Size | 65.8 kB | 65.8 kB | -4 B | | Serverless `pages/_error` Size | 244 kB | 244 kB | ✓ | | Serverless `pages/_error` gzip Size | 65.5 kB | 65.5 kB | -4 B | | Serverless `pages/routerDirect` Size | 246 kB | 246 kB | ✓ | | Serverless `pages/routerDirect` gzip Size | 65.7 kB | 65.7 kB | -2 B | | Serverless `pages/withRouter` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/withRouter` gzip Size | 65.9 kB | 65.9 kB | -3 B | | Build Dir Size | 1.89 MB | 1.9 MB | ⚠️ +4.87 kB |
Diff for main.js ```diff @@ -69,6 +69,16 @@ __webpack_require__("cHUd")('Map'); /***/ }), +/***/ "0tVQ": +/***/ (function(module, exports, __webpack_require__) { + +__webpack_require__("FlQf"); +__webpack_require__("VJsP"); +module.exports = __webpack_require__("WEpk").Array.from; + + +/***/ }), + /***/ "B9jh": /***/ (function(module, exports, __webpack_require__) { @@ -845,6 +855,22 @@ function _doRender() { /***/ }), +/***/ "IP1Z": +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + +var $defineProperty = __webpack_require__("2faE"); +var createDesc = __webpack_require__("rr1i"); + +module.exports = function (object, index, value) { + if (index in object) $defineProperty.f(object, index, createDesc(0, value)); + else object[index] = value; +}; + + +/***/ }), + /***/ "LX0d": /***/ (function(module, exports, __webpack_require__) { @@ -884,6 +910,51 @@ __webpack_require__("aPfg")('Set'); /***/ }), +/***/ "VJsP": +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + +var ctx = __webpack_require__("2GTP"); +var $export = __webpack_require__("Y7ZC"); +var toObject = __webpack_require__("JB68"); +var call = __webpack_require__("sNwI"); +var isArrayIter = __webpack_require__("NwJ3"); +var toLength = __webpack_require__("tEej"); +var createProperty = __webpack_require__("IP1Z"); +var getIterFn = __webpack_require__("fNZA"); + +$export($export.S + $export.F * !__webpack_require__("TuGD")(function (iter) { Array.from(iter); }), 'Array', { + // 22.1.2.1 Array.from(arrayLike, mapfn = undefined, thisArg = undefined) + from: function from(arrayLike /* , mapfn = undefined, thisArg = undefined */) { + var O = toObject(arrayLike); + var C = typeof this == 'function' ? this : Array; + var aLen = arguments.length; + var mapfn = aLen > 1 ? arguments[1] : undefined; + var mapping = mapfn !== undefined; + var index = 0; + var iterFn = getIterFn(O); + var length, result, step, iterator; + if (mapping) mapfn = ctx(mapfn, aLen > 2 ? arguments[2] : undefined, 2); + // if object isn't iterable or it's array with default iterator - use simple case + if (iterFn != undefined && !(C == Array && isArrayIter(iterFn))) { + for (iterator = iterFn.call(O), result = new C(); !(step = iterator.next()).done; index++) { + createProperty(result, index, mapping ? call(iterator, mapfn, [step.value, index], true) : step.value); + } + } else { + length = toLength(O.length); + for (result = new C(length); length > index; index++) { + createProperty(result, index, mapping ? mapfn(O[index], index) : O[index]); + } + } + result.length = index; + return result; + } +}); + + +/***/ }), + /***/ "XLbu": /***/ (function(module, exports, __webpack_require__) { @@ -951,6 +1022,13 @@ exports.DataManager = DataManager; /***/ }), +/***/ "d04V": +/***/ (function(module, exports, __webpack_require__) { + +module.exports = __webpack_require__("0tVQ"); + +/***/ }), + /***/ "dL40": /***/ (function(module, exports, __webpack_require__) { @@ -1076,6 +1154,8 @@ exports["default"] = void 0; var _asyncToGenerator2 = _interopRequireDefault(__webpack_require__("+oT+")); +var _from = _interopRequireDefault(__webpack_require__("d04V")); + var _promise = _interopRequireDefault(__webpack_require__("eVuF")); var _set = _interopRequireDefault(__webpack_require__("ttDY")); @@ -1083,7 +1163,7 @@ var _set = _interopRequireDefault(__webpack_require__("ttDY")); var _mitt = _interopRequireDefault(__webpack_require__("kiME")); var _unfetch = _interopRequireDefault(__webpack_require__("m/Gl")); -/* global document */ +/* global document, window */ // smaller version of https://gist.github.com/igrigorik/a02f2359f3bc50ca7a9c @@ -1099,6 +1179,15 @@ function supportsPreload(list) { } } +function createPreloadLink(url) { + var link = document.createElement('link'); + link.rel = 'preload'; + link.crossOrigin = undefined; + link.href = url; + link.as = 'script'; + document.head.appendChild(link); +} + var hasPreload = supportsPreload(document.createElement('link').relList); var PageLoader = @@ -1165,15 +1254,40 @@ function () { if (document.getElementById("__NEXT_PAGE__" + route)) { return; - } // Load the script if not asked to load yet. - + } if (!_this3.loadingRoutes[route]) { - _this3.loadScript(route); + // Make sure we don't load a dependency that's already loaded + var loadedModules = new _set["default"]((0, _from["default"])(document.getElementsByTagName('script'), function (el) { + var results = /\/_next\/[^?]*/g.exec(el.src); + return results ? results[0] : el.src; + })); + + var deps = _this3.getDependencies(route); + var urlsToLoad = deps.filter(function (url) { + return !loadedModules.has(url); + }); _this3.loadingRoutes[route] = true; + urlsToLoad.forEach(function (url) { + return _this3.loadScript(url, route); + }); + + _this3.loadRoute(route); } }); + } // Retrieve a list of dependencies for a given route from the build manifest + + }, { + key: "getDependencies", + value: function getDependencies(route) { + if (!window.__BUILD_MANIFEST || !window.__BUILD_MANIFEST.pages[route]) { + return []; + } + + return window.__BUILD_MANIFEST.pages[route].map(function (url) { + return '/_next/' + url; + }); } }, { key: "onDynamicBuildId", @@ -1201,14 +1315,14 @@ function () { }); } }, { - key: "loadScript", - value: function loadScript(route) { + key: "loadRoute", + value: function loadRoute(route) { var _this = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee() { - var scriptRoute, script, url; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee$(_context) { while (1) { switch (_context.prev = _context.next) { @@ -1219,38 +1333,47 @@ function () { case 2: route = _this.normalizeRoute(route); scriptRoute = route === '/' ? '/index.js' : route + ".js"; - script = document.createElement('script'); - - if (false) {} - url = _this.assetPrefix + "/_next/static/" + encodeURIComponent(_this.buildId) + "/pages" + scriptRoute; - script.crossOrigin = undefined; - script.src = url; - - script.onerror = function () { - var error = new Error("Error loading script " + url); - error.code = 'PAGE_LOAD_ERROR'; - _this.pageRegisterEvents.emit(route, { - error: error - }); - }; - - document.body.appendChild(script); + _this.loadScript(url, route); - case 11: + case 6: case "end": return _context.stop(); } } }, _callee); }))(); + } + }, { + key: "loadScript", + value: function loadScript(url, route) { + var _this5 = this; + + var script = document.createElement('script'); + + if (false) {} + + script.crossOrigin = undefined; + script.src = url; + script.async = false; // Explicit async = false required for in-order execution + + script.onerror = function () { + var error = new Error("Error loading script " + url); + error.code = 'PAGE_LOAD_ERROR'; + + _this5.pageRegisterEvents.emit(route, { + error: error + }); + }; + + document.body.appendChild(script); } // This method if called by the route code. }, { key: "registerPage", value: function registerPage(route, regFn) { - var _this5 = this; + var _this6 = this; var register = function register() { try { @@ -1258,21 +1381,21 @@ function () { error = _regFn.error, page = _regFn.page; - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error, page: page }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error, page: page }); } catch (error) { - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error }); } @@ -1284,13 +1407,13 @@ function () { } }, { key: "prefetch", - value: function prefetch(route) { + value: function prefetch(route, isDependency) { var _this2 = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee2() { - var scriptRoute, link; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee2$(_context2) { while (1) { switch (_context2.prev = _context2.next) { @@ -1325,32 +1448,45 @@ function () { return _context2.abrupt("return"); case 9: + if (!isDependency) { + _this2.getDependencies(route).forEach(function (url) { + _this2.prefetch(url, true); + }); + } // Feature detection is used to see if preload is supported + // If not fall back to loading script tags before the page is loaded + // https://caniuse.com/#feat=link-rel-preload + + if (!hasPreload) { - _context2.next = 19; + _context2.next = 16; break; } - _context2.next = 12; + _context2.next = 13; return _this2.promisedBuildId; - case 12: - link = document.createElement('link'); - link.rel = 'preload'; - link.crossOrigin = undefined; - link.href = _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; - link.as = 'script'; - document.head.appendChild(link); + case 13: + url = isDependency ? route : _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; + createPreloadLink(url); + return _context2.abrupt("return"); + + case 16: + if (!isDependency) { + _context2.next = 18; + break; + } + return _context2.abrupt("return"); - case 19: + case 18: if (!(document.readyState === 'complete')) { - _context2.next = 23; + _context2.next = 22; break; } return _context2.abrupt("return", _this2.loadPage(route)["catch"](function () {})); - case 23: + case 22: return _context2.abrupt("return", new _promise["default"](function (resolve) { window.addEventListener('load', function () { _this2.loadPage(route).then(function () { @@ -1361,7 +1497,7 @@ function () { }); })); - case 24: + case 23: case "end": return _context2.stop(); } ```
github-actions[bot] commented 5 years ago

Stats from current PR

Click to expand stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 13.1s | 13s | -71ms | | `node_modules` Size | 45.9 MB | 45.9 MB | ⚠️ +7.34 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 208 kB | ⚠️ +1.43 kB | | Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 68.4 kB | ⚠️ +612 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 15.4 kB | 16.8 kB | ⚠️ +1.43 kB | | Client `main` gzip Size | 5.33 kB | 5.94 kB | ⚠️ +612 B | | Client `commons` Size | 188 kB | 188 kB | ✓ | | Client `commons` gzip Size | 61.1 kB | 61.1 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Base Rendered Size | 1.35 kB | 1.35 kB | ✓ | | Build Dir Size | 705 kB | 709 kB | ⚠️ +4.66 kB |
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 13.9s | 13.7s | -196ms | | `node_modules` Size | 45.9 MB | 45.9 MB | ⚠️ +7.34 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 208 kB | ⚠️ +1.43 kB | | Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 68.4 kB | ⚠️ +612 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 15.4 kB | 16.8 kB | ⚠️ +1.43 kB | | Client `main` gzip Size | 5.33 kB | 5.94 kB | ⚠️ +612 B | | Client `commons` Size | 188 kB | 188 kB | ✓ | | Client `commons` gzip Size | 61.1 kB | 61.1 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Serverless `pages/link` Size | 252 kB | 252 kB | ✓ | | Serverless `pages/link` gzip Size | 68 kB | 68 kB | -1 B | | Serverless `pages/index` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/index` gzip Size | 65.8 kB | 65.8 kB | -1 B | | Serverless `pages/_error` Size | 244 kB | 244 kB | ✓ | | Serverless `pages/_error` gzip Size | 65.5 kB | 65.5 kB | ✓ | | Serverless `pages/routerDirect` Size | 246 kB | 246 kB | ✓ | | Serverless `pages/routerDirect` gzip Size | 65.7 kB | 65.7 kB | -1 B | | Serverless `pages/withRouter` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/withRouter` gzip Size | 65.9 kB | 65.9 kB | ✓ | | Build Dir Size | 1.89 MB | 1.9 MB | ⚠️ +4.66 kB |
Diff for main.js ```diff @@ -69,6 +69,16 @@ __webpack_require__("cHUd")('Map'); /***/ }), +/***/ "0tVQ": +/***/ (function(module, exports, __webpack_require__) { + +__webpack_require__("FlQf"); +__webpack_require__("VJsP"); +module.exports = __webpack_require__("WEpk").Array.from; + + +/***/ }), + /***/ "B9jh": /***/ (function(module, exports, __webpack_require__) { @@ -845,6 +855,22 @@ function _doRender() { /***/ }), +/***/ "IP1Z": +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + +var $defineProperty = __webpack_require__("2faE"); +var createDesc = __webpack_require__("rr1i"); + +module.exports = function (object, index, value) { + if (index in object) $defineProperty.f(object, index, createDesc(0, value)); + else object[index] = value; +}; + + +/***/ }), + /***/ "LX0d": /***/ (function(module, exports, __webpack_require__) { @@ -884,6 +910,51 @@ __webpack_require__("aPfg")('Set'); /***/ }), +/***/ "VJsP": +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + +var ctx = __webpack_require__("2GTP"); +var $export = __webpack_require__("Y7ZC"); +var toObject = __webpack_require__("JB68"); +var call = __webpack_require__("sNwI"); +var isArrayIter = __webpack_require__("NwJ3"); +var toLength = __webpack_require__("tEej"); +var createProperty = __webpack_require__("IP1Z"); +var getIterFn = __webpack_require__("fNZA"); + +$export($export.S + $export.F * !__webpack_require__("TuGD")(function (iter) { Array.from(iter); }), 'Array', { + // 22.1.2.1 Array.from(arrayLike, mapfn = undefined, thisArg = undefined) + from: function from(arrayLike /* , mapfn = undefined, thisArg = undefined */) { + var O = toObject(arrayLike); + var C = typeof this == 'function' ? this : Array; + var aLen = arguments.length; + var mapfn = aLen > 1 ? arguments[1] : undefined; + var mapping = mapfn !== undefined; + var index = 0; + var iterFn = getIterFn(O); + var length, result, step, iterator; + if (mapping) mapfn = ctx(mapfn, aLen > 2 ? arguments[2] : undefined, 2); + // if object isn't iterable or it's array with default iterator - use simple case + if (iterFn != undefined && !(C == Array && isArrayIter(iterFn))) { + for (iterator = iterFn.call(O), result = new C(); !(step = iterator.next()).done; index++) { + createProperty(result, index, mapping ? call(iterator, mapfn, [step.value, index], true) : step.value); + } + } else { + length = toLength(O.length); + for (result = new C(length); length > index; index++) { + createProperty(result, index, mapping ? mapfn(O[index], index) : O[index]); + } + } + result.length = index; + return result; + } +}); + + +/***/ }), + /***/ "XLbu": /***/ (function(module, exports, __webpack_require__) { @@ -951,6 +1022,13 @@ exports.DataManager = DataManager; /***/ }), +/***/ "d04V": +/***/ (function(module, exports, __webpack_require__) { + +module.exports = __webpack_require__("0tVQ"); + +/***/ }), + /***/ "dL40": /***/ (function(module, exports, __webpack_require__) { @@ -1076,6 +1154,8 @@ exports["default"] = void 0; var _asyncToGenerator2 = _interopRequireDefault(__webpack_require__("+oT+")); +var _from = _interopRequireDefault(__webpack_require__("d04V")); + var _promise = _interopRequireDefault(__webpack_require__("eVuF")); var _set = _interopRequireDefault(__webpack_require__("ttDY")); @@ -1083,7 +1163,7 @@ var _set = _interopRequireDefault(__webpack_require__("ttDY")); var _mitt = _interopRequireDefault(__webpack_require__("kiME")); var _unfetch = _interopRequireDefault(__webpack_require__("m/Gl")); -/* global document */ +/* global document, window */ // smaller version of https://gist.github.com/igrigorik/a02f2359f3bc50ca7a9c @@ -1099,7 +1179,26 @@ function supportsPreload(list) { } } -var hasPreload = supportsPreload(document.createElement('link').relList); +function createPreloadLink(url) { + var link = document.createElement('link'); + link.rel = 'preload'; + link.crossOrigin = undefined; + link.href = url; + link.as = 'script'; + document.head.appendChild(link); +} + +var hasPreload = supportsPreload(document.createElement('link').relList); // Retrieve a list of dependencies for a given route from the build manifest + +function getDependencies(route) { + if (!window.__BUILD_MANIFEST || !window.__BUILD_MANIFEST.pages[route]) { + return []; + } + + return window.__BUILD_MANIFEST.pages[route].map(function (url) { + return '/_next/' + url; + }); +} var PageLoader = /*#__PURE__*/ @@ -1165,13 +1264,24 @@ function () { if (document.getElementById("__NEXT_PAGE__" + route)) { return; - } // Load the script if not asked to load yet. - + } if (!_this3.loadingRoutes[route]) { - _this3.loadScript(route); - + // Make sure we don't load a dependency that's already loaded + var loadedModules = new _set["default"]((0, _from["default"])(document.getElementsByTagName('script'), function (el) { + var results = /\/_next\/[^?]*/g.exec(el.src); + return results ? results[0] : el.src; + })); + var deps = getDependencies(route); + var urlsToLoad = deps.filter(function (url) { + return !loadedModules.has(url); + }); _this3.loadingRoutes[route] = true; + urlsToLoad.forEach(function (url) { + return _this3.loadScript(url, route); + }); + + _this3.loadRoute(route); } }); } @@ -1201,14 +1311,14 @@ function () { }); } }, { - key: "loadScript", - value: function loadScript(route) { + key: "loadRoute", + value: function loadRoute(route) { var _this = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee() { - var scriptRoute, script, url; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee$(_context) { while (1) { switch (_context.prev = _context.next) { @@ -1219,38 +1329,47 @@ function () { case 2: route = _this.normalizeRoute(route); scriptRoute = route === '/' ? '/index.js' : route + ".js"; - script = document.createElement('script'); - - if (false) {} - url = _this.assetPrefix + "/_next/static/" + encodeURIComponent(_this.buildId) + "/pages" + scriptRoute; - script.crossOrigin = undefined; - script.src = url; - - script.onerror = function () { - var error = new Error("Error loading script " + url); - error.code = 'PAGE_LOAD_ERROR'; - - _this.pageRegisterEvents.emit(route, { - error: error - }); - }; - document.body.appendChild(script); + _this.loadScript(url, route); - case 11: + case 6: case "end": return _context.stop(); } } }, _callee); }))(); + } + }, { + key: "loadScript", + value: function loadScript(url, route) { + var _this5 = this; + + var script = document.createElement('script'); + + if (false) {} + + script.crossOrigin = undefined; + script.src = url; + script.async = false; // Explicit async = false required for in-order execution + + script.onerror = function () { + var error = new Error("Error loading script " + url); + error.code = 'PAGE_LOAD_ERROR'; + + _this5.pageRegisterEvents.emit(route, { + error: error + }); + }; + + document.body.appendChild(script); } // This method if called by the route code. }, { key: "registerPage", value: function registerPage(route, regFn) { - var _this5 = this; + var _this6 = this; var register = function register() { try { @@ -1258,21 +1377,21 @@ function () { error = _regFn.error, page = _regFn.page; - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error, page: page }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error, page: page }); } catch (error) { - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error }); } @@ -1284,13 +1403,13 @@ function () { } }, { key: "prefetch", - value: function prefetch(route) { + value: function prefetch(route, isDependency) { var _this2 = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee2() { - var scriptRoute, link; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee2$(_context2) { while (1) { switch (_context2.prev = _context2.next) { @@ -1325,32 +1444,45 @@ function () { return _context2.abrupt("return"); case 9: + if (!isDependency) { + getDependencies(route).forEach(function (url) { + _this2.prefetch(url, true); + }); + } // Feature detection is used to see if preload is supported + // If not fall back to loading script tags before the page is loaded + // https://caniuse.com/#feat=link-rel-preload + + if (!hasPreload) { - _context2.next = 19; + _context2.next = 16; break; } - _context2.next = 12; + _context2.next = 13; return _this2.promisedBuildId; - case 12: - link = document.createElement('link'); - link.rel = 'preload'; - link.crossOrigin = undefined; - link.href = _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; - link.as = 'script'; - document.head.appendChild(link); + case 13: + url = isDependency ? route : _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; + createPreloadLink(url); return _context2.abrupt("return"); - case 19: + case 16: + if (!isDependency) { + _context2.next = 18; + break; + } + + return _context2.abrupt("return"); + + case 18: if (!(document.readyState === 'complete')) { - _context2.next = 23; + _context2.next = 22; break; } return _context2.abrupt("return", _this2.loadPage(route)["catch"](function () {})); - case 23: + case 22: return _context2.abrupt("return", new _promise["default"](function (resolve) { window.addEventListener('load', function () { _this2.loadPage(route).then(function () { @@ -1361,7 +1493,7 @@ function () { }); })); - case 24: + case 23: case "end": return _context2.stop(); } ```
github-actions[bot] commented 5 years ago

Stats from current PR

Click to expand stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 14s | 13.8s | -252ms | | `node_modules` Size | 45.9 MB | 45.9 MB | ⚠️ +7.34 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 208 kB | ⚠️ +1.43 kB | | Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 68.4 kB | ⚠️ +614 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 15.4 kB | 16.8 kB | ⚠️ +1.43 kB | | Client `main` gzip Size | 5.33 kB | 5.94 kB | ⚠️ +614 B | | Client `commons` Size | 188 kB | 188 kB | ✓ | | Client `commons` gzip Size | 61.1 kB | 61.1 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Base Rendered Size | 1.35 kB | 1.35 kB | ✓ | | Build Dir Size | 705 kB | 709 kB | ⚠️ +4.66 kB |
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 15.1s | 15.3s | ⚠️ +215ms | | `node_modules` Size | 45.9 MB | 45.9 MB | ⚠️ +7.34 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 208 kB | ⚠️ +1.43 kB | | Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 68.4 kB | ⚠️ +614 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 15.4 kB | 16.8 kB | ⚠️ +1.43 kB | | Client `main` gzip Size | 5.33 kB | 5.94 kB | ⚠️ +614 B | | Client `commons` Size | 188 kB | 188 kB | ✓ | | Client `commons` gzip Size | 61.1 kB | 61.1 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Serverless `pages/link` Size | 252 kB | 252 kB | ✓ | | Serverless `pages/link` gzip Size | 68 kB | 68 kB | ⚠️ +1 B | | Serverless `pages/index` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/index` gzip Size | 65.8 kB | 65.8 kB | ⚠️ +1 B | | Serverless `pages/_error` Size | 244 kB | 244 kB | ✓ | | Serverless `pages/_error` gzip Size | 65.5 kB | 65.5 kB | ⚠️ +1 B | | Serverless `pages/routerDirect` Size | 246 kB | 246 kB | ✓ | | Serverless `pages/routerDirect` gzip Size | 65.7 kB | 65.7 kB | ⚠️ +1 B | | Serverless `pages/withRouter` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/withRouter` gzip Size | 65.9 kB | 65.9 kB | ⚠️ +1 B | | Build Dir Size | 1.89 MB | 1.9 MB | ⚠️ +4.66 kB |
Diff for main.js ```diff @@ -69,6 +69,16 @@ __webpack_require__("cHUd")('Map'); /***/ }), +/***/ "0tVQ": +/***/ (function(module, exports, __webpack_require__) { + +__webpack_require__("FlQf"); +__webpack_require__("VJsP"); +module.exports = __webpack_require__("WEpk").Array.from; + + +/***/ }), + /***/ "B9jh": /***/ (function(module, exports, __webpack_require__) { @@ -845,6 +855,22 @@ function _doRender() { /***/ }), +/***/ "IP1Z": +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + +var $defineProperty = __webpack_require__("2faE"); +var createDesc = __webpack_require__("rr1i"); + +module.exports = function (object, index, value) { + if (index in object) $defineProperty.f(object, index, createDesc(0, value)); + else object[index] = value; +}; + + +/***/ }), + /***/ "LX0d": /***/ (function(module, exports, __webpack_require__) { @@ -884,6 +910,51 @@ __webpack_require__("aPfg")('Set'); /***/ }), +/***/ "VJsP": +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + +var ctx = __webpack_require__("2GTP"); +var $export = __webpack_require__("Y7ZC"); +var toObject = __webpack_require__("JB68"); +var call = __webpack_require__("sNwI"); +var isArrayIter = __webpack_require__("NwJ3"); +var toLength = __webpack_require__("tEej"); +var createProperty = __webpack_require__("IP1Z"); +var getIterFn = __webpack_require__("fNZA"); + +$export($export.S + $export.F * !__webpack_require__("TuGD")(function (iter) { Array.from(iter); }), 'Array', { + // 22.1.2.1 Array.from(arrayLike, mapfn = undefined, thisArg = undefined) + from: function from(arrayLike /* , mapfn = undefined, thisArg = undefined */) { + var O = toObject(arrayLike); + var C = typeof this == 'function' ? this : Array; + var aLen = arguments.length; + var mapfn = aLen > 1 ? arguments[1] : undefined; + var mapping = mapfn !== undefined; + var index = 0; + var iterFn = getIterFn(O); + var length, result, step, iterator; + if (mapping) mapfn = ctx(mapfn, aLen > 2 ? arguments[2] : undefined, 2); + // if object isn't iterable or it's array with default iterator - use simple case + if (iterFn != undefined && !(C == Array && isArrayIter(iterFn))) { + for (iterator = iterFn.call(O), result = new C(); !(step = iterator.next()).done; index++) { + createProperty(result, index, mapping ? call(iterator, mapfn, [step.value, index], true) : step.value); + } + } else { + length = toLength(O.length); + for (result = new C(length); length > index; index++) { + createProperty(result, index, mapping ? mapfn(O[index], index) : O[index]); + } + } + result.length = index; + return result; + } +}); + + +/***/ }), + /***/ "XLbu": /***/ (function(module, exports, __webpack_require__) { @@ -951,6 +1022,13 @@ exports.DataManager = DataManager; /***/ }), +/***/ "d04V": +/***/ (function(module, exports, __webpack_require__) { + +module.exports = __webpack_require__("0tVQ"); + +/***/ }), + /***/ "dL40": /***/ (function(module, exports, __webpack_require__) { @@ -1076,6 +1154,8 @@ exports["default"] = void 0; var _asyncToGenerator2 = _interopRequireDefault(__webpack_require__("+oT+")); +var _from = _interopRequireDefault(__webpack_require__("d04V")); + var _promise = _interopRequireDefault(__webpack_require__("eVuF")); var _set = _interopRequireDefault(__webpack_require__("ttDY")); @@ -1083,7 +1163,7 @@ var _set = _interopRequireDefault(__webpack_require__("ttDY")); var _mitt = _interopRequireDefault(__webpack_require__("kiME")); var _unfetch = _interopRequireDefault(__webpack_require__("m/Gl")); -/* global document */ +/* global document, window */ // smaller version of https://gist.github.com/igrigorik/a02f2359f3bc50ca7a9c @@ -1101,6 +1181,26 @@ function supportsPreload(list) { var hasPreload = supportsPreload(document.createElement('link').relList); +function createPreloadLink(url) { + var link = document.createElement('link'); + link.rel = 'preload'; + link.crossOrigin = undefined; + link.href = url; + link.as = 'script'; + document.head.appendChild(link); +} // Retrieve a list of dependencies for a given route from the build manifest + + +function getDependencies(route) { + if (!window.__BUILD_MANIFEST || !window.__BUILD_MANIFEST.pages[route]) { + return []; + } + + return window.__BUILD_MANIFEST.pages[route].map(function (url) { + return '/_next/' + url; + }); +} + var PageLoader = /*#__PURE__*/ function () { @@ -1165,13 +1265,24 @@ function () { if (document.getElementById("__NEXT_PAGE__" + route)) { return; - } // Load the script if not asked to load yet. - + } if (!_this3.loadingRoutes[route]) { - _this3.loadScript(route); - + // Make sure we don't load a dependency that's already loaded + var loadedModules = new _set["default"]((0, _from["default"])(document.getElementsByTagName('script'), function (el) { + var results = /\/_next\/[^?]*/g.exec(el.src); + return results ? results[0] : el.src; + })); + var deps = getDependencies(route); + var urlsToLoad = deps.filter(function (url) { + return !loadedModules.has(url); + }); _this3.loadingRoutes[route] = true; + urlsToLoad.forEach(function (url) { + return _this3.loadScript(url, route); + }); + + _this3.loadRoute(route); } }); } @@ -1201,14 +1312,14 @@ function () { }); } }, { - key: "loadScript", - value: function loadScript(route) { + key: "loadRoute", + value: function loadRoute(route) { var _this = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee() { - var scriptRoute, script, url; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee$(_context) { while (1) { switch (_context.prev = _context.next) { @@ -1219,38 +1330,47 @@ function () { case 2: route = _this.normalizeRoute(route); scriptRoute = route === '/' ? '/index.js' : route + ".js"; - script = document.createElement('script'); - - if (false) {} - url = _this.assetPrefix + "/_next/static/" + encodeURIComponent(_this.buildId) + "/pages" + scriptRoute; - script.crossOrigin = undefined; - script.src = url; - - script.onerror = function () { - var error = new Error("Error loading script " + url); - error.code = 'PAGE_LOAD_ERROR'; - - _this.pageRegisterEvents.emit(route, { - error: error - }); - }; - document.body.appendChild(script); + _this.loadScript(url, route); - case 11: + case 6: case "end": return _context.stop(); } } }, _callee); }))(); + } + }, { + key: "loadScript", + value: function loadScript(url, route) { + var _this5 = this; + + var script = document.createElement('script'); + + if (false) {} + + script.crossOrigin = undefined; + script.src = url; + script.async = false; // Explicit async = false required for in-order execution + + script.onerror = function () { + var error = new Error("Error loading script " + url); + error.code = 'PAGE_LOAD_ERROR'; + + _this5.pageRegisterEvents.emit(route, { + error: error + }); + }; + + document.body.appendChild(script); } // This method if called by the route code. }, { key: "registerPage", value: function registerPage(route, regFn) { - var _this5 = this; + var _this6 = this; var register = function register() { try { @@ -1258,21 +1378,21 @@ function () { error = _regFn.error, page = _regFn.page; - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error, page: page }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error, page: page }); } catch (error) { - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error }); } @@ -1284,13 +1404,13 @@ function () { } }, { key: "prefetch", - value: function prefetch(route) { + value: function prefetch(route, isDependency) { var _this2 = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee2() { - var scriptRoute, link; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee2$(_context2) { while (1) { switch (_context2.prev = _context2.next) { @@ -1325,32 +1445,45 @@ function () { return _context2.abrupt("return"); case 9: + if (!isDependency) { + getDependencies(route).forEach(function (url) { + _this2.prefetch(url, true); + }); + } // Feature detection is used to see if preload is supported + // If not fall back to loading script tags before the page is loaded + // https://caniuse.com/#feat=link-rel-preload + + if (!hasPreload) { - _context2.next = 19; + _context2.next = 16; break; } - _context2.next = 12; + _context2.next = 13; return _this2.promisedBuildId; - case 12: - link = document.createElement('link'); - link.rel = 'preload'; - link.crossOrigin = undefined; - link.href = _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; - link.as = 'script'; - document.head.appendChild(link); + case 13: + url = isDependency ? route : _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; + createPreloadLink(url); return _context2.abrupt("return"); - case 19: + case 16: + if (!isDependency) { + _context2.next = 18; + break; + } + + return _context2.abrupt("return"); + + case 18: if (!(document.readyState === 'complete')) { - _context2.next = 23; + _context2.next = 22; break; } return _context2.abrupt("return", _this2.loadPage(route)["catch"](function () {})); - case 23: + case 22: return _context2.abrupt("return", new _promise["default"](function (resolve) { window.addEventListener('load', function () { _this2.loadPage(route).then(function () { @@ -1361,7 +1494,7 @@ function () { }); })); - case 24: + case 23: case "end": return _context2.stop(); } ```
github-actions[bot] commented 5 years ago

Stats from current PR

Click to expand stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 12.2s | 12.1s | -191ms | | `node_modules` Size | 45.9 MB | 45.9 MB | ⚠️ +7.34 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 208 kB | ⚠️ +1.43 kB | | Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 68.4 kB | ⚠️ +614 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 15.4 kB | 16.8 kB | ⚠️ +1.43 kB | | Client `main` gzip Size | 5.33 kB | 5.94 kB | ⚠️ +614 B | | Client `commons` Size | 188 kB | 188 kB | ✓ | | Client `commons` gzip Size | 61.1 kB | 61.1 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Base Rendered Size | 1.35 kB | 1.35 kB | ✓ | | Build Dir Size | 705 kB | 709 kB | ⚠️ +4.66 kB |
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 13.2s | 13.3s | ⚠️ +127ms | | `node_modules` Size | 45.9 MB | 45.9 MB | ⚠️ +7.34 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 208 kB | ⚠️ +1.43 kB | | Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 68.4 kB | ⚠️ +614 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ⚠️ +1 B | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 300 B | 301 B | ⚠️ +1 B | | Client `main` Size | 15.4 kB | 16.8 kB | ⚠️ +1.43 kB | | Client `main` gzip Size | 5.33 kB | 5.94 kB | ⚠️ +613 B | | Client `commons` Size | 188 kB | 188 kB | ✓ | | Client `commons` gzip Size | 61.1 kB | 61.1 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Serverless `pages/link` Size | 252 kB | 252 kB | ✓ | | Serverless `pages/link` gzip Size | 68 kB | 68 kB | ⚠️ +1 B | | Serverless `pages/index` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/index` gzip Size | 65.8 kB | 65.8 kB | ✓ | | Serverless `pages/_error` Size | 244 kB | 244 kB | ✓ | | Serverless `pages/_error` gzip Size | 65.5 kB | 65.5 kB | ⚠️ +1 B | | Serverless `pages/routerDirect` Size | 246 kB | 246 kB | ✓ | | Serverless `pages/routerDirect` gzip Size | 65.7 kB | 65.7 kB | ⚠️ +1 B | | Serverless `pages/withRouter` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/withRouter` gzip Size | 65.9 kB | 65.9 kB | ⚠️ +2 B | | Build Dir Size | 1.89 MB | 1.9 MB | ⚠️ +4.66 kB |
Diff for main.js ```diff @@ -1,4 +1,4 @@ -(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[2],{ +(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[8],{ /***/ "+iuc": /***/ (function(module, exports, __webpack_require__) { @@ -69,6 +69,16 @@ __webpack_require__("cHUd")('Map'); /***/ }), +/***/ "0tVQ": +/***/ (function(module, exports, __webpack_require__) { + +__webpack_require__("FlQf"); +__webpack_require__("VJsP"); +module.exports = __webpack_require__("WEpk").Array.from; + + +/***/ }), + /***/ "B9jh": /***/ (function(module, exports, __webpack_require__) { @@ -845,6 +855,22 @@ function _doRender() { /***/ }), +/***/ "IP1Z": +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + +var $defineProperty = __webpack_require__("2faE"); +var createDesc = __webpack_require__("rr1i"); + +module.exports = function (object, index, value) { + if (index in object) $defineProperty.f(object, index, createDesc(0, value)); + else object[index] = value; +}; + + +/***/ }), + /***/ "LX0d": /***/ (function(module, exports, __webpack_require__) { @@ -884,6 +910,51 @@ __webpack_require__("aPfg")('Set'); /***/ }), +/***/ "VJsP": +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + +var ctx = __webpack_require__("2GTP"); +var $export = __webpack_require__("Y7ZC"); +var toObject = __webpack_require__("JB68"); +var call = __webpack_require__("sNwI"); +var isArrayIter = __webpack_require__("NwJ3"); +var toLength = __webpack_require__("tEej"); +var createProperty = __webpack_require__("IP1Z"); +var getIterFn = __webpack_require__("fNZA"); + +$export($export.S + $export.F * !__webpack_require__("TuGD")(function (iter) { Array.from(iter); }), 'Array', { + // 22.1.2.1 Array.from(arrayLike, mapfn = undefined, thisArg = undefined) + from: function from(arrayLike /* , mapfn = undefined, thisArg = undefined */) { + var O = toObject(arrayLike); + var C = typeof this == 'function' ? this : Array; + var aLen = arguments.length; + var mapfn = aLen > 1 ? arguments[1] : undefined; + var mapping = mapfn !== undefined; + var index = 0; + var iterFn = getIterFn(O); + var length, result, step, iterator; + if (mapping) mapfn = ctx(mapfn, aLen > 2 ? arguments[2] : undefined, 2); + // if object isn't iterable or it's array with default iterator - use simple case + if (iterFn != undefined && !(C == Array && isArrayIter(iterFn))) { + for (iterator = iterFn.call(O), result = new C(); !(step = iterator.next()).done; index++) { + createProperty(result, index, mapping ? call(iterator, mapfn, [step.value, index], true) : step.value); + } + } else { + length = toLength(O.length); + for (result = new C(length); length > index; index++) { + createProperty(result, index, mapping ? mapfn(O[index], index) : O[index]); + } + } + result.length = index; + return result; + } +}); + + +/***/ }), + /***/ "XLbu": /***/ (function(module, exports, __webpack_require__) { @@ -951,6 +1022,13 @@ exports.DataManager = DataManager; /***/ }), +/***/ "d04V": +/***/ (function(module, exports, __webpack_require__) { + +module.exports = __webpack_require__("0tVQ"); + +/***/ }), + /***/ "dL40": /***/ (function(module, exports, __webpack_require__) { @@ -1076,6 +1154,8 @@ exports["default"] = void 0; var _asyncToGenerator2 = _interopRequireDefault(__webpack_require__("+oT+")); +var _from = _interopRequireDefault(__webpack_require__("d04V")); + var _promise = _interopRequireDefault(__webpack_require__("eVuF")); var _set = _interopRequireDefault(__webpack_require__("ttDY")); @@ -1083,7 +1163,7 @@ var _set = _interopRequireDefault(__webpack_require__("ttDY")); var _mitt = _interopRequireDefault(__webpack_require__("kiME")); var _unfetch = _interopRequireDefault(__webpack_require__("m/Gl")); -/* global document */ +/* global document, window */ // smaller version of https://gist.github.com/igrigorik/a02f2359f3bc50ca7a9c @@ -1101,6 +1181,26 @@ function supportsPreload(list) { var hasPreload = supportsPreload(document.createElement('link').relList); +function createPreloadLink(url) { + var link = document.createElement('link'); + link.rel = 'preload'; + link.crossOrigin = undefined; + link.href = url; + link.as = 'script'; + document.head.appendChild(link); +} // Retrieve a list of dependencies for a given route from the build manifest + + +function getDependencies(route) { + if (!window.__BUILD_MANIFEST || !window.__BUILD_MANIFEST.pages[route]) { + return []; + } + + return window.__BUILD_MANIFEST.pages[route].map(function (url) { + return '/_next/' + url; + }); +} + var PageLoader = /*#__PURE__*/ function () { @@ -1165,13 +1265,24 @@ function () { if (document.getElementById("__NEXT_PAGE__" + route)) { return; - } // Load the script if not asked to load yet. - + } if (!_this3.loadingRoutes[route]) { - _this3.loadScript(route); - + // Make sure we don't load a dependency that's already loaded + var loadedModules = new _set["default"]((0, _from["default"])(document.getElementsByTagName('script'), function (el) { + var results = /\/_next\/[^?]*/g.exec(el.src); + return results ? results[0] : el.src; + })); + var deps = getDependencies(route); + var urlsToLoad = deps.filter(function (url) { + return !loadedModules.has(url); + }); _this3.loadingRoutes[route] = true; + urlsToLoad.forEach(function (url) { + return _this3.loadScript(url, route); + }); + + _this3.loadRoute(route); } }); } @@ -1201,14 +1312,14 @@ function () { }); } }, { - key: "loadScript", - value: function loadScript(route) { + key: "loadRoute", + value: function loadRoute(route) { var _this = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee() { - var scriptRoute, script, url; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee$(_context) { while (1) { switch (_context.prev = _context.next) { @@ -1219,38 +1330,47 @@ function () { case 2: route = _this.normalizeRoute(route); scriptRoute = route === '/' ? '/index.js' : route + ".js"; - script = document.createElement('script'); - - if (false) {} - url = _this.assetPrefix + "/_next/static/" + encodeURIComponent(_this.buildId) + "/pages" + scriptRoute; - script.crossOrigin = undefined; - script.src = url; - - script.onerror = function () { - var error = new Error("Error loading script " + url); - error.code = 'PAGE_LOAD_ERROR'; - - _this.pageRegisterEvents.emit(route, { - error: error - }); - }; - document.body.appendChild(script); + _this.loadScript(url, route); - case 11: + case 6: case "end": return _context.stop(); } } }, _callee); }))(); + } + }, { + key: "loadScript", + value: function loadScript(url, route) { + var _this5 = this; + + var script = document.createElement('script'); + + if (false) {} + + script.crossOrigin = undefined; + script.src = url; + script.async = false; // Explicit async = false required for in-order execution + + script.onerror = function () { + var error = new Error("Error loading script " + url); + error.code = 'PAGE_LOAD_ERROR'; + + _this5.pageRegisterEvents.emit(route, { + error: error + }); + }; + + document.body.appendChild(script); } // This method if called by the route code. }, { key: "registerPage", value: function registerPage(route, regFn) { - var _this5 = this; + var _this6 = this; var register = function register() { try { @@ -1258,21 +1378,21 @@ function () { error = _regFn.error, page = _regFn.page; - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error, page: page }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error, page: page }); } catch (error) { - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error }); } @@ -1284,13 +1404,13 @@ function () { } }, { key: "prefetch", - value: function prefetch(route) { + value: function prefetch(route, isDependency) { var _this2 = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee2() { - var scriptRoute, link; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee2$(_context2) { while (1) { switch (_context2.prev = _context2.next) { @@ -1325,32 +1445,45 @@ function () { return _context2.abrupt("return"); case 9: + if (!isDependency) { + getDependencies(route).forEach(function (url) { + _this2.prefetch(url, true); + }); + } // Feature detection is used to see if preload is supported + // If not fall back to loading script tags before the page is loaded + // https://caniuse.com/#feat=link-rel-preload + + if (!hasPreload) { - _context2.next = 19; + _context2.next = 16; break; } - _context2.next = 12; + _context2.next = 13; return _this2.promisedBuildId; - case 12: - link = document.createElement('link'); - link.rel = 'preload'; - link.crossOrigin = undefined; - link.href = _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; - link.as = 'script'; - document.head.appendChild(link); + case 13: + url = isDependency ? route : _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; + createPreloadLink(url); return _context2.abrupt("return"); - case 19: + case 16: + if (!isDependency) { + _context2.next = 18; + break; + } + + return _context2.abrupt("return"); + + case 18: if (!(document.readyState === 'complete')) { - _context2.next = 23; + _context2.next = 22; break; } return _context2.abrupt("return", _this2.loadPage(route)["catch"](function () {})); - case 23: + case 22: return _context2.abrupt("return", new _promise["default"](function (resolve) { window.addEventListener('load', function () { _this2.loadPage(route).then(function () { @@ -1361,7 +1494,7 @@ function () { }); })); - case 24: + case 23: case "end": return _context2.stop(); } ```
github-actions[bot] commented 5 years ago

Stats from current PR

Click to expand stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 12.7s | 12.4s | -302ms | | `node_modules` Size | 45.9 MB | 45.9 MB | ⚠️ +7.34 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 208 kB | ⚠️ +1.43 kB | | Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 68.4 kB | ⚠️ +614 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 15.4 kB | 16.8 kB | ⚠️ +1.43 kB | | Client `main` gzip Size | 5.33 kB | 5.94 kB | ⚠️ +614 B | | Client `commons` Size | 188 kB | 188 kB | ✓ | | Client `commons` gzip Size | 61.1 kB | 61.1 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Base Rendered Size | 1.35 kB | 1.35 kB | ✓ | | Build Dir Size | 705 kB | 709 kB | ⚠️ +4.66 kB |
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 13.4s | 13.7s | ⚠️ +236ms | | `node_modules` Size | 45.9 MB | 45.9 MB | ⚠️ +7.34 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 208 kB | ⚠️ +1.43 kB | | Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 68.4 kB | ⚠️ +614 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ⚠️ +1 B | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 300 B | 301 B | ⚠️ +1 B | | Client `main` Size | 15.4 kB | 16.8 kB | ⚠️ +1.43 kB | | Client `main` gzip Size | 5.33 kB | 5.94 kB | ⚠️ +613 B | | Client `commons` Size | 188 kB | 188 kB | ✓ | | Client `commons` gzip Size | 61.1 kB | 61.1 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Serverless `pages/link` Size | 252 kB | 252 kB | ✓ | | Serverless `pages/link` gzip Size | 68 kB | 68 kB | ⚠️ +3 B | | Serverless `pages/index` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/index` gzip Size | 65.8 kB | 65.8 kB | ⚠️ +2 B | | Serverless `pages/_error` Size | 244 kB | 244 kB | ✓ | | Serverless `pages/_error` gzip Size | 65.5 kB | 65.5 kB | ⚠️ +1 B | | Serverless `pages/routerDirect` Size | 246 kB | 246 kB | ✓ | | Serverless `pages/routerDirect` gzip Size | 65.7 kB | 65.7 kB | ⚠️ +1 B | | Serverless `pages/withRouter` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/withRouter` gzip Size | 65.9 kB | 65.9 kB | ⚠️ +1 B | | Build Dir Size | 1.89 MB | 1.9 MB | ⚠️ +4.66 kB |
Diff for main.js ```diff @@ -1,4 +1,4 @@ -(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[2],{ +(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[8],{ /***/ "+iuc": /***/ (function(module, exports, __webpack_require__) { @@ -69,6 +69,16 @@ __webpack_require__("cHUd")('Map'); /***/ }), +/***/ "0tVQ": +/***/ (function(module, exports, __webpack_require__) { + +__webpack_require__("FlQf"); +__webpack_require__("VJsP"); +module.exports = __webpack_require__("WEpk").Array.from; + + +/***/ }), + /***/ "B9jh": /***/ (function(module, exports, __webpack_require__) { @@ -845,6 +855,22 @@ function _doRender() { /***/ }), +/***/ "IP1Z": +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + +var $defineProperty = __webpack_require__("2faE"); +var createDesc = __webpack_require__("rr1i"); + +module.exports = function (object, index, value) { + if (index in object) $defineProperty.f(object, index, createDesc(0, value)); + else object[index] = value; +}; + + +/***/ }), + /***/ "LX0d": /***/ (function(module, exports, __webpack_require__) { @@ -884,6 +910,51 @@ __webpack_require__("aPfg")('Set'); /***/ }), +/***/ "VJsP": +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + +var ctx = __webpack_require__("2GTP"); +var $export = __webpack_require__("Y7ZC"); +var toObject = __webpack_require__("JB68"); +var call = __webpack_require__("sNwI"); +var isArrayIter = __webpack_require__("NwJ3"); +var toLength = __webpack_require__("tEej"); +var createProperty = __webpack_require__("IP1Z"); +var getIterFn = __webpack_require__("fNZA"); + +$export($export.S + $export.F * !__webpack_require__("TuGD")(function (iter) { Array.from(iter); }), 'Array', { + // 22.1.2.1 Array.from(arrayLike, mapfn = undefined, thisArg = undefined) + from: function from(arrayLike /* , mapfn = undefined, thisArg = undefined */) { + var O = toObject(arrayLike); + var C = typeof this == 'function' ? this : Array; + var aLen = arguments.length; + var mapfn = aLen > 1 ? arguments[1] : undefined; + var mapping = mapfn !== undefined; + var index = 0; + var iterFn = getIterFn(O); + var length, result, step, iterator; + if (mapping) mapfn = ctx(mapfn, aLen > 2 ? arguments[2] : undefined, 2); + // if object isn't iterable or it's array with default iterator - use simple case + if (iterFn != undefined && !(C == Array && isArrayIter(iterFn))) { + for (iterator = iterFn.call(O), result = new C(); !(step = iterator.next()).done; index++) { + createProperty(result, index, mapping ? call(iterator, mapfn, [step.value, index], true) : step.value); + } + } else { + length = toLength(O.length); + for (result = new C(length); length > index; index++) { + createProperty(result, index, mapping ? mapfn(O[index], index) : O[index]); + } + } + result.length = index; + return result; + } +}); + + +/***/ }), + /***/ "XLbu": /***/ (function(module, exports, __webpack_require__) { @@ -951,6 +1022,13 @@ exports.DataManager = DataManager; /***/ }), +/***/ "d04V": +/***/ (function(module, exports, __webpack_require__) { + +module.exports = __webpack_require__("0tVQ"); + +/***/ }), + /***/ "dL40": /***/ (function(module, exports, __webpack_require__) { @@ -1076,6 +1154,8 @@ exports["default"] = void 0; var _asyncToGenerator2 = _interopRequireDefault(__webpack_require__("+oT+")); +var _from = _interopRequireDefault(__webpack_require__("d04V")); + var _promise = _interopRequireDefault(__webpack_require__("eVuF")); var _set = _interopRequireDefault(__webpack_require__("ttDY")); @@ -1083,7 +1163,7 @@ var _set = _interopRequireDefault(__webpack_require__("ttDY")); var _mitt = _interopRequireDefault(__webpack_require__("kiME")); var _unfetch = _interopRequireDefault(__webpack_require__("m/Gl")); -/* global document */ +/* global document, window */ // smaller version of https://gist.github.com/igrigorik/a02f2359f3bc50ca7a9c @@ -1101,6 +1181,26 @@ function supportsPreload(list) { var hasPreload = supportsPreload(document.createElement('link').relList); +function createPreloadLink(url) { + var link = document.createElement('link'); + link.rel = 'preload'; + link.crossOrigin = undefined; + link.href = url; + link.as = 'script'; + document.head.appendChild(link); +} // Retrieve a list of dependencies for a given route from the build manifest + + +function getDependencies(route) { + if (!window.__BUILD_MANIFEST || !window.__BUILD_MANIFEST.pages[route]) { + return []; + } + + return window.__BUILD_MANIFEST.pages[route].map(function (url) { + return '/_next/' + url; + }); +} + var PageLoader = /*#__PURE__*/ function () { @@ -1165,13 +1265,24 @@ function () { if (document.getElementById("__NEXT_PAGE__" + route)) { return; - } // Load the script if not asked to load yet. - + } if (!_this3.loadingRoutes[route]) { - _this3.loadScript(route); - + // Make sure we don't load a dependency that's already loaded + var loadedModules = new _set["default"]((0, _from["default"])(document.getElementsByTagName('script'), function (el) { + var results = /\/_next\/[^?]*/g.exec(el.src); + return results ? results[0] : el.src; + })); + var deps = getDependencies(route); + var urlsToLoad = deps.filter(function (url) { + return !loadedModules.has(url); + }); _this3.loadingRoutes[route] = true; + urlsToLoad.forEach(function (url) { + return _this3.loadScript(url, route); + }); + + _this3.loadRoute(route); } }); } @@ -1201,14 +1312,14 @@ function () { }); } }, { - key: "loadScript", - value: function loadScript(route) { + key: "loadRoute", + value: function loadRoute(route) { var _this = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee() { - var scriptRoute, script, url; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee$(_context) { while (1) { switch (_context.prev = _context.next) { @@ -1219,38 +1330,47 @@ function () { case 2: route = _this.normalizeRoute(route); scriptRoute = route === '/' ? '/index.js' : route + ".js"; - script = document.createElement('script'); - - if (false) {} - url = _this.assetPrefix + "/_next/static/" + encodeURIComponent(_this.buildId) + "/pages" + scriptRoute; - script.crossOrigin = undefined; - script.src = url; - - script.onerror = function () { - var error = new Error("Error loading script " + url); - error.code = 'PAGE_LOAD_ERROR'; - - _this.pageRegisterEvents.emit(route, { - error: error - }); - }; - document.body.appendChild(script); + _this.loadScript(url, route); - case 11: + case 6: case "end": return _context.stop(); } } }, _callee); }))(); + } + }, { + key: "loadScript", + value: function loadScript(url, route) { + var _this5 = this; + + var script = document.createElement('script'); + + if (false) {} + + script.crossOrigin = undefined; + script.src = url; + script.async = false; // Explicit async = false required for in-order execution + + script.onerror = function () { + var error = new Error("Error loading script " + url); + error.code = 'PAGE_LOAD_ERROR'; + + _this5.pageRegisterEvents.emit(route, { + error: error + }); + }; + + document.body.appendChild(script); } // This method if called by the route code. }, { key: "registerPage", value: function registerPage(route, regFn) { - var _this5 = this; + var _this6 = this; var register = function register() { try { @@ -1258,21 +1378,21 @@ function () { error = _regFn.error, page = _regFn.page; - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error, page: page }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error, page: page }); } catch (error) { - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error }); } @@ -1284,13 +1404,13 @@ function () { } }, { key: "prefetch", - value: function prefetch(route) { + value: function prefetch(route, isDependency) { var _this2 = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee2() { - var scriptRoute, link; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee2$(_context2) { while (1) { switch (_context2.prev = _context2.next) { @@ -1325,32 +1445,45 @@ function () { return _context2.abrupt("return"); case 9: + if (!isDependency) { + getDependencies(route).forEach(function (url) { + _this2.prefetch(url, true); + }); + } // Feature detection is used to see if preload is supported + // If not fall back to loading script tags before the page is loaded + // https://caniuse.com/#feat=link-rel-preload + + if (!hasPreload) { - _context2.next = 19; + _context2.next = 16; break; } - _context2.next = 12; + _context2.next = 13; return _this2.promisedBuildId; - case 12: - link = document.createElement('link'); - link.rel = 'preload'; - link.crossOrigin = undefined; - link.href = _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; - link.as = 'script'; - document.head.appendChild(link); + case 13: + url = isDependency ? route : _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; + createPreloadLink(url); return _context2.abrupt("return"); - case 19: + case 16: + if (!isDependency) { + _context2.next = 18; + break; + } + + return _context2.abrupt("return"); + + case 18: if (!(document.readyState === 'complete')) { - _context2.next = 23; + _context2.next = 22; break; } return _context2.abrupt("return", _this2.loadPage(route)["catch"](function () {})); - case 23: + case 22: return _context2.abrupt("return", new _promise["default"](function (resolve) { window.addEventListener('load', function () { _this2.loadPage(route).then(function () { @@ -1361,7 +1494,7 @@ function () { }); })); - case 24: + case 23: case "end": return _context2.stop(); } ```
github-actions[bot] commented 5 years ago

Stats from current PR

Click to expand stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 12.5s | 12.4s | -143ms | | `node_modules` Size | 45.9 MB | 45.9 MB | ⚠️ +7.26 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 207 kB | ⚠️ +609 B | | Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 68 kB | ⚠️ +237 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 15.4 kB | 16 kB | ⚠️ +609 B | | Client `main` gzip Size | 5.33 kB | 5.56 kB | ⚠️ +237 B | | Client `commons` Size | 188 kB | 188 kB | ✓ | | Client `commons` gzip Size | 61.1 kB | 61.1 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Base Rendered Size | 1.35 kB | 1.35 kB | ✓ | | Build Dir Size | 705 kB | 708 kB | ⚠️ +2.87 kB |
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 13.7s | 13.9s | ⚠️ +290ms | | `node_modules` Size | 45.9 MB | 45.9 MB | ⚠️ +7.26 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 207 kB | ⚠️ +609 B | | Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 68 kB | ⚠️ +237 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 15.4 kB | 16 kB | ⚠️ +609 B | | Client `main` gzip Size | 5.33 kB | 5.56 kB | ⚠️ +237 B | | Client `commons` Size | 188 kB | 188 kB | ✓ | | Client `commons` gzip Size | 61.1 kB | 61.1 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Serverless `pages/link` Size | 252 kB | 252 kB | ✓ | | Serverless `pages/link` gzip Size | 68 kB | 68 kB | -1 B | | Serverless `pages/index` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/index` gzip Size | 65.8 kB | 65.8 kB | -1 B | | Serverless `pages/_error` Size | 244 kB | 244 kB | ✓ | | Serverless `pages/_error` gzip Size | 65.5 kB | 65.5 kB | ✓ | | Serverless `pages/routerDirect` Size | 246 kB | 246 kB | ✓ | | Serverless `pages/routerDirect` gzip Size | 65.7 kB | 65.7 kB | -1 B | | Serverless `pages/withRouter` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/withRouter` gzip Size | 65.9 kB | 65.9 kB | ✓ | | Build Dir Size | 1.89 MB | 1.9 MB | ⚠️ +2.87 kB |
Diff for main.js ```diff @@ -1083,7 +1083,7 @@ var _set = _interopRequireDefault(__webpack_require__("ttDY")); var _mitt = _interopRequireDefault(__webpack_require__("kiME")); var _unfetch = _interopRequireDefault(__webpack_require__("m/Gl")); -/* global document */ +/* global document, window */ // smaller version of https://gist.github.com/igrigorik/a02f2359f3bc50ca7a9c @@ -1101,6 +1101,26 @@ function supportsPreload(list) { var hasPreload = supportsPreload(document.createElement('link').relList); +function createPreloadLink(url) { + var link = document.createElement('link'); + link.rel = 'preload'; + link.crossOrigin = undefined; + link.href = url; + link.as = 'script'; + document.head.appendChild(link); +} // Retrieve a list of dependencies for a given route from the build manifest + + +function getDependencies(route) { + if (!window.__BUILD_MANIFEST || !window.__BUILD_MANIFEST.pages[route]) { + return []; + } + + return window.__BUILD_MANIFEST.pages[route].map(function (url) { + return '/_next/' + url; + }); +} + var PageLoader = /*#__PURE__*/ function () { @@ -1165,13 +1185,24 @@ function () { if (document.getElementById("__NEXT_PAGE__" + route)) { return; - } // Load the script if not asked to load yet. - + } if (!_this3.loadingRoutes[route]) { - _this3.loadScript(route); - + // Make sure we don't load a dependency that's already loaded + var loadedModules = new _set["default"]([].slice.call(document.getElementsByTagName('script')).map(function (el) { + var results = /\/_next\/[^?]*/g.exec(el.src); + return results ? results[0] : el.src; + })); + var deps = getDependencies(route); + var urlsToLoad = deps.filter(function (url) { + return !loadedModules.has(url); + }); _this3.loadingRoutes[route] = true; + urlsToLoad.forEach(function (url) { + return _this3.loadScript(url, route); + }); + + _this3.loadRoute(route); } }); } @@ -1201,14 +1232,14 @@ function () { }); } }, { - key: "loadScript", - value: function loadScript(route) { + key: "loadRoute", + value: function loadRoute(route) { var _this = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee() { - var scriptRoute, script, url; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee$(_context) { while (1) { switch (_context.prev = _context.next) { @@ -1219,38 +1250,47 @@ function () { case 2: route = _this.normalizeRoute(route); scriptRoute = route === '/' ? '/index.js' : route + ".js"; - script = document.createElement('script'); - - if (false) {} - url = _this.assetPrefix + "/_next/static/" + encodeURIComponent(_this.buildId) + "/pages" + scriptRoute; - script.crossOrigin = undefined; - script.src = url; - script.onerror = function () { - var error = new Error("Error loading script " + url); - error.code = 'PAGE_LOAD_ERROR'; + _this.loadScript(url, route); - _this.pageRegisterEvents.emit(route, { - error: error - }); - }; - - document.body.appendChild(script); - - case 11: + case 6: case "end": return _context.stop(); } } }, _callee); }))(); + } + }, { + key: "loadScript", + value: function loadScript(url, route) { + var _this5 = this; + + var script = document.createElement('script'); + + if (false) {} + + script.crossOrigin = undefined; + script.src = url; + script.async = false; // Explicit async = false required for in-order execution + + script.onerror = function () { + var error = new Error("Error loading script " + url); + error.code = 'PAGE_LOAD_ERROR'; + + _this5.pageRegisterEvents.emit(route, { + error: error + }); + }; + + document.body.appendChild(script); } // This method if called by the route code. }, { key: "registerPage", value: function registerPage(route, regFn) { - var _this5 = this; + var _this6 = this; var register = function register() { try { @@ -1258,21 +1298,21 @@ function () { error = _regFn.error, page = _regFn.page; - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error, page: page }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error, page: page }); } catch (error) { - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error }); } @@ -1284,13 +1324,13 @@ function () { } }, { key: "prefetch", - value: function prefetch(route) { + value: function prefetch(route, isDependency) { var _this2 = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee2() { - var scriptRoute, link; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee2$(_context2) { while (1) { switch (_context2.prev = _context2.next) { @@ -1325,32 +1365,45 @@ function () { return _context2.abrupt("return"); case 9: + if (!isDependency) { + getDependencies(route).forEach(function (url) { + _this2.prefetch(url, true); + }); + } // Feature detection is used to see if preload is supported + // If not fall back to loading script tags before the page is loaded + // https://caniuse.com/#feat=link-rel-preload + + if (!hasPreload) { - _context2.next = 19; + _context2.next = 16; break; } - _context2.next = 12; + _context2.next = 13; return _this2.promisedBuildId; - case 12: - link = document.createElement('link'); - link.rel = 'preload'; - link.crossOrigin = undefined; - link.href = _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; - link.as = 'script'; - document.head.appendChild(link); + case 13: + url = isDependency ? route : _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; + createPreloadLink(url); + return _context2.abrupt("return"); + + case 16: + if (!isDependency) { + _context2.next = 18; + break; + } + return _context2.abrupt("return"); - case 19: + case 18: if (!(document.readyState === 'complete')) { - _context2.next = 23; + _context2.next = 22; break; } return _context2.abrupt("return", _this2.loadPage(route)["catch"](function () {})); - case 23: + case 22: return _context2.abrupt("return", new _promise["default"](function (resolve) { window.addEventListener('load', function () { _this2.loadPage(route).then(function () { @@ -1361,7 +1414,7 @@ function () { }); })); - case 24: + case 23: case "end": return _context2.stop(); } ```
github-actions[bot] commented 5 years ago

Stats from current PR

Click to expand stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 12.3s | 11.8s | -530ms | | `node_modules` Size | 45.9 MB | 45.9 MB | ⚠️ +6.67 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 207 kB | ⚠️ +455 B | | Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 68 kB | ⚠️ +182 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 15.4 kB | 15.9 kB | ⚠️ +455 B | | Client `main` gzip Size | 5.33 kB | 5.51 kB | ⚠️ +182 B | | Client `commons` Size | 188 kB | 188 kB | ✓ | | Client `commons` gzip Size | 61.1 kB | 61.1 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Base Rendered Size | 1.35 kB | 1.35 kB | ✓ | | Build Dir Size | 705 kB | 707 kB | ⚠️ +2.17 kB |
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 13.1s | 13.1s | -77ms | | `node_modules` Size | 45.9 MB | 45.9 MB | ⚠️ +6.67 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 207 kB | ⚠️ +455 B | | Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 68 kB | ⚠️ +182 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 15.4 kB | 15.9 kB | ⚠️ +455 B | | Client `main` gzip Size | 5.33 kB | 5.51 kB | ⚠️ +182 B | | Client `commons` Size | 188 kB | 188 kB | ✓ | | Client `commons` gzip Size | 61.1 kB | 61.1 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Serverless `pages/link` Size | 252 kB | 252 kB | ✓ | | Serverless `pages/link` gzip Size | 68 kB | 68 kB | -4 B | | Serverless `pages/index` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/index` gzip Size | 65.8 kB | 65.8 kB | -2 B | | Serverless `pages/_error` Size | 244 kB | 244 kB | ✓ | | Serverless `pages/_error` gzip Size | 65.5 kB | 65.5 kB | -2 B | | Serverless `pages/routerDirect` Size | 246 kB | 246 kB | ✓ | | Serverless `pages/routerDirect` gzip Size | 65.7 kB | 65.7 kB | -3 B | | Serverless `pages/withRouter` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/withRouter` gzip Size | 65.9 kB | 65.9 kB | -2 B | | Build Dir Size | 1.89 MB | 1.9 MB | ⚠️ +2.17 kB |
Diff for main.js ```diff @@ -1,4 +1,4 @@ -(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[2],{ +(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[8],{ /***/ "+iuc": /***/ (function(module, exports, __webpack_require__) { @@ -1083,7 +1083,7 @@ var _set = _interopRequireDefault(__webpack_require__("ttDY")); var _mitt = _interopRequireDefault(__webpack_require__("kiME")); var _unfetch = _interopRequireDefault(__webpack_require__("m/Gl")); -/* global document */ +/* global document, window */ // smaller version of https://gist.github.com/igrigorik/a02f2359f3bc50ca7a9c @@ -1101,6 +1101,26 @@ function supportsPreload(list) { var hasPreload = supportsPreload(document.createElement('link').relList); +function createPreloadLink(url) { + var link = document.createElement('link'); + link.rel = 'preload'; + link.crossOrigin = undefined; + link.href = url; + link.as = 'script'; + document.head.appendChild(link); +} // Retrieve a list of dependencies for a given route from the build manifest + + +function getDependencies(route) { + if (!window.__BUILD_MANIFEST || !window.__BUILD_MANIFEST.pages[route]) { + return []; + } + + return window.__BUILD_MANIFEST.pages[route].map(function (url) { + return '/_next/' + url; + }); +} + var PageLoader = /*#__PURE__*/ function () { @@ -1165,11 +1185,16 @@ function () { if (document.getElementById("__NEXT_PAGE__" + route)) { return; - } // Load the script if not asked to load yet. - + } if (!_this3.loadingRoutes[route]) { - _this3.loadScript(route); + getDependencies(route).forEach(function (d) { + if (!document.querySelector("script[src^=\"" + d + "\"]")) { + _this3.loadScript(d, route); + } + }); + + _this3.loadRoute(route); _this3.loadingRoutes[route] = true; } @@ -1201,14 +1226,14 @@ function () { }); } }, { - key: "loadScript", - value: function loadScript(route) { + key: "loadRoute", + value: function loadRoute(route) { var _this = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee() { - var scriptRoute, script, url; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee$(_context) { while (1) { switch (_context.prev = _context.next) { @@ -1219,38 +1244,47 @@ function () { case 2: route = _this.normalizeRoute(route); scriptRoute = route === '/' ? '/index.js' : route + ".js"; - script = document.createElement('script'); - - if (false) {} - url = _this.assetPrefix + "/_next/static/" + encodeURIComponent(_this.buildId) + "/pages" + scriptRoute; - script.crossOrigin = undefined; - script.src = url; - - script.onerror = function () { - var error = new Error("Error loading script " + url); - error.code = 'PAGE_LOAD_ERROR'; - _this.pageRegisterEvents.emit(route, { - error: error - }); - }; - - document.body.appendChild(script); + _this.loadScript(url, route); - case 11: + case 6: case "end": return _context.stop(); } } }, _callee); }))(); + } + }, { + key: "loadScript", + value: function loadScript(url, route) { + var _this5 = this; + + var script = document.createElement('script'); + + if (false) {} + + script.crossOrigin = undefined; + script.src = url; + script.async = false; // Explicit async = false required for in-order execution + + script.onerror = function () { + var error = new Error("Error loading script " + url); + error.code = 'PAGE_LOAD_ERROR'; + + _this5.pageRegisterEvents.emit(route, { + error: error + }); + }; + + document.body.appendChild(script); } // This method if called by the route code. }, { key: "registerPage", value: function registerPage(route, regFn) { - var _this5 = this; + var _this6 = this; var register = function register() { try { @@ -1258,21 +1292,21 @@ function () { error = _regFn.error, page = _regFn.page; - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error, page: page }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error, page: page }); } catch (error) { - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error }); } @@ -1284,13 +1318,13 @@ function () { } }, { key: "prefetch", - value: function prefetch(route) { + value: function prefetch(route, isDependency) { var _this2 = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee2() { - var scriptRoute, link; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee2$(_context2) { while (1) { switch (_context2.prev = _context2.next) { @@ -1325,32 +1359,45 @@ function () { return _context2.abrupt("return"); case 9: + if (!isDependency) { + getDependencies(route).forEach(function (url) { + _this2.prefetch(url, true); + }); + } // Feature detection is used to see if preload is supported + // If not fall back to loading script tags before the page is loaded + // https://caniuse.com/#feat=link-rel-preload + + if (!hasPreload) { - _context2.next = 19; + _context2.next = 16; break; } - _context2.next = 12; + _context2.next = 13; return _this2.promisedBuildId; - case 12: - link = document.createElement('link'); - link.rel = 'preload'; - link.crossOrigin = undefined; - link.href = _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; - link.as = 'script'; - document.head.appendChild(link); + case 13: + url = isDependency ? route : _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; + createPreloadLink(url); + return _context2.abrupt("return"); + + case 16: + if (!isDependency) { + _context2.next = 18; + break; + } + return _context2.abrupt("return"); - case 19: + case 18: if (!(document.readyState === 'complete')) { - _context2.next = 23; + _context2.next = 22; break; } return _context2.abrupt("return", _this2.loadPage(route)["catch"](function () {})); - case 23: + case 22: return _context2.abrupt("return", new _promise["default"](function (resolve) { window.addEventListener('load', function () { _this2.loadPage(route).then(function () { @@ -1361,7 +1408,7 @@ function () { }); })); - case 24: + case 23: case "end": return _context2.stop(); } ```
github-actions[bot] commented 5 years ago

Stats from current PR

Click to expand stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 13.1s | 13s | -84ms | | `node_modules` Size | 45.9 MB | 45.9 MB | ⚠️ +6.51 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 207 kB | ⚠️ +444 B | | Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 67.9 kB | ⚠️ +171 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 15.4 kB | 15.9 kB | ⚠️ +444 B | | Client `main` gzip Size | 5.33 kB | 5.5 kB | ⚠️ +171 B | | Client `commons` Size | 188 kB | 188 kB | ✓ | | Client `commons` gzip Size | 61.1 kB | 61.1 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Base Rendered Size | 1.35 kB | 1.35 kB | ✓ | | Build Dir Size | 705 kB | 707 kB | ⚠️ +2.06 kB |
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 14.2s | 14.7s | ⚠️ +474ms | | `node_modules` Size | 45.9 MB | 45.9 MB | ⚠️ +6.51 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 207 kB | ⚠️ +444 B | | Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 67.9 kB | ⚠️ +171 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 15.4 kB | 15.9 kB | ⚠️ +444 B | | Client `main` gzip Size | 5.33 kB | 5.5 kB | ⚠️ +171 B | | Client `commons` Size | 188 kB | 188 kB | ✓ | | Client `commons` gzip Size | 61.1 kB | 61.1 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Serverless `pages/link` Size | 252 kB | 252 kB | ✓ | | Serverless `pages/link` gzip Size | 68 kB | 68 kB | -2 B | | Serverless `pages/index` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/index` gzip Size | 65.8 kB | 65.8 kB | -2 B | | Serverless `pages/_error` Size | 244 kB | 244 kB | ✓ | | Serverless `pages/_error` gzip Size | 65.5 kB | 65.5 kB | -1 B | | Serverless `pages/routerDirect` Size | 246 kB | 246 kB | ✓ | | Serverless `pages/routerDirect` gzip Size | 65.7 kB | 65.7 kB | -1 B | | Serverless `pages/withRouter` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/withRouter` gzip Size | 65.9 kB | 65.9 kB | -1 B | | Build Dir Size | 1.89 MB | 1.9 MB | ⚠️ +2.06 kB |
Diff for main.js ```diff @@ -1083,7 +1083,7 @@ var _set = _interopRequireDefault(__webpack_require__("ttDY")); var _mitt = _interopRequireDefault(__webpack_require__("kiME")); var _unfetch = _interopRequireDefault(__webpack_require__("m/Gl")); -/* global document */ +/* global document, window */ // smaller version of https://gist.github.com/igrigorik/a02f2359f3bc50ca7a9c @@ -1101,6 +1101,26 @@ function supportsPreload(list) { var hasPreload = supportsPreload(document.createElement('link').relList); +function createPreloadLink(url) { + var link = document.createElement('link'); + link.rel = 'preload'; + link.crossOrigin = undefined; + link.href = url; + link.as = 'script'; + document.head.appendChild(link); +} // Retrieve a list of dependencies for a given route from the build manifest + + +function getDependencies(route) { + if (!window.__BUILD_MANIFEST || !window.__BUILD_MANIFEST.pages[route]) { + return []; + } + + return window.__BUILD_MANIFEST.pages[route].map(function (url) { + return '/_next/' + url; + }); +} + var PageLoader = /*#__PURE__*/ function () { @@ -1165,11 +1185,16 @@ function () { if (document.getElementById("__NEXT_PAGE__" + route)) { return; - } // Load the script if not asked to load yet. - + } if (!_this3.loadingRoutes[route]) { - _this3.loadScript(route); + getDependencies(route).forEach(function (d) { + if (!document.querySelector("script[src^=\"" + d + "\"]")) { + _this3.loadScript(d, route); + } + }); + + _this3.loadRoute(route); _this3.loadingRoutes[route] = true; } @@ -1201,14 +1226,14 @@ function () { }); } }, { - key: "loadScript", - value: function loadScript(route) { + key: "loadRoute", + value: function loadRoute(route) { var _this = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee() { - var scriptRoute, script, url; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee$(_context) { while (1) { switch (_context.prev = _context.next) { @@ -1219,38 +1244,46 @@ function () { case 2: route = _this.normalizeRoute(route); scriptRoute = route === '/' ? '/index.js' : route + ".js"; - script = document.createElement('script'); - - if (false) {} - url = _this.assetPrefix + "/_next/static/" + encodeURIComponent(_this.buildId) + "/pages" + scriptRoute; - script.crossOrigin = undefined; - script.src = url; - - script.onerror = function () { - var error = new Error("Error loading script " + url); - error.code = 'PAGE_LOAD_ERROR'; - _this.pageRegisterEvents.emit(route, { - error: error - }); - }; - - document.body.appendChild(script); + _this.loadScript(url, route); - case 11: + case 6: case "end": return _context.stop(); } } }, _callee); }))(); + } + }, { + key: "loadScript", + value: function loadScript(url, route) { + var _this5 = this; + + var script = document.createElement('script'); + + if (false) {} + + script.crossOrigin = undefined; + script.src = url; + + script.onerror = function () { + var error = new Error("Error loading script " + url); + error.code = 'PAGE_LOAD_ERROR'; + + _this5.pageRegisterEvents.emit(route, { + error: error + }); + }; + + document.body.appendChild(script); } // This method if called by the route code. }, { key: "registerPage", value: function registerPage(route, regFn) { - var _this5 = this; + var _this6 = this; var register = function register() { try { @@ -1258,21 +1291,21 @@ function () { error = _regFn.error, page = _regFn.page; - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error, page: page }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error, page: page }); } catch (error) { - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error }); } @@ -1284,13 +1317,13 @@ function () { } }, { key: "prefetch", - value: function prefetch(route) { + value: function prefetch(route, isDependency) { var _this2 = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee2() { - var scriptRoute, link; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee2$(_context2) { while (1) { switch (_context2.prev = _context2.next) { @@ -1325,32 +1358,45 @@ function () { return _context2.abrupt("return"); case 9: + if (!isDependency) { + getDependencies(route).forEach(function (url) { + _this2.prefetch(url, true); + }); + } // Feature detection is used to see if preload is supported + // If not fall back to loading script tags before the page is loaded + // https://caniuse.com/#feat=link-rel-preload + + if (!hasPreload) { - _context2.next = 19; + _context2.next = 16; break; } - _context2.next = 12; + _context2.next = 13; return _this2.promisedBuildId; - case 12: - link = document.createElement('link'); - link.rel = 'preload'; - link.crossOrigin = undefined; - link.href = _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; - link.as = 'script'; - document.head.appendChild(link); + case 13: + url = isDependency ? route : _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; + createPreloadLink(url); + return _context2.abrupt("return"); + + case 16: + if (!isDependency) { + _context2.next = 18; + break; + } + return _context2.abrupt("return"); - case 19: + case 18: if (!(document.readyState === 'complete')) { - _context2.next = 23; + _context2.next = 22; break; } return _context2.abrupt("return", _this2.loadPage(route)["catch"](function () {})); - case 23: + case 22: return _context2.abrupt("return", new _promise["default"](function (resolve) { window.addEventListener('load', function () { _this2.loadPage(route).then(function () { @@ -1361,7 +1407,7 @@ function () { }); })); - case 24: + case 23: case "end": return _context2.stop(); } ```
github-actions[bot] commented 5 years ago

Stats from current PR

Click to expand stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 13.9s | 13.4s | -469ms | | `node_modules` Size | 45.9 MB | 45.9 MB | ⚠️ +6.58 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 207 kB | ⚠️ +400 B | | Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 67.9 kB | ⚠️ +171 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 15.4 kB | 15.8 kB | ⚠️ +400 B | | Client `main` gzip Size | 5.33 kB | 5.5 kB | ⚠️ +171 B | | Client `commons` Size | 188 kB | 188 kB | ✓ | | Client `commons` gzip Size | 61.1 kB | 61.1 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Base Rendered Size | 1.35 kB | 1.35 kB | ✓ | | Build Dir Size | 705 kB | 707 kB | ⚠️ +1.94 kB |
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 14.6s | 14.6s | ⚠️ +72ms | | `node_modules` Size | 45.9 MB | 45.9 MB | ⚠️ +6.58 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 207 kB | ⚠️ +400 B | | Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 67.9 kB | ⚠️ +171 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 15.4 kB | 15.8 kB | ⚠️ +400 B | | Client `main` gzip Size | 5.33 kB | 5.5 kB | ⚠️ +171 B | | Client `commons` Size | 188 kB | 188 kB | ✓ | | Client `commons` gzip Size | 61.1 kB | 61.1 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Serverless `pages/link` Size | 252 kB | 252 kB | ✓ | | Serverless `pages/link` gzip Size | 68 kB | 68 kB | -2 B | | Serverless `pages/index` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/index` gzip Size | 65.8 kB | 65.8 kB | -2 B | | Serverless `pages/_error` Size | 244 kB | 244 kB | ✓ | | Serverless `pages/_error` gzip Size | 65.5 kB | 65.5 kB | ✓ | | Serverless `pages/routerDirect` Size | 246 kB | 246 kB | ✓ | | Serverless `pages/routerDirect` gzip Size | 65.7 kB | 65.7 kB | -1 B | | Serverless `pages/withRouter` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/withRouter` gzip Size | 65.9 kB | 65.9 kB | -2 B | | Build Dir Size | 1.89 MB | 1.9 MB | ⚠️ +1.94 kB |
Diff for main.js ```diff @@ -1083,7 +1083,7 @@ var _set = _interopRequireDefault(__webpack_require__("ttDY")); var _mitt = _interopRequireDefault(__webpack_require__("kiME")); var _unfetch = _interopRequireDefault(__webpack_require__("m/Gl")); -/* global document */ +/* global document, window */ // smaller version of https://gist.github.com/igrigorik/a02f2359f3bc50ca7a9c @@ -1101,6 +1101,26 @@ function supportsPreload(list) { var hasPreload = supportsPreload(document.createElement('link').relList); +function createPreloadLink(url) { + var link = document.createElement('link'); + link.rel = 'preload'; + link.crossOrigin = undefined; + link.href = url; + link.as = 'script'; + document.head.appendChild(link); +} // Retrieve a list of dependencies for a given route from the build manifest + + +function getDependencies(route, _m) { + if ((_m = window.__BUILD_MANIFEST) && (_m = _m.pages[route])) { + return _m.map(function (url) { + return "/_next/" + url; + }); + } + + return []; +} + var PageLoader = /*#__PURE__*/ function () { @@ -1165,11 +1185,16 @@ function () { if (document.getElementById("__NEXT_PAGE__" + route)) { return; - } // Load the script if not asked to load yet. - + } if (!_this3.loadingRoutes[route]) { - _this3.loadScript(route); + getDependencies(route).forEach(function (d) { + if (!document.querySelector("script[src^=\"" + d + "\"]")) { + _this3.loadScript(d, route); + } + }); + + _this3.loadRoute(route); _this3.loadingRoutes[route] = true; } @@ -1201,14 +1226,14 @@ function () { }); } }, { - key: "loadScript", - value: function loadScript(route) { + key: "loadRoute", + value: function loadRoute(route) { var _this = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee() { - var scriptRoute, script, url; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee$(_context) { while (1) { switch (_context.prev = _context.next) { @@ -1219,38 +1244,46 @@ function () { case 2: route = _this.normalizeRoute(route); scriptRoute = route === '/' ? '/index.js' : route + ".js"; - script = document.createElement('script'); - - if (false) {} - url = _this.assetPrefix + "/_next/static/" + encodeURIComponent(_this.buildId) + "/pages" + scriptRoute; - script.crossOrigin = undefined; - script.src = url; - script.onerror = function () { - var error = new Error("Error loading script " + url); - error.code = 'PAGE_LOAD_ERROR'; + _this.loadScript(url, route); - _this.pageRegisterEvents.emit(route, { - error: error - }); - }; - - document.body.appendChild(script); - - case 11: + case 6: case "end": return _context.stop(); } } }, _callee); }))(); + } + }, { + key: "loadScript", + value: function loadScript(url, route) { + var _this5 = this; + + var script = document.createElement('script'); + + if (false) {} + + script.crossOrigin = undefined; + script.src = url; + + script.onerror = function () { + var error = new Error("Error loading script " + url); + error.code = 'PAGE_LOAD_ERROR'; + + _this5.pageRegisterEvents.emit(route, { + error: error + }); + }; + + document.body.appendChild(script); } // This method if called by the route code. }, { key: "registerPage", value: function registerPage(route, regFn) { - var _this5 = this; + var _this6 = this; var register = function register() { try { @@ -1258,21 +1291,21 @@ function () { error = _regFn.error, page = _regFn.page; - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error, page: page }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error, page: page }); } catch (error) { - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error }); } @@ -1284,13 +1317,13 @@ function () { } }, { key: "prefetch", - value: function prefetch(route) { + value: function prefetch(route, isDependency) { var _this2 = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee2() { - var scriptRoute, link; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee2$(_context2) { while (1) { switch (_context2.prev = _context2.next) { @@ -1325,32 +1358,45 @@ function () { return _context2.abrupt("return"); case 9: + if (!isDependency) { + getDependencies(route).forEach(function (url) { + _this2.prefetch(url, true); + }); + } // Feature detection is used to see if preload is supported + // If not fall back to loading script tags before the page is loaded + // https://caniuse.com/#feat=link-rel-preload + + if (!hasPreload) { - _context2.next = 19; + _context2.next = 16; break; } - _context2.next = 12; + _context2.next = 13; return _this2.promisedBuildId; - case 12: - link = document.createElement('link'); - link.rel = 'preload'; - link.crossOrigin = undefined; - link.href = _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; - link.as = 'script'; - document.head.appendChild(link); + case 13: + url = isDependency ? route : _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; + createPreloadLink(url); + return _context2.abrupt("return"); + + case 16: + if (!isDependency) { + _context2.next = 18; + break; + } + return _context2.abrupt("return"); - case 19: + case 18: if (!(document.readyState === 'complete')) { - _context2.next = 23; + _context2.next = 22; break; } return _context2.abrupt("return", _this2.loadPage(route)["catch"](function () {})); - case 23: + case 22: return _context2.abrupt("return", new _promise["default"](function (resolve) { window.addEventListener('load', function () { _this2.loadPage(route).then(function () { @@ -1361,7 +1407,7 @@ function () { }); })); - case 24: + case 23: case "end": return _context2.stop(); } ```
github-actions[bot] commented 5 years ago

Stats from current PR

Click to expand stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 13.9s | 13.5s | -356ms | | `node_modules` Size | 45.9 MB | 45.9 MB | ⚠️ +6.59 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 207 kB | ⚠️ +400 B | | Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 67.9 kB | ⚠️ +171 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 15.4 kB | 15.8 kB | ⚠️ +400 B | | Client `main` gzip Size | 5.33 kB | 5.5 kB | ⚠️ +171 B | | Client `commons` Size | 188 kB | 188 kB | ✓ | | Client `commons` gzip Size | 61.1 kB | 61.1 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Base Rendered Size | 1.35 kB | 1.35 kB | ✓ | | Build Dir Size | 705 kB | 707 kB | ⚠️ +1.94 kB |
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 14.6s | 15s | ⚠️ +445ms | | `node_modules` Size | 45.9 MB | 45.9 MB | ⚠️ +6.59 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 207 kB | ⚠️ +400 B | | Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 67.9 kB | ⚠️ +171 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 15.4 kB | 15.8 kB | ⚠️ +400 B | | Client `main` gzip Size | 5.33 kB | 5.5 kB | ⚠️ +171 B | | Client `commons` Size | 188 kB | 188 kB | ✓ | | Client `commons` gzip Size | 61.1 kB | 61.1 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Serverless `pages/link` Size | 252 kB | 252 kB | ✓ | | Serverless `pages/link` gzip Size | 68 kB | 68 kB | -1 B | | Serverless `pages/index` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/index` gzip Size | 65.8 kB | 65.8 kB | -1 B | | Serverless `pages/_error` Size | 244 kB | 244 kB | ✓ | | Serverless `pages/_error` gzip Size | 65.5 kB | 65.5 kB | -2 B | | Serverless `pages/routerDirect` Size | 246 kB | 246 kB | ✓ | | Serverless `pages/routerDirect` gzip Size | 65.7 kB | 65.7 kB | -2 B | | Serverless `pages/withRouter` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/withRouter` gzip Size | 65.9 kB | 65.9 kB | -1 B | | Build Dir Size | 1.89 MB | 1.9 MB | ⚠️ +1.94 kB |
Diff for main.js ```diff @@ -1083,7 +1083,7 @@ var _set = _interopRequireDefault(__webpack_require__("ttDY")); var _mitt = _interopRequireDefault(__webpack_require__("kiME")); var _unfetch = _interopRequireDefault(__webpack_require__("m/Gl")); -/* global document */ +/* global document, window */ // smaller version of https://gist.github.com/igrigorik/a02f2359f3bc50ca7a9c @@ -1101,6 +1101,26 @@ function supportsPreload(list) { var hasPreload = supportsPreload(document.createElement('link').relList); +function createPreloadLink(url) { + var link = document.createElement('link'); + link.rel = 'preload'; + link.crossOrigin = undefined; + link.href = url; + link.as = 'script'; + document.head.appendChild(link); +} // Retrieve a list of dependencies for a given route from the build manifest + + +function getDependencies(route, _m) { + if ((_m = window.__BUILD_MANIFEST) && (_m = _m.pages[route])) { + return _m.map(function (url) { + return "/_next/" + url; + }); + } + + return []; +} + var PageLoader = /*#__PURE__*/ function () { @@ -1165,11 +1185,16 @@ function () { if (document.getElementById("__NEXT_PAGE__" + route)) { return; - } // Load the script if not asked to load yet. - + } if (!_this3.loadingRoutes[route]) { - _this3.loadScript(route); + getDependencies(route).forEach(function (d) { + if (!document.querySelector("script[src^=\"" + d + "\"]")) { + _this3.loadScript(d, route); + } + }); + + _this3.loadRoute(route); _this3.loadingRoutes[route] = true; } @@ -1201,14 +1226,14 @@ function () { }); } }, { - key: "loadScript", - value: function loadScript(route) { + key: "loadRoute", + value: function loadRoute(route) { var _this = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee() { - var scriptRoute, script, url; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee$(_context) { while (1) { switch (_context.prev = _context.next) { @@ -1219,38 +1244,46 @@ function () { case 2: route = _this.normalizeRoute(route); scriptRoute = route === '/' ? '/index.js' : route + ".js"; - script = document.createElement('script'); - - if (false) {} - url = _this.assetPrefix + "/_next/static/" + encodeURIComponent(_this.buildId) + "/pages" + scriptRoute; - script.crossOrigin = undefined; - script.src = url; - script.onerror = function () { - var error = new Error("Error loading script " + url); - error.code = 'PAGE_LOAD_ERROR'; + _this.loadScript(url, route); - _this.pageRegisterEvents.emit(route, { - error: error - }); - }; - - document.body.appendChild(script); - - case 11: + case 6: case "end": return _context.stop(); } } }, _callee); }))(); + } + }, { + key: "loadScript", + value: function loadScript(url, route) { + var _this5 = this; + + var script = document.createElement('script'); + + if (false) {} + + script.crossOrigin = undefined; + script.src = url; + + script.onerror = function () { + var error = new Error("Error loading script " + url); + error.code = 'PAGE_LOAD_ERROR'; + + _this5.pageRegisterEvents.emit(route, { + error: error + }); + }; + + document.body.appendChild(script); } // This method if called by the route code. }, { key: "registerPage", value: function registerPage(route, regFn) { - var _this5 = this; + var _this6 = this; var register = function register() { try { @@ -1258,21 +1291,21 @@ function () { error = _regFn.error, page = _regFn.page; - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error, page: page }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error, page: page }); } catch (error) { - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error }); } @@ -1284,13 +1317,13 @@ function () { } }, { key: "prefetch", - value: function prefetch(route) { + value: function prefetch(route, isDependency) { var _this2 = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee2() { - var scriptRoute, link; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee2$(_context2) { while (1) { switch (_context2.prev = _context2.next) { @@ -1325,32 +1358,45 @@ function () { return _context2.abrupt("return"); case 9: + if (!isDependency) { + getDependencies(route).forEach(function (url) { + _this2.prefetch(url, true); + }); + } // Feature detection is used to see if preload is supported + // If not fall back to loading script tags before the page is loaded + // https://caniuse.com/#feat=link-rel-preload + + if (!hasPreload) { - _context2.next = 19; + _context2.next = 16; break; } - _context2.next = 12; + _context2.next = 13; return _this2.promisedBuildId; - case 12: - link = document.createElement('link'); - link.rel = 'preload'; - link.crossOrigin = undefined; - link.href = _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; - link.as = 'script'; - document.head.appendChild(link); + case 13: + url = isDependency ? route : _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; + createPreloadLink(url); + return _context2.abrupt("return"); + + case 16: + if (!isDependency) { + _context2.next = 18; + break; + } + return _context2.abrupt("return"); - case 19: + case 18: if (!(document.readyState === 'complete')) { - _context2.next = 23; + _context2.next = 22; break; } return _context2.abrupt("return", _this2.loadPage(route)["catch"](function () {})); - case 23: + case 22: return _context2.abrupt("return", new _promise["default"](function (resolve) { window.addEventListener('load', function () { _this2.loadPage(route).then(function () { @@ -1361,7 +1407,7 @@ function () { }); })); - case 24: + case 23: case "end": return _context2.stop(); } ```
github-actions[bot] commented 5 years ago

Stats from current PR

Click to expand stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 13.8s | 13.4s | -321ms | | `node_modules` Size | 45.9 MB | 45.9 MB | ⚠️ +6.63 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 207 kB | ⚠️ +400 B | | Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 67.9 kB | ⚠️ +171 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 15.4 kB | 15.8 kB | ⚠️ +400 B | | Client `main` gzip Size | 5.33 kB | 5.5 kB | ⚠️ +171 B | | Client `commons` Size | 188 kB | 188 kB | ✓ | | Client `commons` gzip Size | 61.1 kB | 61.1 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Base Rendered Size | 1.35 kB | 1.35 kB | ✓ | | Build Dir Size | 705 kB | 707 kB | ⚠️ +1.94 kB |
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 15.1s | 15.4s | ⚠️ +322ms | | `node_modules` Size | 45.9 MB | 45.9 MB | ⚠️ +6.63 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 207 kB | ⚠️ +400 B | | Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 67.9 kB | ⚠️ +171 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 15.4 kB | 15.8 kB | ⚠️ +400 B | | Client `main` gzip Size | 5.33 kB | 5.5 kB | ⚠️ +171 B | | Client `commons` Size | 188 kB | 188 kB | ✓ | | Client `commons` gzip Size | 61.1 kB | 61.1 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Serverless `pages/link` Size | 252 kB | 252 kB | ✓ | | Serverless `pages/link` gzip Size | 68 kB | 68 kB | -3 B | | Serverless `pages/index` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/index` gzip Size | 65.8 kB | 65.8 kB | -2 B | | Serverless `pages/_error` Size | 244 kB | 244 kB | ✓ | | Serverless `pages/_error` gzip Size | 65.5 kB | 65.5 kB | -2 B | | Serverless `pages/routerDirect` Size | 246 kB | 246 kB | ✓ | | Serverless `pages/routerDirect` gzip Size | 65.7 kB | 65.7 kB | -2 B | | Serverless `pages/withRouter` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/withRouter` gzip Size | 65.9 kB | 65.9 kB | -2 B | | Build Dir Size | 1.89 MB | 1.9 MB | ⚠️ +1.94 kB |
Diff for main.js ```diff @@ -1083,7 +1083,7 @@ var _set = _interopRequireDefault(__webpack_require__("ttDY")); var _mitt = _interopRequireDefault(__webpack_require__("kiME")); var _unfetch = _interopRequireDefault(__webpack_require__("m/Gl")); -/* global document */ +/* global document, window */ // smaller version of https://gist.github.com/igrigorik/a02f2359f3bc50ca7a9c @@ -1101,6 +1101,26 @@ function supportsPreload(list) { var hasPreload = supportsPreload(document.createElement('link').relList); +function createPreloadLink(url) { + var link = document.createElement('link'); + link.rel = 'preload'; + link.crossOrigin = undefined; + link.href = url; + link.as = 'script'; + document.head.appendChild(link); +} // Retrieve a list of dependencies for a given route from the build manifest + + +function getDependencies(route, _m) { + if ((_m = window.__BUILD_MANIFEST) && (_m = _m.pages[route])) { + return _m.map(function (url) { + return "/_next/" + url; + }); + } + + return []; +} + var PageLoader = /*#__PURE__*/ function () { @@ -1165,11 +1185,16 @@ function () { if (document.getElementById("__NEXT_PAGE__" + route)) { return; - } // Load the script if not asked to load yet. - + } if (!_this3.loadingRoutes[route]) { - _this3.loadScript(route); + getDependencies(route).forEach(function (d) { + if (!document.querySelector("script[src^=\"" + d + "\"]")) { + _this3.loadScript(d, route); + } + }); + + _this3.loadRoute(route); _this3.loadingRoutes[route] = true; } @@ -1201,14 +1226,14 @@ function () { }); } }, { - key: "loadScript", - value: function loadScript(route) { + key: "loadRoute", + value: function loadRoute(route) { var _this = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee() { - var scriptRoute, script, url; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee$(_context) { while (1) { switch (_context.prev = _context.next) { @@ -1219,38 +1244,46 @@ function () { case 2: route = _this.normalizeRoute(route); scriptRoute = route === '/' ? '/index.js' : route + ".js"; - script = document.createElement('script'); - - if (false) {} - url = _this.assetPrefix + "/_next/static/" + encodeURIComponent(_this.buildId) + "/pages" + scriptRoute; - script.crossOrigin = undefined; - script.src = url; - script.onerror = function () { - var error = new Error("Error loading script " + url); - error.code = 'PAGE_LOAD_ERROR'; + _this.loadScript(url, route); - _this.pageRegisterEvents.emit(route, { - error: error - }); - }; - - document.body.appendChild(script); - - case 11: + case 6: case "end": return _context.stop(); } } }, _callee); }))(); + } + }, { + key: "loadScript", + value: function loadScript(url, route) { + var _this5 = this; + + var script = document.createElement('script'); + + if (false) {} + + script.crossOrigin = undefined; + script.src = url; + + script.onerror = function () { + var error = new Error("Error loading script " + url); + error.code = 'PAGE_LOAD_ERROR'; + + _this5.pageRegisterEvents.emit(route, { + error: error + }); + }; + + document.body.appendChild(script); } // This method if called by the route code. }, { key: "registerPage", value: function registerPage(route, regFn) { - var _this5 = this; + var _this6 = this; var register = function register() { try { @@ -1258,21 +1291,21 @@ function () { error = _regFn.error, page = _regFn.page; - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error, page: page }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error, page: page }); } catch (error) { - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error }); } @@ -1284,13 +1317,13 @@ function () { } }, { key: "prefetch", - value: function prefetch(route) { + value: function prefetch(route, isDependency) { var _this2 = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee2() { - var scriptRoute, link; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee2$(_context2) { while (1) { switch (_context2.prev = _context2.next) { @@ -1325,32 +1358,45 @@ function () { return _context2.abrupt("return"); case 9: + if (!isDependency) { + getDependencies(route).forEach(function (url) { + _this2.prefetch(url, true); + }); + } // Feature detection is used to see if preload is supported + // If not fall back to loading script tags before the page is loaded + // https://caniuse.com/#feat=link-rel-preload + + if (!hasPreload) { - _context2.next = 19; + _context2.next = 16; break; } - _context2.next = 12; + _context2.next = 13; return _this2.promisedBuildId; - case 12: - link = document.createElement('link'); - link.rel = 'preload'; - link.crossOrigin = undefined; - link.href = _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; - link.as = 'script'; - document.head.appendChild(link); + case 13: + url = isDependency ? route : _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; + createPreloadLink(url); + return _context2.abrupt("return"); + + case 16: + if (!isDependency) { + _context2.next = 18; + break; + } + return _context2.abrupt("return"); - case 19: + case 18: if (!(document.readyState === 'complete')) { - _context2.next = 23; + _context2.next = 22; break; } return _context2.abrupt("return", _this2.loadPage(route)["catch"](function () {})); - case 23: + case 22: return _context2.abrupt("return", new _promise["default"](function (resolve) { window.addEventListener('load', function () { _this2.loadPage(route).then(function () { @@ -1361,7 +1407,7 @@ function () { }); })); - case 24: + case 23: case "end": return _context2.stop(); } ```
github-actions[bot] commented 5 years ago

Stats from current PR

Click to expand stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 14.9s | 14s | -901ms | | `node_modules` Size | 45.9 MB | 45.9 MB | ⚠️ +6.63 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 207 kB | ⚠️ +400 B | | Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 67.9 kB | ⚠️ +171 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 15.4 kB | 15.8 kB | ⚠️ +400 B | | Client `main` gzip Size | 5.33 kB | 5.5 kB | ⚠️ +171 B | | Client `commons` Size | 188 kB | 188 kB | ✓ | | Client `commons` gzip Size | 61.1 kB | 61.1 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Base Rendered Size | 1.35 kB | 1.35 kB | ✓ | | Build Dir Size | 705 kB | 707 kB | ⚠️ +1.94 kB |
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 15.3s | 15.2s | -133ms | | `node_modules` Size | 45.9 MB | 45.9 MB | ⚠️ +6.63 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 207 kB | ⚠️ +400 B | | Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 67.9 kB | ⚠️ +171 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 15.4 kB | 15.8 kB | ⚠️ +400 B | | Client `main` gzip Size | 5.33 kB | 5.5 kB | ⚠️ +171 B | | Client `commons` Size | 188 kB | 188 kB | ✓ | | Client `commons` gzip Size | 61.1 kB | 61.1 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Serverless `pages/link` Size | 252 kB | 252 kB | ✓ | | Serverless `pages/link` gzip Size | 68 kB | 68 kB | ✓ | | Serverless `pages/index` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/index` gzip Size | 65.8 kB | 65.8 kB | ✓ | | Serverless `pages/_error` Size | 244 kB | 244 kB | ✓ | | Serverless `pages/_error` gzip Size | 65.5 kB | 65.5 kB | ✓ | | Serverless `pages/routerDirect` Size | 246 kB | 246 kB | ✓ | | Serverless `pages/routerDirect` gzip Size | 65.7 kB | 65.7 kB | ✓ | | Serverless `pages/withRouter` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/withRouter` gzip Size | 65.9 kB | 65.9 kB | -2 B | | Build Dir Size | 1.89 MB | 1.9 MB | ⚠️ +1.94 kB |
Diff for main.js ```diff @@ -1083,7 +1083,7 @@ var _set = _interopRequireDefault(__webpack_require__("ttDY")); var _mitt = _interopRequireDefault(__webpack_require__("kiME")); var _unfetch = _interopRequireDefault(__webpack_require__("m/Gl")); -/* global document */ +/* global document, window */ // smaller version of https://gist.github.com/igrigorik/a02f2359f3bc50ca7a9c @@ -1101,6 +1101,26 @@ function supportsPreload(list) { var hasPreload = supportsPreload(document.createElement('link').relList); +function createPreloadLink(url) { + var link = document.createElement('link'); + link.rel = 'preload'; + link.crossOrigin = undefined; + link.href = url; + link.as = 'script'; + document.head.appendChild(link); +} // Retrieve a list of dependencies for a given route from the build manifest + + +function getDependencies(route, _m) { + if ((_m = window.__BUILD_MANIFEST) && (_m = _m.pages[route])) { + return _m.map(function (url) { + return "/_next/" + url; + }); + } + + return []; +} + var PageLoader = /*#__PURE__*/ function () { @@ -1165,11 +1185,16 @@ function () { if (document.getElementById("__NEXT_PAGE__" + route)) { return; - } // Load the script if not asked to load yet. - + } if (!_this3.loadingRoutes[route]) { - _this3.loadScript(route); + getDependencies(route).forEach(function (d) { + if (!document.querySelector("script[src^=\"" + d + "\"]")) { + _this3.loadScript(d, route); + } + }); + + _this3.loadRoute(route); _this3.loadingRoutes[route] = true; } @@ -1201,14 +1226,14 @@ function () { }); } }, { - key: "loadScript", - value: function loadScript(route) { + key: "loadRoute", + value: function loadRoute(route) { var _this = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee() { - var scriptRoute, script, url; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee$(_context) { while (1) { switch (_context.prev = _context.next) { @@ -1219,38 +1244,46 @@ function () { case 2: route = _this.normalizeRoute(route); scriptRoute = route === '/' ? '/index.js' : route + ".js"; - script = document.createElement('script'); - - if (false) {} - url = _this.assetPrefix + "/_next/static/" + encodeURIComponent(_this.buildId) + "/pages" + scriptRoute; - script.crossOrigin = undefined; - script.src = url; - script.onerror = function () { - var error = new Error("Error loading script " + url); - error.code = 'PAGE_LOAD_ERROR'; + _this.loadScript(url, route); - _this.pageRegisterEvents.emit(route, { - error: error - }); - }; - - document.body.appendChild(script); - - case 11: + case 6: case "end": return _context.stop(); } } }, _callee); }))(); + } + }, { + key: "loadScript", + value: function loadScript(url, route) { + var _this5 = this; + + var script = document.createElement('script'); + + if (false) {} + + script.crossOrigin = undefined; + script.src = url; + + script.onerror = function () { + var error = new Error("Error loading script " + url); + error.code = 'PAGE_LOAD_ERROR'; + + _this5.pageRegisterEvents.emit(route, { + error: error + }); + }; + + document.body.appendChild(script); } // This method if called by the route code. }, { key: "registerPage", value: function registerPage(route, regFn) { - var _this5 = this; + var _this6 = this; var register = function register() { try { @@ -1258,21 +1291,21 @@ function () { error = _regFn.error, page = _regFn.page; - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error, page: page }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error, page: page }); } catch (error) { - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error }); } @@ -1284,13 +1317,13 @@ function () { } }, { key: "prefetch", - value: function prefetch(route) { + value: function prefetch(route, isDependency) { var _this2 = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee2() { - var scriptRoute, link; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee2$(_context2) { while (1) { switch (_context2.prev = _context2.next) { @@ -1325,32 +1358,45 @@ function () { return _context2.abrupt("return"); case 9: + if (!isDependency) { + getDependencies(route).forEach(function (url) { + _this2.prefetch(url, true); + }); + } // Feature detection is used to see if preload is supported + // If not fall back to loading script tags before the page is loaded + // https://caniuse.com/#feat=link-rel-preload + + if (!hasPreload) { - _context2.next = 19; + _context2.next = 16; break; } - _context2.next = 12; + _context2.next = 13; return _this2.promisedBuildId; - case 12: - link = document.createElement('link'); - link.rel = 'preload'; - link.crossOrigin = undefined; - link.href = _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; - link.as = 'script'; - document.head.appendChild(link); + case 13: + url = isDependency ? route : _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; + createPreloadLink(url); + return _context2.abrupt("return"); + + case 16: + if (!isDependency) { + _context2.next = 18; + break; + } + return _context2.abrupt("return"); - case 19: + case 18: if (!(document.readyState === 'complete')) { - _context2.next = 23; + _context2.next = 22; break; } return _context2.abrupt("return", _this2.loadPage(route)["catch"](function () {})); - case 23: + case 22: return _context2.abrupt("return", new _promise["default"](function (resolve) { window.addEventListener('load', function () { _this2.loadPage(route).then(function () { @@ -1361,7 +1407,7 @@ function () { }); })); - case 24: + case 23: case "end": return _context2.stop(); } ```
github-actions[bot] commented 5 years ago

Stats from current PR

Click to expand stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 13.4s | 13.4s | ⚠️ +48ms | | `node_modules` Size | 45.9 MB | 45.9 MB | ⚠️ +6.63 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 207 kB | ⚠️ +400 B | | Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 67.9 kB | ⚠️ +171 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 15.4 kB | 15.8 kB | ⚠️ +400 B | | Client `main` gzip Size | 5.33 kB | 5.5 kB | ⚠️ +171 B | | Client `commons` Size | 188 kB | 188 kB | ✓ | | Client `commons` gzip Size | 61.1 kB | 61.1 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Base Rendered Size | 1.35 kB | 1.35 kB | ✓ | | Build Dir Size | 705 kB | 707 kB | ⚠️ +1.94 kB |
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 14.8s | 14.4s | -366ms | | `node_modules` Size | 45.9 MB | 45.9 MB | ⚠️ +6.63 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 207 kB | ⚠️ +400 B | | Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 67.9 kB | ⚠️ +171 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 15.4 kB | 15.8 kB | ⚠️ +400 B | | Client `main` gzip Size | 5.33 kB | 5.5 kB | ⚠️ +171 B | | Client `commons` Size | 188 kB | 188 kB | ✓ | | Client `commons` gzip Size | 61.1 kB | 61.1 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Serverless `pages/link` Size | 252 kB | 252 kB | ✓ | | Serverless `pages/link` gzip Size | 68 kB | 68 kB | ⚠️ +2 B | | Serverless `pages/index` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/index` gzip Size | 65.8 kB | 65.8 kB | ✓ | | Serverless `pages/_error` Size | 244 kB | 244 kB | ✓ | | Serverless `pages/_error` gzip Size | 65.5 kB | 65.5 kB | ✓ | | Serverless `pages/routerDirect` Size | 246 kB | 246 kB | ✓ | | Serverless `pages/routerDirect` gzip Size | 65.7 kB | 65.7 kB | ⚠️ +2 B | | Serverless `pages/withRouter` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/withRouter` gzip Size | 65.9 kB | 65.9 kB | ⚠️ +2 B | | Build Dir Size | 1.89 MB | 1.9 MB | ⚠️ +1.94 kB |
Diff for main.js ```diff @@ -1083,7 +1083,7 @@ var _set = _interopRequireDefault(__webpack_require__("ttDY")); var _mitt = _interopRequireDefault(__webpack_require__("kiME")); var _unfetch = _interopRequireDefault(__webpack_require__("m/Gl")); -/* global document */ +/* global document, window */ // smaller version of https://gist.github.com/igrigorik/a02f2359f3bc50ca7a9c @@ -1101,6 +1101,26 @@ function supportsPreload(list) { var hasPreload = supportsPreload(document.createElement('link').relList); +function createPreloadLink(url) { + var link = document.createElement('link'); + link.rel = 'preload'; + link.crossOrigin = undefined; + link.href = url; + link.as = 'script'; + document.head.appendChild(link); +} // Retrieve a list of dependencies for a given route from the build manifest + + +function getDependencies(route, _m) { + if ((_m = window.__BUILD_MANIFEST) && (_m = _m.pages[route])) { + return _m.map(function (url) { + return "/_next/" + url; + }); + } + + return []; +} + var PageLoader = /*#__PURE__*/ function () { @@ -1165,11 +1185,16 @@ function () { if (document.getElementById("__NEXT_PAGE__" + route)) { return; - } // Load the script if not asked to load yet. - + } if (!_this3.loadingRoutes[route]) { - _this3.loadScript(route); + getDependencies(route).forEach(function (d) { + if (!document.querySelector("script[src^=\"" + d + "\"]")) { + _this3.loadScript(d, route); + } + }); + + _this3.loadRoute(route); _this3.loadingRoutes[route] = true; } @@ -1201,14 +1226,14 @@ function () { }); } }, { - key: "loadScript", - value: function loadScript(route) { + key: "loadRoute", + value: function loadRoute(route) { var _this = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee() { - var scriptRoute, script, url; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee$(_context) { while (1) { switch (_context.prev = _context.next) { @@ -1219,38 +1244,46 @@ function () { case 2: route = _this.normalizeRoute(route); scriptRoute = route === '/' ? '/index.js' : route + ".js"; - script = document.createElement('script'); - - if (false) {} - url = _this.assetPrefix + "/_next/static/" + encodeURIComponent(_this.buildId) + "/pages" + scriptRoute; - script.crossOrigin = undefined; - script.src = url; - script.onerror = function () { - var error = new Error("Error loading script " + url); - error.code = 'PAGE_LOAD_ERROR'; + _this.loadScript(url, route); - _this.pageRegisterEvents.emit(route, { - error: error - }); - }; - - document.body.appendChild(script); - - case 11: + case 6: case "end": return _context.stop(); } } }, _callee); }))(); + } + }, { + key: "loadScript", + value: function loadScript(url, route) { + var _this5 = this; + + var script = document.createElement('script'); + + if (false) {} + + script.crossOrigin = undefined; + script.src = url; + + script.onerror = function () { + var error = new Error("Error loading script " + url); + error.code = 'PAGE_LOAD_ERROR'; + + _this5.pageRegisterEvents.emit(route, { + error: error + }); + }; + + document.body.appendChild(script); } // This method if called by the route code. }, { key: "registerPage", value: function registerPage(route, regFn) { - var _this5 = this; + var _this6 = this; var register = function register() { try { @@ -1258,21 +1291,21 @@ function () { error = _regFn.error, page = _regFn.page; - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error, page: page }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error, page: page }); } catch (error) { - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error }); } @@ -1284,13 +1317,13 @@ function () { } }, { key: "prefetch", - value: function prefetch(route) { + value: function prefetch(route, isDependency) { var _this2 = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee2() { - var scriptRoute, link; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee2$(_context2) { while (1) { switch (_context2.prev = _context2.next) { @@ -1325,32 +1358,45 @@ function () { return _context2.abrupt("return"); case 9: + if (!isDependency) { + getDependencies(route).forEach(function (url) { + _this2.prefetch(url, true); + }); + } // Feature detection is used to see if preload is supported + // If not fall back to loading script tags before the page is loaded + // https://caniuse.com/#feat=link-rel-preload + + if (!hasPreload) { - _context2.next = 19; + _context2.next = 16; break; } - _context2.next = 12; + _context2.next = 13; return _this2.promisedBuildId; - case 12: - link = document.createElement('link'); - link.rel = 'preload'; - link.crossOrigin = undefined; - link.href = _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; - link.as = 'script'; - document.head.appendChild(link); + case 13: + url = isDependency ? route : _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; + createPreloadLink(url); + return _context2.abrupt("return"); + + case 16: + if (!isDependency) { + _context2.next = 18; + break; + } + return _context2.abrupt("return"); - case 19: + case 18: if (!(document.readyState === 'complete')) { - _context2.next = 23; + _context2.next = 22; break; } return _context2.abrupt("return", _this2.loadPage(route)["catch"](function () {})); - case 23: + case 22: return _context2.abrupt("return", new _promise["default"](function (resolve) { window.addEventListener('load', function () { _this2.loadPage(route).then(function () { @@ -1361,7 +1407,7 @@ function () { }); })); - case 24: + case 23: case "end": return _context2.stop(); } ```
github-actions[bot] commented 5 years ago

Stats from current PR

Click to expand stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 13s | 12.8s | -153ms | | `node_modules` Size | 45.9 MB | 45.9 MB | ⚠️ +7.98 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 207 kB | ⚠️ +394 B | | Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 67.9 kB | ⚠️ +168 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ⚠️ +1 B | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 300 B | 301 B | ⚠️ +1 B | | Client `main` Size | 15.4 kB | 15.8 kB | ⚠️ +394 B | | Client `main` gzip Size | 5.33 kB | 5.49 kB | ⚠️ +167 B | | Client `commons` Size | 188 kB | 188 kB | ✓ | | Client `commons` gzip Size | 61.1 kB | 61.1 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Base Rendered Size | 1.35 kB | 1.35 kB | ✓ | | Build Dir Size | 705 kB | 707 kB | ⚠️ +1.93 kB |
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 13.9s | 14s | ⚠️ +97ms | | `node_modules` Size | 45.9 MB | 45.9 MB | ⚠️ +7.98 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 207 kB | ⚠️ +394 B | | Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 67.9 kB | ⚠️ +168 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 15.4 kB | 15.8 kB | ⚠️ +394 B | | Client `main` gzip Size | 5.33 kB | 5.49 kB | ⚠️ +168 B | | Client `commons` Size | 188 kB | 188 kB | ✓ | | Client `commons` gzip Size | 61.1 kB | 61.1 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Serverless `pages/link` Size | 252 kB | 252 kB | ✓ | | Serverless `pages/link` gzip Size | 68 kB | 68 kB | -1 B | | Serverless `pages/index` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/index` gzip Size | 65.8 kB | 65.8 kB | -1 B | | Serverless `pages/_error` Size | 244 kB | 244 kB | ✓ | | Serverless `pages/_error` gzip Size | 65.5 kB | 65.5 kB | -1 B | | Serverless `pages/routerDirect` Size | 246 kB | 246 kB | ✓ | | Serverless `pages/routerDirect` gzip Size | 65.7 kB | 65.7 kB | ✓ | | Serverless `pages/withRouter` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/withRouter` gzip Size | 65.9 kB | 65.9 kB | -1 B | | Build Dir Size | 1.89 MB | 1.9 MB | ⚠️ +1.93 kB |
Diff for main.js ```diff @@ -1083,7 +1083,7 @@ var _set = _interopRequireDefault(__webpack_require__("ttDY")); var _mitt = _interopRequireDefault(__webpack_require__("kiME")); var _unfetch = _interopRequireDefault(__webpack_require__("m/Gl")); -/* global document */ +/* global document, window */ // smaller version of https://gist.github.com/igrigorik/a02f2359f3bc50ca7a9c @@ -1101,6 +1101,26 @@ function supportsPreload(list) { var hasPreload = supportsPreload(document.createElement('link').relList); +function createPreloadLink(url) { + var link = document.createElement('link'); + link.rel = 'preload'; + link.crossOrigin = undefined; + link.href = url; + link.as = 'script'; + document.head.appendChild(link); +} // Retrieve a list of dependencies for a given route from the build manifest + + +function getDependencies(route, _m) { + if ((_m = window.__BUILD_MANIFEST) && (_m = _m[route])) { + return _m.map(function (url) { + return "/_next/" + url; + }); + } + + return []; +} + var PageLoader = /*#__PURE__*/ function () { @@ -1165,11 +1185,16 @@ function () { if (document.getElementById("__NEXT_PAGE__" + route)) { return; - } // Load the script if not asked to load yet. - + } if (!_this3.loadingRoutes[route]) { - _this3.loadScript(route); + getDependencies(route).forEach(function (d) { + if (!document.querySelector("script[src^=\"" + d + "\"]")) { + _this3.loadScript(d, route); + } + }); + + _this3.loadRoute(route); _this3.loadingRoutes[route] = true; } @@ -1201,14 +1226,14 @@ function () { }); } }, { - key: "loadScript", - value: function loadScript(route) { + key: "loadRoute", + value: function loadRoute(route) { var _this = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee() { - var scriptRoute, script, url; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee$(_context) { while (1) { switch (_context.prev = _context.next) { @@ -1219,38 +1244,46 @@ function () { case 2: route = _this.normalizeRoute(route); scriptRoute = route === '/' ? '/index.js' : route + ".js"; - script = document.createElement('script'); - - if (false) {} - url = _this.assetPrefix + "/_next/static/" + encodeURIComponent(_this.buildId) + "/pages" + scriptRoute; - script.crossOrigin = undefined; - script.src = url; - script.onerror = function () { - var error = new Error("Error loading script " + url); - error.code = 'PAGE_LOAD_ERROR'; + _this.loadScript(url, route); - _this.pageRegisterEvents.emit(route, { - error: error - }); - }; - - document.body.appendChild(script); - - case 11: + case 6: case "end": return _context.stop(); } } }, _callee); }))(); + } + }, { + key: "loadScript", + value: function loadScript(url, route) { + var _this5 = this; + + var script = document.createElement('script'); + + if (false) {} + + script.crossOrigin = undefined; + script.src = url; + + script.onerror = function () { + var error = new Error("Error loading script " + url); + error.code = 'PAGE_LOAD_ERROR'; + + _this5.pageRegisterEvents.emit(route, { + error: error + }); + }; + + document.body.appendChild(script); } // This method if called by the route code. }, { key: "registerPage", value: function registerPage(route, regFn) { - var _this5 = this; + var _this6 = this; var register = function register() { try { @@ -1258,21 +1291,21 @@ function () { error = _regFn.error, page = _regFn.page; - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error, page: page }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error, page: page }); } catch (error) { - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error }); } @@ -1284,13 +1317,13 @@ function () { } }, { key: "prefetch", - value: function prefetch(route) { + value: function prefetch(route, isDependency) { var _this2 = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee2() { - var scriptRoute, link; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee2$(_context2) { while (1) { switch (_context2.prev = _context2.next) { @@ -1325,32 +1358,45 @@ function () { return _context2.abrupt("return"); case 9: + if (!isDependency) { + getDependencies(route).forEach(function (url) { + _this2.prefetch(url, true); + }); + } // Feature detection is used to see if preload is supported + // If not fall back to loading script tags before the page is loaded + // https://caniuse.com/#feat=link-rel-preload + + if (!hasPreload) { - _context2.next = 19; + _context2.next = 16; break; } - _context2.next = 12; + _context2.next = 13; return _this2.promisedBuildId; - case 12: - link = document.createElement('link'); - link.rel = 'preload'; - link.crossOrigin = undefined; - link.href = _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; - link.as = 'script'; - document.head.appendChild(link); + case 13: + url = isDependency ? route : _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; + createPreloadLink(url); + return _context2.abrupt("return"); + + case 16: + if (!isDependency) { + _context2.next = 18; + break; + } + return _context2.abrupt("return"); - case 19: + case 18: if (!(document.readyState === 'complete')) { - _context2.next = 23; + _context2.next = 22; break; } return _context2.abrupt("return", _this2.loadPage(route)["catch"](function () {})); - case 23: + case 22: return _context2.abrupt("return", new _promise["default"](function (resolve) { window.addEventListener('load', function () { _this2.loadPage(route).then(function () { @@ -1361,7 +1407,7 @@ function () { }); })); - case 24: + case 23: case "end": return _context2.stop(); } ```
github-actions[bot] commented 5 years ago

Stats from current PR

Click to expand stats ✅ Total Bundle Size Decrease ✅ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 13.2s | 13.3s | ⚠️ +37ms | | `node_modules` Size | 45.9 MB | 45.9 MB | ⚠️ +7.79 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 206 kB | -192 B | | Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 67.8 kB | ⚠️ +35 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 15.4 kB | 15.2 kB | -192 B | | Client `main` gzip Size | 5.33 kB | 5.36 kB | ⚠️ +35 B | | Client `commons` Size | 188 kB | 188 kB | ✓ | | Client `commons` gzip Size | 61.1 kB | 61.1 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Base Rendered Size | 1.35 kB | 1.35 kB | ✓ | | Build Dir Size | 705 kB | 705 kB | ⚠️ +357 B |
Click to expand serverless stats ✅ Total Bundle Size Decrease ✅ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 14.3s | 14.3s | -21ms | | `node_modules` Size | 45.9 MB | 45.9 MB | ⚠️ +7.79 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 206 kB | -192 B | | Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 67.8 kB | ⚠️ +35 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 15.4 kB | 15.2 kB | -192 B | | Client `main` gzip Size | 5.33 kB | 5.36 kB | ⚠️ +35 B | | Client `commons` Size | 188 kB | 188 kB | ✓ | | Client `commons` gzip Size | 61.1 kB | 61.1 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Serverless `pages/link` Size | 252 kB | 252 kB | ✓ | | Serverless `pages/link` gzip Size | 68 kB | 68 kB | -2 B | | Serverless `pages/index` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/index` gzip Size | 65.8 kB | 65.8 kB | -2 B | | Serverless `pages/_error` Size | 244 kB | 244 kB | ✓ | | Serverless `pages/_error` gzip Size | 65.5 kB | 65.5 kB | -1 B | | Serverless `pages/routerDirect` Size | 246 kB | 246 kB | ✓ | | Serverless `pages/routerDirect` gzip Size | 65.7 kB | 65.7 kB | ✓ | | Serverless `pages/withRouter` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/withRouter` gzip Size | 65.9 kB | 65.9 kB | -1 B | | Build Dir Size | 1.89 MB | 1.9 MB | ⚠️ +357 B |
Diff for main.js ```diff @@ -1,20 +1,5 @@ (window["webpackJsonp"] = window["webpackJsonp"] || []).push([[8],{ -/***/ "+iuc": -/***/ (function(module, exports, __webpack_require__) { - -__webpack_require__("wgeU"); -__webpack_require__("FlQf"); -__webpack_require__("bBy9"); -__webpack_require__("B9jh"); -__webpack_require__("dL40"); -__webpack_require__("xvv9"); -__webpack_require__("V+O7"); -module.exports = __webpack_require__("WEpk").Set; - - -/***/ }), - /***/ "+oT+": /***/ (function(module, exports, __webpack_require__) { @@ -69,28 +54,6 @@ __webpack_require__("cHUd")('Map'); /***/ }), -/***/ "B9jh": -/***/ (function(module, exports, __webpack_require__) { - -"use strict"; - -var strong = __webpack_require__("Wu5q"); -var validate = __webpack_require__("n3ko"); -var SET = 'Set'; - -// 23.2 Set Objects -module.exports = __webpack_require__("raTm")(SET, function (get) { - return function Set() { return get(this, arguments.length > 0 ? arguments[0] : undefined); }; -}, { - // 23.2.3.1 Set.prototype.add(value) - add: function add(value) { - return strong.def(validate(this, SET), value = value === 0 ? 0 : value, value); - } -}, strong); - - -/***/ }), - /***/ "BMP1": /***/ (function(module, exports, __webpack_require__) { @@ -875,15 +838,6 @@ module.exports = __webpack_require__("WEpk").Map; /***/ }), -/***/ "V+O7": -/***/ (function(module, exports, __webpack_require__) { - -// https://tc39.github.io/proposal-setmap-offrom/#sec-set.from -__webpack_require__("aPfg")('Set'); - - -/***/ }), - /***/ "XLbu": /***/ (function(module, exports, __webpack_require__) { @@ -951,17 +905,6 @@ exports.DataManager = DataManager; /***/ }), -/***/ "dL40": -/***/ (function(module, exports, __webpack_require__) { - -// https://github.com/DavidBruant/Map-Set.prototype.toJSON -var $export = __webpack_require__("Y7ZC"); - -$export($export.P + $export.R, 'Set', { toJSON: __webpack_require__("8iia")('Set') }); - - -/***/ }), - /***/ "dVTT": /***/ (function(module, exports, __webpack_require__) { @@ -1039,22 +982,6 @@ exports.DataManagerContext = React.createContext(null); /***/ }), -/***/ "ttDY": -/***/ (function(module, exports, __webpack_require__) { - -module.exports = __webpack_require__("+iuc"); - -/***/ }), - -/***/ "xvv9": -/***/ (function(module, exports, __webpack_require__) { - -// https://tc39.github.io/proposal-setmap-offrom/#sec-set.of -__webpack_require__("cHUd")('Set'); - - -/***/ }), - /***/ "zmvN": /***/ (function(module, exports, __webpack_require__) { @@ -1078,12 +1005,10 @@ var _asyncToGenerator2 = _interopRequireDefault(__webpack_require__("+oT+")); var _promise = _interopRequireDefault(__webpack_require__("eVuF")); -var _set = _interopRequireDefault(__webpack_require__("ttDY")); - var _mitt = _interopRequireDefault(__webpack_require__("kiME")); var _unfetch = _interopRequireDefault(__webpack_require__("m/Gl")); -/* global document */ +/* global document, window */ // smaller version of https://gist.github.com/igrigorik/a02f2359f3bc50ca7a9c @@ -1101,6 +1026,26 @@ function supportsPreload(list) { var hasPreload = supportsPreload(document.createElement('link').relList); +function createPreloadLink(url) { + var link = document.createElement('link'); + link.rel = 'preload'; + link.crossOrigin = undefined; + link.href = url; + link.as = 'script'; + document.head.appendChild(link); +} // Retrieve a list of dependencies for a given route from the build manifest + + +function getDependencies(route, _m) { + if ((_m = window.__BUILD_MANIFEST) && (_m = _m[route])) { + return _m.map(function (url) { + return "/_next/" + url; + }); + } + + return []; +} + var PageLoader = /*#__PURE__*/ function () { @@ -1109,7 +1054,6 @@ function () { this.buildId = buildId; this.assetPrefix = assetPrefix; this.pageCache = {}; - this.prefetchCache = new _set["default"](); this.pageRegisterEvents = (0, _mitt["default"])(); this.loadingRoutes = {}; this.promisedBuildId = _promise["default"].resolve(); @@ -1165,11 +1109,16 @@ function () { if (document.getElementById("__NEXT_PAGE__" + route)) { return; - } // Load the script if not asked to load yet. - + } if (!_this3.loadingRoutes[route]) { - _this3.loadScript(route); + getDependencies(route).forEach(function (d) { + if (!document.querySelector("script[src^=\"" + d + "\"]")) { + _this3.loadScript(d, route); + } + }); + + _this3.loadRoute(route); _this3.loadingRoutes[route] = true; } @@ -1201,14 +1150,14 @@ function () { }); } }, { - key: "loadScript", - value: function loadScript(route) { + key: "loadRoute", + value: function loadRoute(route) { var _this = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee() { - var scriptRoute, script, url; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee$(_context) { while (1) { switch (_context.prev = _context.next) { @@ -1219,38 +1168,46 @@ function () { case 2: route = _this.normalizeRoute(route); scriptRoute = route === '/' ? '/index.js' : route + ".js"; - script = document.createElement('script'); - - if (false) {} - url = _this.assetPrefix + "/_next/static/" + encodeURIComponent(_this.buildId) + "/pages" + scriptRoute; - script.crossOrigin = undefined; - script.src = url; - - script.onerror = function () { - var error = new Error("Error loading script " + url); - error.code = 'PAGE_LOAD_ERROR'; - - _this.pageRegisterEvents.emit(route, { - error: error - }); - }; - document.body.appendChild(script); + _this.loadScript(url, route); - case 11: + case 6: case "end": return _context.stop(); } } }, _callee); }))(); + } + }, { + key: "loadScript", + value: function loadScript(url, route) { + var _this5 = this; + + var script = document.createElement('script'); + + if (false) {} + + script.crossOrigin = undefined; + script.src = url; + + script.onerror = function () { + var error = new Error("Error loading script " + url); + error.code = 'PAGE_LOAD_ERROR'; + + _this5.pageRegisterEvents.emit(route, { + error: error + }); + }; + + document.body.appendChild(script); } // This method if called by the route code. }, { key: "registerPage", value: function registerPage(route, regFn) { - var _this5 = this; + var _this6 = this; var register = function register() { try { @@ -1258,21 +1215,21 @@ function () { error = _regFn.error, page = _regFn.page; - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error, page: page }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error, page: page }); } catch (error) { - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error }); } @@ -1284,73 +1241,83 @@ function () { } }, { key: "prefetch", - value: function prefetch(route) { + value: function prefetch(route, isDependency) { var _this2 = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee2() { - var scriptRoute, link; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee2$(_context2) { while (1) { switch (_context2.prev = _context2.next) { case 0: + _context2.next = 2; + return _this2.promisedBuildId; + + case 2: route = _this2.normalizeRoute(route); scriptRoute = (route === '/' ? '/index' : route) + ".js"; if (false) {} - if (!(_this2.prefetchCache.has(scriptRoute) || document.getElementById("__NEXT_PAGE__" + route))) { - _context2.next = 5; + url = isDependency ? route : _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; + + if (!(document.querySelector("link[rel=\"preload\"][href^=\"" + url + "\"]") || document.getElementById("__NEXT_PAGE__" + route))) { + _context2.next = 8; break; } return _context2.abrupt("return"); - case 5: - _this2.prefetchCache.add(scriptRoute); // Inspired by quicklink, license: https://github.com/GoogleChromeLabs/quicklink/blob/master/LICENSE - // Don't prefetch if the user is on 2G / Don't prefetch if Save-Data is enabled - - + case 8: if (!('connection' in navigator)) { - _context2.next = 9; + _context2.next = 11; break; } if (!((navigator.connection.effectiveType || '').indexOf('2g') !== -1 || navigator.connection.saveData)) { - _context2.next = 9; + _context2.next = 11; break; } return _context2.abrupt("return"); - case 9: + case 11: + if (!isDependency) { + getDependencies(route).forEach(function (url) { + _this2.prefetch(url, true); + }); + } // Feature detection is used to see if preload is supported + // If not fall back to loading script tags before the page is loaded + // https://caniuse.com/#feat=link-rel-preload + + if (!hasPreload) { - _context2.next = 19; + _context2.next = 15; break; } - _context2.next = 12; - return _this2.promisedBuildId; + createPreloadLink(url); + return _context2.abrupt("return"); + + case 15: + if (!isDependency) { + _context2.next = 17; + break; + } - case 12: - link = document.createElement('link'); - link.rel = 'preload'; - link.crossOrigin = undefined; - link.href = _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; - link.as = 'script'; - document.head.appendChild(link); return _context2.abrupt("return"); - case 19: + case 17: if (!(document.readyState === 'complete')) { - _context2.next = 23; + _context2.next = 21; break; } return _context2.abrupt("return", _this2.loadPage(route)["catch"](function () {})); - case 23: + case 21: return _context2.abrupt("return", new _promise["default"](function (resolve) { window.addEventListener('load', function () { _this2.loadPage(route).then(function () { @@ -1361,7 +1328,7 @@ function () { }); })); - case 24: + case 22: case "end": return _context2.stop(); } ```
github-actions[bot] commented 5 years ago

Stats from current PR

Click to expand stats ✅ Total Bundle Size Decrease ✅ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 13.3s | 13.5s | ⚠️ +180ms | | `node_modules` Size | 45.9 MB | 45.9 MB | ⚠️ +7.79 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 206 kB | -192 B | | Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 67.8 kB | ⚠️ +35 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 15.4 kB | 15.2 kB | -192 B | | Client `main` gzip Size | 5.33 kB | 5.36 kB | ⚠️ +35 B | | Client `commons` Size | 188 kB | 188 kB | ✓ | | Client `commons` gzip Size | 61.1 kB | 61.1 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Base Rendered Size | 1.35 kB | 1.35 kB | ✓ | | Build Dir Size | 705 kB | 705 kB | ⚠️ +357 B |
Click to expand serverless stats ✅ Total Bundle Size Decrease ✅ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 14.2s | 14.3s | ⚠️ +102ms | | `node_modules` Size | 45.9 MB | 45.9 MB | ⚠️ +7.79 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 206 kB | -192 B | | Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 67.8 kB | ⚠️ +35 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 15.4 kB | 15.2 kB | -192 B | | Client `main` gzip Size | 5.33 kB | 5.36 kB | ⚠️ +35 B | | Client `commons` Size | 188 kB | 188 kB | ✓ | | Client `commons` gzip Size | 61.1 kB | 61.1 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Serverless `pages/link` Size | 252 kB | 252 kB | ✓ | | Serverless `pages/link` gzip Size | 68 kB | 68 kB | -2 B | | Serverless `pages/index` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/index` gzip Size | 65.8 kB | 65.8 kB | -1 B | | Serverless `pages/_error` Size | 244 kB | 244 kB | ✓ | | Serverless `pages/_error` gzip Size | 65.5 kB | 65.5 kB | -2 B | | Serverless `pages/routerDirect` Size | 246 kB | 246 kB | ✓ | | Serverless `pages/routerDirect` gzip Size | 65.7 kB | 65.7 kB | -1 B | | Serverless `pages/withRouter` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/withRouter` gzip Size | 65.9 kB | 65.9 kB | -1 B | | Build Dir Size | 1.89 MB | 1.9 MB | ⚠️ +357 B |
Diff for main.js ```diff @@ -1,20 +1,5 @@ (window["webpackJsonp"] = window["webpackJsonp"] || []).push([[8],{ -/***/ "+iuc": -/***/ (function(module, exports, __webpack_require__) { - -__webpack_require__("wgeU"); -__webpack_require__("FlQf"); -__webpack_require__("bBy9"); -__webpack_require__("B9jh"); -__webpack_require__("dL40"); -__webpack_require__("xvv9"); -__webpack_require__("V+O7"); -module.exports = __webpack_require__("WEpk").Set; - - -/***/ }), - /***/ "+oT+": /***/ (function(module, exports, __webpack_require__) { @@ -69,28 +54,6 @@ __webpack_require__("cHUd")('Map'); /***/ }), -/***/ "B9jh": -/***/ (function(module, exports, __webpack_require__) { - -"use strict"; - -var strong = __webpack_require__("Wu5q"); -var validate = __webpack_require__("n3ko"); -var SET = 'Set'; - -// 23.2 Set Objects -module.exports = __webpack_require__("raTm")(SET, function (get) { - return function Set() { return get(this, arguments.length > 0 ? arguments[0] : undefined); }; -}, { - // 23.2.3.1 Set.prototype.add(value) - add: function add(value) { - return strong.def(validate(this, SET), value = value === 0 ? 0 : value, value); - } -}, strong); - - -/***/ }), - /***/ "BMP1": /***/ (function(module, exports, __webpack_require__) { @@ -875,15 +838,6 @@ module.exports = __webpack_require__("WEpk").Map; /***/ }), -/***/ "V+O7": -/***/ (function(module, exports, __webpack_require__) { - -// https://tc39.github.io/proposal-setmap-offrom/#sec-set.from -__webpack_require__("aPfg")('Set'); - - -/***/ }), - /***/ "XLbu": /***/ (function(module, exports, __webpack_require__) { @@ -951,17 +905,6 @@ exports.DataManager = DataManager; /***/ }), -/***/ "dL40": -/***/ (function(module, exports, __webpack_require__) { - -// https://github.com/DavidBruant/Map-Set.prototype.toJSON -var $export = __webpack_require__("Y7ZC"); - -$export($export.P + $export.R, 'Set', { toJSON: __webpack_require__("8iia")('Set') }); - - -/***/ }), - /***/ "dVTT": /***/ (function(module, exports, __webpack_require__) { @@ -1039,22 +982,6 @@ exports.DataManagerContext = React.createContext(null); /***/ }), -/***/ "ttDY": -/***/ (function(module, exports, __webpack_require__) { - -module.exports = __webpack_require__("+iuc"); - -/***/ }), - -/***/ "xvv9": -/***/ (function(module, exports, __webpack_require__) { - -// https://tc39.github.io/proposal-setmap-offrom/#sec-set.of -__webpack_require__("cHUd")('Set'); - - -/***/ }), - /***/ "zmvN": /***/ (function(module, exports, __webpack_require__) { @@ -1078,12 +1005,10 @@ var _asyncToGenerator2 = _interopRequireDefault(__webpack_require__("+oT+")); var _promise = _interopRequireDefault(__webpack_require__("eVuF")); -var _set = _interopRequireDefault(__webpack_require__("ttDY")); - var _mitt = _interopRequireDefault(__webpack_require__("kiME")); var _unfetch = _interopRequireDefault(__webpack_require__("m/Gl")); -/* global document */ +/* global document, window */ // smaller version of https://gist.github.com/igrigorik/a02f2359f3bc50ca7a9c @@ -1101,6 +1026,26 @@ function supportsPreload(list) { var hasPreload = supportsPreload(document.createElement('link').relList); +function createPreloadLink(url) { + var link = document.createElement('link'); + link.rel = 'preload'; + link.crossOrigin = undefined; + link.href = url; + link.as = 'script'; + document.head.appendChild(link); +} // Retrieve a list of dependencies for a given route from the build manifest + + +function getDependencies(route, _m) { + if ((_m = window.__BUILD_MANIFEST) && (_m = _m[route])) { + return _m.map(function (url) { + return "/_next/" + url; + }); + } + + return []; +} + var PageLoader = /*#__PURE__*/ function () { @@ -1109,7 +1054,6 @@ function () { this.buildId = buildId; this.assetPrefix = assetPrefix; this.pageCache = {}; - this.prefetchCache = new _set["default"](); this.pageRegisterEvents = (0, _mitt["default"])(); this.loadingRoutes = {}; this.promisedBuildId = _promise["default"].resolve(); @@ -1165,11 +1109,16 @@ function () { if (document.getElementById("__NEXT_PAGE__" + route)) { return; - } // Load the script if not asked to load yet. - + } if (!_this3.loadingRoutes[route]) { - _this3.loadScript(route); + getDependencies(route).forEach(function (d) { + if (!document.querySelector("script[src^=\"" + d + "\"]")) { + _this3.loadScript(d, route); + } + }); + + _this3.loadRoute(route); _this3.loadingRoutes[route] = true; } @@ -1201,14 +1150,14 @@ function () { }); } }, { - key: "loadScript", - value: function loadScript(route) { + key: "loadRoute", + value: function loadRoute(route) { var _this = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee() { - var scriptRoute, script, url; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee$(_context) { while (1) { switch (_context.prev = _context.next) { @@ -1219,38 +1168,46 @@ function () { case 2: route = _this.normalizeRoute(route); scriptRoute = route === '/' ? '/index.js' : route + ".js"; - script = document.createElement('script'); - - if (false) {} - url = _this.assetPrefix + "/_next/static/" + encodeURIComponent(_this.buildId) + "/pages" + scriptRoute; - script.crossOrigin = undefined; - script.src = url; - - script.onerror = function () { - var error = new Error("Error loading script " + url); - error.code = 'PAGE_LOAD_ERROR'; - - _this.pageRegisterEvents.emit(route, { - error: error - }); - }; - document.body.appendChild(script); + _this.loadScript(url, route); - case 11: + case 6: case "end": return _context.stop(); } } }, _callee); }))(); + } + }, { + key: "loadScript", + value: function loadScript(url, route) { + var _this5 = this; + + var script = document.createElement('script'); + + if (false) {} + + script.crossOrigin = undefined; + script.src = url; + + script.onerror = function () { + var error = new Error("Error loading script " + url); + error.code = 'PAGE_LOAD_ERROR'; + + _this5.pageRegisterEvents.emit(route, { + error: error + }); + }; + + document.body.appendChild(script); } // This method if called by the route code. }, { key: "registerPage", value: function registerPage(route, regFn) { - var _this5 = this; + var _this6 = this; var register = function register() { try { @@ -1258,21 +1215,21 @@ function () { error = _regFn.error, page = _regFn.page; - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error, page: page }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error, page: page }); } catch (error) { - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error }); } @@ -1284,73 +1241,83 @@ function () { } }, { key: "prefetch", - value: function prefetch(route) { + value: function prefetch(route, isDependency) { var _this2 = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee2() { - var scriptRoute, link; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee2$(_context2) { while (1) { switch (_context2.prev = _context2.next) { case 0: + _context2.next = 2; + return _this2.promisedBuildId; + + case 2: route = _this2.normalizeRoute(route); scriptRoute = (route === '/' ? '/index' : route) + ".js"; if (false) {} - if (!(_this2.prefetchCache.has(scriptRoute) || document.getElementById("__NEXT_PAGE__" + route))) { - _context2.next = 5; + url = isDependency ? route : _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; + + if (!(document.querySelector("link[rel=\"preload\"][href^=\"" + url + "\"]") || document.getElementById("__NEXT_PAGE__" + route))) { + _context2.next = 8; break; } return _context2.abrupt("return"); - case 5: - _this2.prefetchCache.add(scriptRoute); // Inspired by quicklink, license: https://github.com/GoogleChromeLabs/quicklink/blob/master/LICENSE - // Don't prefetch if the user is on 2G / Don't prefetch if Save-Data is enabled - - + case 8: if (!('connection' in navigator)) { - _context2.next = 9; + _context2.next = 11; break; } if (!((navigator.connection.effectiveType || '').indexOf('2g') !== -1 || navigator.connection.saveData)) { - _context2.next = 9; + _context2.next = 11; break; } return _context2.abrupt("return"); - case 9: + case 11: + if (!isDependency) { + getDependencies(route).forEach(function (url) { + _this2.prefetch(url, true); + }); + } // Feature detection is used to see if preload is supported + // If not fall back to loading script tags before the page is loaded + // https://caniuse.com/#feat=link-rel-preload + + if (!hasPreload) { - _context2.next = 19; + _context2.next = 15; break; } - _context2.next = 12; - return _this2.promisedBuildId; + createPreloadLink(url); + return _context2.abrupt("return"); + + case 15: + if (!isDependency) { + _context2.next = 17; + break; + } - case 12: - link = document.createElement('link'); - link.rel = 'preload'; - link.crossOrigin = undefined; - link.href = _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; - link.as = 'script'; - document.head.appendChild(link); return _context2.abrupt("return"); - case 19: + case 17: if (!(document.readyState === 'complete')) { - _context2.next = 23; + _context2.next = 21; break; } return _context2.abrupt("return", _this2.loadPage(route)["catch"](function () {})); - case 23: + case 21: return _context2.abrupt("return", new _promise["default"](function (resolve) { window.addEventListener('load', function () { _this2.loadPage(route).then(function () { @@ -1361,7 +1328,7 @@ function () { }); })); - case 24: + case 22: case "end": return _context2.stop(); } ```
github-actions[bot] commented 5 years ago

Stats from current PR

Click to expand stats ✅ Total Bundle Size Decrease ✅ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 12.6s | 12.6s | -13ms | | `node_modules` Size | 45.9 MB | 45.9 MB | ⚠️ +7.98 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 206 kB | -192 B | | Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 67.8 kB | ⚠️ +35 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 15.4 kB | 15.2 kB | -192 B | | Client `main` gzip Size | 5.33 kB | 5.36 kB | ⚠️ +35 B | | Client `commons` Size | 188 kB | 188 kB | ✓ | | Client `commons` gzip Size | 61.1 kB | 61.1 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Base Rendered Size | 1.35 kB | 1.35 kB | ✓ | | Build Dir Size | 705 kB | 705 kB | ⚠️ +357 B |
Click to expand serverless stats ✅ Total Bundle Size Decrease ✅ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 13.4s | 13.6s | ⚠️ +236ms | | `node_modules` Size | 45.9 MB | 45.9 MB | ⚠️ +7.98 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 206 kB | -192 B | | Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 67.8 kB | ⚠️ +35 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ⚠️ +1 B | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 300 B | 301 B | ⚠️ +1 B | | Client `main` Size | 15.4 kB | 15.2 kB | -192 B | | Client `main` gzip Size | 5.33 kB | 5.36 kB | ⚠️ +34 B | | Client `commons` Size | 188 kB | 188 kB | ✓ | | Client `commons` gzip Size | 61.1 kB | 61.1 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Serverless `pages/link` Size | 252 kB | 252 kB | ✓ | | Serverless `pages/link` gzip Size | 68 kB | 68 kB | -2 B | | Serverless `pages/index` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/index` gzip Size | 65.8 kB | 65.8 kB | -1 B | | Serverless `pages/_error` Size | 244 kB | 244 kB | ✓ | | Serverless `pages/_error` gzip Size | 65.5 kB | 65.5 kB | -1 B | | Serverless `pages/routerDirect` Size | 246 kB | 246 kB | ✓ | | Serverless `pages/routerDirect` gzip Size | 65.7 kB | 65.7 kB | ✓ | | Serverless `pages/withRouter` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/withRouter` gzip Size | 65.9 kB | 65.9 kB | -1 B | | Build Dir Size | 1.89 MB | 1.9 MB | ⚠️ +357 B |
Diff for main.js ```diff @@ -1,19 +1,4 @@ -(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[8],{ - -/***/ "+iuc": -/***/ (function(module, exports, __webpack_require__) { - -__webpack_require__("wgeU"); -__webpack_require__("FlQf"); -__webpack_require__("bBy9"); -__webpack_require__("B9jh"); -__webpack_require__("dL40"); -__webpack_require__("xvv9"); -__webpack_require__("V+O7"); -module.exports = __webpack_require__("WEpk").Set; - - -/***/ }), +(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[2],{ /***/ "+oT+": /***/ (function(module, exports, __webpack_require__) { @@ -69,28 +54,6 @@ __webpack_require__("cHUd")('Map'); /***/ }), -/***/ "B9jh": -/***/ (function(module, exports, __webpack_require__) { - -"use strict"; - -var strong = __webpack_require__("Wu5q"); -var validate = __webpack_require__("n3ko"); -var SET = 'Set'; - -// 23.2 Set Objects -module.exports = __webpack_require__("raTm")(SET, function (get) { - return function Set() { return get(this, arguments.length > 0 ? arguments[0] : undefined); }; -}, { - // 23.2.3.1 Set.prototype.add(value) - add: function add(value) { - return strong.def(validate(this, SET), value = value === 0 ? 0 : value, value); - } -}, strong); - - -/***/ }), - /***/ "BMP1": /***/ (function(module, exports, __webpack_require__) { @@ -875,15 +838,6 @@ module.exports = __webpack_require__("WEpk").Map; /***/ }), -/***/ "V+O7": -/***/ (function(module, exports, __webpack_require__) { - -// https://tc39.github.io/proposal-setmap-offrom/#sec-set.from -__webpack_require__("aPfg")('Set'); - - -/***/ }), - /***/ "XLbu": /***/ (function(module, exports, __webpack_require__) { @@ -951,17 +905,6 @@ exports.DataManager = DataManager; /***/ }), -/***/ "dL40": -/***/ (function(module, exports, __webpack_require__) { - -// https://github.com/DavidBruant/Map-Set.prototype.toJSON -var $export = __webpack_require__("Y7ZC"); - -$export($export.P + $export.R, 'Set', { toJSON: __webpack_require__("8iia")('Set') }); - - -/***/ }), - /***/ "dVTT": /***/ (function(module, exports, __webpack_require__) { @@ -1039,22 +982,6 @@ exports.DataManagerContext = React.createContext(null); /***/ }), -/***/ "ttDY": -/***/ (function(module, exports, __webpack_require__) { - -module.exports = __webpack_require__("+iuc"); - -/***/ }), - -/***/ "xvv9": -/***/ (function(module, exports, __webpack_require__) { - -// https://tc39.github.io/proposal-setmap-offrom/#sec-set.of -__webpack_require__("cHUd")('Set'); - - -/***/ }), - /***/ "zmvN": /***/ (function(module, exports, __webpack_require__) { @@ -1078,12 +1005,10 @@ var _asyncToGenerator2 = _interopRequireDefault(__webpack_require__("+oT+")); var _promise = _interopRequireDefault(__webpack_require__("eVuF")); -var _set = _interopRequireDefault(__webpack_require__("ttDY")); - var _mitt = _interopRequireDefault(__webpack_require__("kiME")); var _unfetch = _interopRequireDefault(__webpack_require__("m/Gl")); -/* global document */ +/* global document, window */ // smaller version of https://gist.github.com/igrigorik/a02f2359f3bc50ca7a9c @@ -1101,6 +1026,26 @@ function supportsPreload(list) { var hasPreload = supportsPreload(document.createElement('link').relList); +function createPreloadLink(url) { + var link = document.createElement('link'); + link.rel = 'preload'; + link.crossOrigin = undefined; + link.href = url; + link.as = 'script'; + document.head.appendChild(link); +} // Retrieve a list of dependencies for a given route from the build manifest + + +function getDependencies(route, _m) { + if ((_m = window.__BUILD_MANIFEST) && (_m = _m[route])) { + return _m.map(function (url) { + return "/_next/" + url; + }); + } + + return []; +} + var PageLoader = /*#__PURE__*/ function () { @@ -1109,7 +1054,6 @@ function () { this.buildId = buildId; this.assetPrefix = assetPrefix; this.pageCache = {}; - this.prefetchCache = new _set["default"](); this.pageRegisterEvents = (0, _mitt["default"])(); this.loadingRoutes = {}; this.promisedBuildId = _promise["default"].resolve(); @@ -1165,11 +1109,16 @@ function () { if (document.getElementById("__NEXT_PAGE__" + route)) { return; - } // Load the script if not asked to load yet. - + } if (!_this3.loadingRoutes[route]) { - _this3.loadScript(route); + getDependencies(route).forEach(function (d) { + if (!document.querySelector("script[src^=\"" + d + "\"]")) { + _this3.loadScript(d, route); + } + }); + + _this3.loadRoute(route); _this3.loadingRoutes[route] = true; } @@ -1201,14 +1150,14 @@ function () { }); } }, { - key: "loadScript", - value: function loadScript(route) { + key: "loadRoute", + value: function loadRoute(route) { var _this = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee() { - var scriptRoute, script, url; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee$(_context) { while (1) { switch (_context.prev = _context.next) { @@ -1219,38 +1168,46 @@ function () { case 2: route = _this.normalizeRoute(route); scriptRoute = route === '/' ? '/index.js' : route + ".js"; - script = document.createElement('script'); - - if (false) {} - url = _this.assetPrefix + "/_next/static/" + encodeURIComponent(_this.buildId) + "/pages" + scriptRoute; - script.crossOrigin = undefined; - script.src = url; - - script.onerror = function () { - var error = new Error("Error loading script " + url); - error.code = 'PAGE_LOAD_ERROR'; - - _this.pageRegisterEvents.emit(route, { - error: error - }); - }; - document.body.appendChild(script); + _this.loadScript(url, route); - case 11: + case 6: case "end": return _context.stop(); } } }, _callee); }))(); + } + }, { + key: "loadScript", + value: function loadScript(url, route) { + var _this5 = this; + + var script = document.createElement('script'); + + if (false) {} + + script.crossOrigin = undefined; + script.src = url; + + script.onerror = function () { + var error = new Error("Error loading script " + url); + error.code = 'PAGE_LOAD_ERROR'; + + _this5.pageRegisterEvents.emit(route, { + error: error + }); + }; + + document.body.appendChild(script); } // This method if called by the route code. }, { key: "registerPage", value: function registerPage(route, regFn) { - var _this5 = this; + var _this6 = this; var register = function register() { try { @@ -1258,21 +1215,21 @@ function () { error = _regFn.error, page = _regFn.page; - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error, page: page }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error, page: page }); } catch (error) { - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error }); } @@ -1284,73 +1241,83 @@ function () { } }, { key: "prefetch", - value: function prefetch(route) { + value: function prefetch(route, isDependency) { var _this2 = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee2() { - var scriptRoute, link; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee2$(_context2) { while (1) { switch (_context2.prev = _context2.next) { case 0: + _context2.next = 2; + return _this2.promisedBuildId; + + case 2: route = _this2.normalizeRoute(route); scriptRoute = (route === '/' ? '/index' : route) + ".js"; if (false) {} - if (!(_this2.prefetchCache.has(scriptRoute) || document.getElementById("__NEXT_PAGE__" + route))) { - _context2.next = 5; + url = isDependency ? route : _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; + + if (!(document.querySelector("link[rel=\"preload\"][href^=\"" + url + "\"]") || document.getElementById("__NEXT_PAGE__" + route))) { + _context2.next = 8; break; } return _context2.abrupt("return"); - case 5: - _this2.prefetchCache.add(scriptRoute); // Inspired by quicklink, license: https://github.com/GoogleChromeLabs/quicklink/blob/master/LICENSE - // Don't prefetch if the user is on 2G / Don't prefetch if Save-Data is enabled - - + case 8: if (!('connection' in navigator)) { - _context2.next = 9; + _context2.next = 11; break; } if (!((navigator.connection.effectiveType || '').indexOf('2g') !== -1 || navigator.connection.saveData)) { - _context2.next = 9; + _context2.next = 11; break; } return _context2.abrupt("return"); - case 9: + case 11: + if (!isDependency) { + getDependencies(route).forEach(function (url) { + _this2.prefetch(url, true); + }); + } // Feature detection is used to see if preload is supported + // If not fall back to loading script tags before the page is loaded + // https://caniuse.com/#feat=link-rel-preload + + if (!hasPreload) { - _context2.next = 19; + _context2.next = 15; break; } - _context2.next = 12; - return _this2.promisedBuildId; + createPreloadLink(url); + return _context2.abrupt("return"); + + case 15: + if (!isDependency) { + _context2.next = 17; + break; + } - case 12: - link = document.createElement('link'); - link.rel = 'preload'; - link.crossOrigin = undefined; - link.href = _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; - link.as = 'script'; - document.head.appendChild(link); return _context2.abrupt("return"); - case 19: + case 17: if (!(document.readyState === 'complete')) { - _context2.next = 23; + _context2.next = 21; break; } return _context2.abrupt("return", _this2.loadPage(route)["catch"](function () {})); - case 23: + case 21: return _context2.abrupt("return", new _promise["default"](function (resolve) { window.addEventListener('load', function () { _this2.loadPage(route).then(function () { @@ -1361,7 +1328,7 @@ function () { }); })); - case 24: + case 22: case "end": return _context2.stop(); } ```
github-actions[bot] commented 5 years ago

Stats from current PR

Click to expand stats ✅ Total Bundle Size Decrease ✅ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 13s | 12.8s | -215ms | | `node_modules` Size | 45.9 MB | 45.9 MB | ⚠️ +7.98 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 206 kB | -192 B | | Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 67.8 kB | ⚠️ +35 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 15.4 kB | 15.2 kB | -192 B | | Client `main` gzip Size | 5.33 kB | 5.36 kB | ⚠️ +35 B | | Client `commons` Size | 188 kB | 188 kB | ✓ | | Client `commons` gzip Size | 61.1 kB | 61.1 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Base Rendered Size | 1.35 kB | 1.35 kB | ✓ | | Build Dir Size | 705 kB | 705 kB | ⚠️ +357 B |
Click to expand serverless stats ✅ Total Bundle Size Decrease ✅ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 14.2s | 14.2s | -74ms | | `node_modules` Size | 45.9 MB | 45.9 MB | ⚠️ +7.98 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 206 kB | -192 B | | Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 67.8 kB | ⚠️ +35 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 15.4 kB | 15.2 kB | -192 B | | Client `main` gzip Size | 5.33 kB | 5.36 kB | ⚠️ +35 B | | Client `commons` Size | 188 kB | 188 kB | ✓ | | Client `commons` gzip Size | 61.1 kB | 61.1 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Serverless `pages/link` Size | 252 kB | 252 kB | ✓ | | Serverless `pages/link` gzip Size | 68 kB | 68 kB | -2 B | | Serverless `pages/index` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/index` gzip Size | 65.8 kB | 65.8 kB | -1 B | | Serverless `pages/_error` Size | 244 kB | 244 kB | ✓ | | Serverless `pages/_error` gzip Size | 65.5 kB | 65.5 kB | ✓ | | Serverless `pages/routerDirect` Size | 246 kB | 246 kB | ✓ | | Serverless `pages/routerDirect` gzip Size | 65.7 kB | 65.7 kB | -2 B | | Serverless `pages/withRouter` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/withRouter` gzip Size | 65.9 kB | 65.9 kB | -1 B | | Build Dir Size | 1.89 MB | 1.9 MB | ⚠️ +357 B |
Diff for main.js ```diff @@ -1,20 +1,5 @@ (window["webpackJsonp"] = window["webpackJsonp"] || []).push([[8],{ -/***/ "+iuc": -/***/ (function(module, exports, __webpack_require__) { - -__webpack_require__("wgeU"); -__webpack_require__("FlQf"); -__webpack_require__("bBy9"); -__webpack_require__("B9jh"); -__webpack_require__("dL40"); -__webpack_require__("xvv9"); -__webpack_require__("V+O7"); -module.exports = __webpack_require__("WEpk").Set; - - -/***/ }), - /***/ "+oT+": /***/ (function(module, exports, __webpack_require__) { @@ -69,28 +54,6 @@ __webpack_require__("cHUd")('Map'); /***/ }), -/***/ "B9jh": -/***/ (function(module, exports, __webpack_require__) { - -"use strict"; - -var strong = __webpack_require__("Wu5q"); -var validate = __webpack_require__("n3ko"); -var SET = 'Set'; - -// 23.2 Set Objects -module.exports = __webpack_require__("raTm")(SET, function (get) { - return function Set() { return get(this, arguments.length > 0 ? arguments[0] : undefined); }; -}, { - // 23.2.3.1 Set.prototype.add(value) - add: function add(value) { - return strong.def(validate(this, SET), value = value === 0 ? 0 : value, value); - } -}, strong); - - -/***/ }), - /***/ "BMP1": /***/ (function(module, exports, __webpack_require__) { @@ -875,15 +838,6 @@ module.exports = __webpack_require__("WEpk").Map; /***/ }), -/***/ "V+O7": -/***/ (function(module, exports, __webpack_require__) { - -// https://tc39.github.io/proposal-setmap-offrom/#sec-set.from -__webpack_require__("aPfg")('Set'); - - -/***/ }), - /***/ "XLbu": /***/ (function(module, exports, __webpack_require__) { @@ -951,17 +905,6 @@ exports.DataManager = DataManager; /***/ }), -/***/ "dL40": -/***/ (function(module, exports, __webpack_require__) { - -// https://github.com/DavidBruant/Map-Set.prototype.toJSON -var $export = __webpack_require__("Y7ZC"); - -$export($export.P + $export.R, 'Set', { toJSON: __webpack_require__("8iia")('Set') }); - - -/***/ }), - /***/ "dVTT": /***/ (function(module, exports, __webpack_require__) { @@ -1039,22 +982,6 @@ exports.DataManagerContext = React.createContext(null); /***/ }), -/***/ "ttDY": -/***/ (function(module, exports, __webpack_require__) { - -module.exports = __webpack_require__("+iuc"); - -/***/ }), - -/***/ "xvv9": -/***/ (function(module, exports, __webpack_require__) { - -// https://tc39.github.io/proposal-setmap-offrom/#sec-set.of -__webpack_require__("cHUd")('Set'); - - -/***/ }), - /***/ "zmvN": /***/ (function(module, exports, __webpack_require__) { @@ -1078,12 +1005,10 @@ var _asyncToGenerator2 = _interopRequireDefault(__webpack_require__("+oT+")); var _promise = _interopRequireDefault(__webpack_require__("eVuF")); -var _set = _interopRequireDefault(__webpack_require__("ttDY")); - var _mitt = _interopRequireDefault(__webpack_require__("kiME")); var _unfetch = _interopRequireDefault(__webpack_require__("m/Gl")); -/* global document */ +/* global document, window */ // smaller version of https://gist.github.com/igrigorik/a02f2359f3bc50ca7a9c @@ -1101,6 +1026,26 @@ function supportsPreload(list) { var hasPreload = supportsPreload(document.createElement('link').relList); +function createPreloadLink(url) { + var link = document.createElement('link'); + link.rel = 'preload'; + link.crossOrigin = undefined; + link.href = url; + link.as = 'script'; + document.head.appendChild(link); +} // Retrieve a list of dependencies for a given route from the build manifest + + +function getDependencies(route, _m) { + if ((_m = window.__BUILD_MANIFEST) && (_m = _m[route])) { + return _m.map(function (url) { + return "/_next/" + url; + }); + } + + return []; +} + var PageLoader = /*#__PURE__*/ function () { @@ -1109,7 +1054,6 @@ function () { this.buildId = buildId; this.assetPrefix = assetPrefix; this.pageCache = {}; - this.prefetchCache = new _set["default"](); this.pageRegisterEvents = (0, _mitt["default"])(); this.loadingRoutes = {}; this.promisedBuildId = _promise["default"].resolve(); @@ -1165,11 +1109,16 @@ function () { if (document.getElementById("__NEXT_PAGE__" + route)) { return; - } // Load the script if not asked to load yet. - + } if (!_this3.loadingRoutes[route]) { - _this3.loadScript(route); + getDependencies(route).forEach(function (d) { + if (!document.querySelector("script[src^=\"" + d + "\"]")) { + _this3.loadScript(d, route); + } + }); + + _this3.loadRoute(route); _this3.loadingRoutes[route] = true; } @@ -1201,14 +1150,14 @@ function () { }); } }, { - key: "loadScript", - value: function loadScript(route) { + key: "loadRoute", + value: function loadRoute(route) { var _this = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee() { - var scriptRoute, script, url; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee$(_context) { while (1) { switch (_context.prev = _context.next) { @@ -1219,38 +1168,46 @@ function () { case 2: route = _this.normalizeRoute(route); scriptRoute = route === '/' ? '/index.js' : route + ".js"; - script = document.createElement('script'); - - if (false) {} - url = _this.assetPrefix + "/_next/static/" + encodeURIComponent(_this.buildId) + "/pages" + scriptRoute; - script.crossOrigin = undefined; - script.src = url; - - script.onerror = function () { - var error = new Error("Error loading script " + url); - error.code = 'PAGE_LOAD_ERROR'; - - _this.pageRegisterEvents.emit(route, { - error: error - }); - }; - document.body.appendChild(script); + _this.loadScript(url, route); - case 11: + case 6: case "end": return _context.stop(); } } }, _callee); }))(); + } + }, { + key: "loadScript", + value: function loadScript(url, route) { + var _this5 = this; + + var script = document.createElement('script'); + + if (false) {} + + script.crossOrigin = undefined; + script.src = url; + + script.onerror = function () { + var error = new Error("Error loading script " + url); + error.code = 'PAGE_LOAD_ERROR'; + + _this5.pageRegisterEvents.emit(route, { + error: error + }); + }; + + document.body.appendChild(script); } // This method if called by the route code. }, { key: "registerPage", value: function registerPage(route, regFn) { - var _this5 = this; + var _this6 = this; var register = function register() { try { @@ -1258,21 +1215,21 @@ function () { error = _regFn.error, page = _regFn.page; - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error, page: page }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error, page: page }); } catch (error) { - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error }); } @@ -1284,73 +1241,83 @@ function () { } }, { key: "prefetch", - value: function prefetch(route) { + value: function prefetch(route, isDependency) { var _this2 = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee2() { - var scriptRoute, link; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee2$(_context2) { while (1) { switch (_context2.prev = _context2.next) { case 0: + _context2.next = 2; + return _this2.promisedBuildId; + + case 2: route = _this2.normalizeRoute(route); scriptRoute = (route === '/' ? '/index' : route) + ".js"; if (false) {} - if (!(_this2.prefetchCache.has(scriptRoute) || document.getElementById("__NEXT_PAGE__" + route))) { - _context2.next = 5; + url = isDependency ? route : _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; + + if (!(document.querySelector("link[rel=\"preload\"][href^=\"" + url + "\"]") || document.getElementById("__NEXT_PAGE__" + route))) { + _context2.next = 8; break; } return _context2.abrupt("return"); - case 5: - _this2.prefetchCache.add(scriptRoute); // Inspired by quicklink, license: https://github.com/GoogleChromeLabs/quicklink/blob/master/LICENSE - // Don't prefetch if the user is on 2G / Don't prefetch if Save-Data is enabled - - + case 8: if (!('connection' in navigator)) { - _context2.next = 9; + _context2.next = 11; break; } if (!((navigator.connection.effectiveType || '').indexOf('2g') !== -1 || navigator.connection.saveData)) { - _context2.next = 9; + _context2.next = 11; break; } return _context2.abrupt("return"); - case 9: + case 11: + if (!isDependency) { + getDependencies(route).forEach(function (url) { + _this2.prefetch(url, true); + }); + } // Feature detection is used to see if preload is supported + // If not fall back to loading script tags before the page is loaded + // https://caniuse.com/#feat=link-rel-preload + + if (!hasPreload) { - _context2.next = 19; + _context2.next = 15; break; } - _context2.next = 12; - return _this2.promisedBuildId; + createPreloadLink(url); + return _context2.abrupt("return"); + + case 15: + if (!isDependency) { + _context2.next = 17; + break; + } - case 12: - link = document.createElement('link'); - link.rel = 'preload'; - link.crossOrigin = undefined; - link.href = _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; - link.as = 'script'; - document.head.appendChild(link); return _context2.abrupt("return"); - case 19: + case 17: if (!(document.readyState === 'complete')) { - _context2.next = 23; + _context2.next = 21; break; } return _context2.abrupt("return", _this2.loadPage(route)["catch"](function () {})); - case 23: + case 21: return _context2.abrupt("return", new _promise["default"](function (resolve) { window.addEventListener('load', function () { _this2.loadPage(route).then(function () { @@ -1361,7 +1328,7 @@ function () { }); })); - case 24: + case 22: case "end": return _context2.stop(); } ```
github-actions[bot] commented 5 years ago

Stats from current PR

Click to expand stats ✅ Total Bundle Size Decrease ✅ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 12.9s | 12.6s | -288ms | | `node_modules` Size | 45.9 MB | 45.9 MB | ⚠️ +8.2 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 206 kB | -192 B | | Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 67.8 kB | ⚠️ +35 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 15.4 kB | 15.2 kB | -192 B | | Client `main` gzip Size | 5.33 kB | 5.36 kB | ⚠️ +35 B | | Client `commons` Size | 188 kB | 188 kB | ✓ | | Client `commons` gzip Size | 61.1 kB | 61.1 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Base Rendered Size | 1.35 kB | 1.35 kB | ✓ | | Build Dir Size | 705 kB | 705 kB | ⚠️ +479 B |
Click to expand serverless stats ✅ Total Bundle Size Decrease ✅ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 13.8s | 13.5s | -295ms | | `node_modules` Size | 45.9 MB | 45.9 MB | ⚠️ +8.2 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 206 kB | -192 B | | Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 67.8 kB | ⚠️ +35 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 15.4 kB | 15.2 kB | -192 B | | Client `main` gzip Size | 5.33 kB | 5.36 kB | ⚠️ +35 B | | Client `commons` Size | 188 kB | 188 kB | ✓ | | Client `commons` gzip Size | 61.1 kB | 61.1 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Serverless `pages/link` Size | 252 kB | 252 kB | ✓ | | Serverless `pages/link` gzip Size | 68 kB | 68 kB | ⚠️ +2 B | | Serverless `pages/index` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/index` gzip Size | 65.8 kB | 65.8 kB | ✓ | | Serverless `pages/_error` Size | 244 kB | 244 kB | ✓ | | Serverless `pages/_error` gzip Size | 65.5 kB | 65.5 kB | ⚠️ +1 B | | Serverless `pages/routerDirect` Size | 246 kB | 246 kB | ✓ | | Serverless `pages/routerDirect` gzip Size | 65.7 kB | 65.7 kB | ⚠️ +1 B | | Serverless `pages/withRouter` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/withRouter` gzip Size | 65.9 kB | 65.9 kB | ✓ | | Build Dir Size | 1.89 MB | 1.9 MB | ⚠️ +479 B |
Diff for main.js ```diff @@ -1,20 +1,5 @@ (window["webpackJsonp"] = window["webpackJsonp"] || []).push([[8],{ -/***/ "+iuc": -/***/ (function(module, exports, __webpack_require__) { - -__webpack_require__("wgeU"); -__webpack_require__("FlQf"); -__webpack_require__("bBy9"); -__webpack_require__("B9jh"); -__webpack_require__("dL40"); -__webpack_require__("xvv9"); -__webpack_require__("V+O7"); -module.exports = __webpack_require__("WEpk").Set; - - -/***/ }), - /***/ "+oT+": /***/ (function(module, exports, __webpack_require__) { @@ -69,28 +54,6 @@ __webpack_require__("cHUd")('Map'); /***/ }), -/***/ "B9jh": -/***/ (function(module, exports, __webpack_require__) { - -"use strict"; - -var strong = __webpack_require__("Wu5q"); -var validate = __webpack_require__("n3ko"); -var SET = 'Set'; - -// 23.2 Set Objects -module.exports = __webpack_require__("raTm")(SET, function (get) { - return function Set() { return get(this, arguments.length > 0 ? arguments[0] : undefined); }; -}, { - // 23.2.3.1 Set.prototype.add(value) - add: function add(value) { - return strong.def(validate(this, SET), value = value === 0 ? 0 : value, value); - } -}, strong); - - -/***/ }), - /***/ "BMP1": /***/ (function(module, exports, __webpack_require__) { @@ -875,15 +838,6 @@ module.exports = __webpack_require__("WEpk").Map; /***/ }), -/***/ "V+O7": -/***/ (function(module, exports, __webpack_require__) { - -// https://tc39.github.io/proposal-setmap-offrom/#sec-set.from -__webpack_require__("aPfg")('Set'); - - -/***/ }), - /***/ "XLbu": /***/ (function(module, exports, __webpack_require__) { @@ -951,17 +905,6 @@ exports.DataManager = DataManager; /***/ }), -/***/ "dL40": -/***/ (function(module, exports, __webpack_require__) { - -// https://github.com/DavidBruant/Map-Set.prototype.toJSON -var $export = __webpack_require__("Y7ZC"); - -$export($export.P + $export.R, 'Set', { toJSON: __webpack_require__("8iia")('Set') }); - - -/***/ }), - /***/ "dVTT": /***/ (function(module, exports, __webpack_require__) { @@ -1039,22 +982,6 @@ exports.DataManagerContext = React.createContext(null); /***/ }), -/***/ "ttDY": -/***/ (function(module, exports, __webpack_require__) { - -module.exports = __webpack_require__("+iuc"); - -/***/ }), - -/***/ "xvv9": -/***/ (function(module, exports, __webpack_require__) { - -// https://tc39.github.io/proposal-setmap-offrom/#sec-set.of -__webpack_require__("cHUd")('Set'); - - -/***/ }), - /***/ "zmvN": /***/ (function(module, exports, __webpack_require__) { @@ -1078,12 +1005,10 @@ var _asyncToGenerator2 = _interopRequireDefault(__webpack_require__("+oT+")); var _promise = _interopRequireDefault(__webpack_require__("eVuF")); -var _set = _interopRequireDefault(__webpack_require__("ttDY")); - var _mitt = _interopRequireDefault(__webpack_require__("kiME")); var _unfetch = _interopRequireDefault(__webpack_require__("m/Gl")); -/* global document */ +/* global document, window */ // smaller version of https://gist.github.com/igrigorik/a02f2359f3bc50ca7a9c @@ -1101,6 +1026,26 @@ function supportsPreload(list) { var hasPreload = supportsPreload(document.createElement('link').relList); +function createPreloadLink(url) { + var link = document.createElement('link'); + link.rel = 'preload'; + link.crossOrigin = undefined; + link.href = url; + link.as = 'script'; + document.head.appendChild(link); +} // Retrieve a list of dependencies for a given route from the build manifest + + +function getDependencies(route, _m) { + if ((_m = window.__BUILD_MANIFEST) && (_m = _m[route])) { + return _m.map(function (url) { + return "/_next/" + url; + }); + } + + return []; +} + var PageLoader = /*#__PURE__*/ function () { @@ -1109,7 +1054,6 @@ function () { this.buildId = buildId; this.assetPrefix = assetPrefix; this.pageCache = {}; - this.prefetchCache = new _set["default"](); this.pageRegisterEvents = (0, _mitt["default"])(); this.loadingRoutes = {}; this.promisedBuildId = _promise["default"].resolve(); @@ -1165,11 +1109,16 @@ function () { if (document.getElementById("__NEXT_PAGE__" + route)) { return; - } // Load the script if not asked to load yet. - + } if (!_this3.loadingRoutes[route]) { - _this3.loadScript(route); + getDependencies(route).forEach(function (d) { + if (!document.querySelector("script[src^=\"" + d + "\"]")) { + _this3.loadScript(d, route); + } + }); + + _this3.loadRoute(route); _this3.loadingRoutes[route] = true; } @@ -1201,14 +1150,14 @@ function () { }); } }, { - key: "loadScript", - value: function loadScript(route) { + key: "loadRoute", + value: function loadRoute(route) { var _this = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee() { - var scriptRoute, script, url; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee$(_context) { while (1) { switch (_context.prev = _context.next) { @@ -1219,38 +1168,46 @@ function () { case 2: route = _this.normalizeRoute(route); scriptRoute = route === '/' ? '/index.js' : route + ".js"; - script = document.createElement('script'); - - if (false) {} - url = _this.assetPrefix + "/_next/static/" + encodeURIComponent(_this.buildId) + "/pages" + scriptRoute; - script.crossOrigin = undefined; - script.src = url; - - script.onerror = function () { - var error = new Error("Error loading script " + url); - error.code = 'PAGE_LOAD_ERROR'; - - _this.pageRegisterEvents.emit(route, { - error: error - }); - }; - document.body.appendChild(script); + _this.loadScript(url, route); - case 11: + case 6: case "end": return _context.stop(); } } }, _callee); }))(); + } + }, { + key: "loadScript", + value: function loadScript(url, route) { + var _this5 = this; + + var script = document.createElement('script'); + + if (false) {} + + script.crossOrigin = undefined; + script.src = url; + + script.onerror = function () { + var error = new Error("Error loading script " + url); + error.code = 'PAGE_LOAD_ERROR'; + + _this5.pageRegisterEvents.emit(route, { + error: error + }); + }; + + document.body.appendChild(script); } // This method if called by the route code. }, { key: "registerPage", value: function registerPage(route, regFn) { - var _this5 = this; + var _this6 = this; var register = function register() { try { @@ -1258,21 +1215,21 @@ function () { error = _regFn.error, page = _regFn.page; - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error, page: page }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error, page: page }); } catch (error) { - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error }); } @@ -1284,73 +1241,84 @@ function () { } }, { key: "prefetch", - value: function prefetch(route) { + value: function prefetch(route, isDependency) { var _this2 = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee2() { - var scriptRoute, link; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee2$(_context2) { while (1) { switch (_context2.prev = _context2.next) { case 0: + _context2.next = 2; + return _this2.promisedBuildId; + + case 2: route = _this2.normalizeRoute(route); scriptRoute = (route === '/' ? '/index' : route) + ".js"; if (false) {} - if (!(_this2.prefetchCache.has(scriptRoute) || document.getElementById("__NEXT_PAGE__" + route))) { - _context2.next = 5; + url = isDependency ? route : _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; // n.b. If preload is not supported, we fall back to `loadPage` which has + // its own deduping mechanism. + + if (!(document.querySelector("link[rel=\"preload\"][href^=\"" + url + "\"]") || document.getElementById("__NEXT_PAGE__" + route))) { + _context2.next = 8; break; } return _context2.abrupt("return"); - case 5: - _this2.prefetchCache.add(scriptRoute); // Inspired by quicklink, license: https://github.com/GoogleChromeLabs/quicklink/blob/master/LICENSE - // Don't prefetch if the user is on 2G / Don't prefetch if Save-Data is enabled - - + case 8: if (!('connection' in navigator)) { - _context2.next = 9; + _context2.next = 11; break; } if (!((navigator.connection.effectiveType || '').indexOf('2g') !== -1 || navigator.connection.saveData)) { - _context2.next = 9; + _context2.next = 11; break; } return _context2.abrupt("return"); - case 9: + case 11: + if (!isDependency) { + getDependencies(route).forEach(function (url) { + _this2.prefetch(url, true); + }); + } // Feature detection is used to see if preload is supported + // If not fall back to loading script tags before the page is loaded + // https://caniuse.com/#feat=link-rel-preload + + if (!hasPreload) { - _context2.next = 19; + _context2.next = 15; break; } - _context2.next = 12; - return _this2.promisedBuildId; + createPreloadLink(url); + return _context2.abrupt("return"); + + case 15: + if (!isDependency) { + _context2.next = 17; + break; + } - case 12: - link = document.createElement('link'); - link.rel = 'preload'; - link.crossOrigin = undefined; - link.href = _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; - link.as = 'script'; - document.head.appendChild(link); return _context2.abrupt("return"); - case 19: + case 17: if (!(document.readyState === 'complete')) { - _context2.next = 23; + _context2.next = 21; break; } return _context2.abrupt("return", _this2.loadPage(route)["catch"](function () {})); - case 23: + case 21: return _context2.abrupt("return", new _promise["default"](function (resolve) { window.addEventListener('load', function () { _this2.loadPage(route).then(function () { @@ -1361,7 +1329,7 @@ function () { }); })); - case 24: + case 22: case "end": return _context2.stop(); } ```
github-actions[bot] commented 5 years ago

Stats from current PR

Click to expand stats ✅ Total Bundle Size Decrease ✅ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 12.9s | 12.8s | -122ms | | `node_modules` Size | 45.9 MB | 45.9 MB | ⚠️ +7.95 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 206 kB | -220 B | | Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 67.8 kB | ⚠️ +22 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 300 B | 300 B | ✓ | | Client `main` Size | 15.4 kB | 15.2 kB | -220 B | | Client `main` gzip Size | 5.33 kB | 5.35 kB | ⚠️ +22 B | | Client `commons` Size | 188 kB | 188 kB | ✓ | | Client `commons` gzip Size | 61.1 kB | 61.1 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Base Rendered Size | 1.35 kB | 1.35 kB | ✓ | | Build Dir Size | 705 kB | 705 kB | ⚠️ +287 B |
Click to expand serverless stats ✅ Total Bundle Size Decrease ✅ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 13.9s | 13.7s | -193ms | | `node_modules` Size | 45.9 MB | 45.9 MB | ⚠️ +7.95 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 206 kB | -220 B | | Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 67.8 kB | ⚠️ +23 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ⚠️ +1 B | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 300 B | 301 B | ⚠️ +1 B | | Client `main` Size | 15.4 kB | 15.2 kB | -220 B | | Client `main` gzip Size | 5.33 kB | 5.35 kB | ⚠️ +22 B | | Client `commons` Size | 188 kB | 188 kB | ✓ | | Client `commons` gzip Size | 61.1 kB | 61.1 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Serverless `pages/link` Size | 252 kB | 252 kB | ✓ | | Serverless `pages/link` gzip Size | 68 kB | 68 kB | ✓ | | Serverless `pages/index` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/index` gzip Size | 65.8 kB | 65.8 kB | -1 B | | Serverless `pages/_error` Size | 244 kB | 244 kB | ✓ | | Serverless `pages/_error` gzip Size | 65.5 kB | 65.5 kB | ✓ | | Serverless `pages/routerDirect` Size | 246 kB | 246 kB | ✓ | | Serverless `pages/routerDirect` gzip Size | 65.7 kB | 65.7 kB | -1 B | | Serverless `pages/withRouter` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/withRouter` gzip Size | 65.9 kB | 65.9 kB | ✓ | | Build Dir Size | 1.89 MB | 1.9 MB | ⚠️ +287 B |
Diff for main.js ```diff @@ -1,20 +1,5 @@ (window["webpackJsonp"] = window["webpackJsonp"] || []).push([[8],{ -/***/ "+iuc": -/***/ (function(module, exports, __webpack_require__) { - -__webpack_require__("wgeU"); -__webpack_require__("FlQf"); -__webpack_require__("bBy9"); -__webpack_require__("B9jh"); -__webpack_require__("dL40"); -__webpack_require__("xvv9"); -__webpack_require__("V+O7"); -module.exports = __webpack_require__("WEpk").Set; - - -/***/ }), - /***/ "+oT+": /***/ (function(module, exports, __webpack_require__) { @@ -69,28 +54,6 @@ __webpack_require__("cHUd")('Map'); /***/ }), -/***/ "B9jh": -/***/ (function(module, exports, __webpack_require__) { - -"use strict"; - -var strong = __webpack_require__("Wu5q"); -var validate = __webpack_require__("n3ko"); -var SET = 'Set'; - -// 23.2 Set Objects -module.exports = __webpack_require__("raTm")(SET, function (get) { - return function Set() { return get(this, arguments.length > 0 ? arguments[0] : undefined); }; -}, { - // 23.2.3.1 Set.prototype.add(value) - add: function add(value) { - return strong.def(validate(this, SET), value = value === 0 ? 0 : value, value); - } -}, strong); - - -/***/ }), - /***/ "BMP1": /***/ (function(module, exports, __webpack_require__) { @@ -875,15 +838,6 @@ module.exports = __webpack_require__("WEpk").Map; /***/ }), -/***/ "V+O7": -/***/ (function(module, exports, __webpack_require__) { - -// https://tc39.github.io/proposal-setmap-offrom/#sec-set.from -__webpack_require__("aPfg")('Set'); - - -/***/ }), - /***/ "XLbu": /***/ (function(module, exports, __webpack_require__) { @@ -951,17 +905,6 @@ exports.DataManager = DataManager; /***/ }), -/***/ "dL40": -/***/ (function(module, exports, __webpack_require__) { - -// https://github.com/DavidBruant/Map-Set.prototype.toJSON -var $export = __webpack_require__("Y7ZC"); - -$export($export.P + $export.R, 'Set', { toJSON: __webpack_require__("8iia")('Set') }); - - -/***/ }), - /***/ "dVTT": /***/ (function(module, exports, __webpack_require__) { @@ -1039,22 +982,6 @@ exports.DataManagerContext = React.createContext(null); /***/ }), -/***/ "ttDY": -/***/ (function(module, exports, __webpack_require__) { - -module.exports = __webpack_require__("+iuc"); - -/***/ }), - -/***/ "xvv9": -/***/ (function(module, exports, __webpack_require__) { - -// https://tc39.github.io/proposal-setmap-offrom/#sec-set.of -__webpack_require__("cHUd")('Set'); - - -/***/ }), - /***/ "zmvN": /***/ (function(module, exports, __webpack_require__) { @@ -1078,28 +1005,41 @@ var _asyncToGenerator2 = _interopRequireDefault(__webpack_require__("+oT+")); var _promise = _interopRequireDefault(__webpack_require__("eVuF")); -var _set = _interopRequireDefault(__webpack_require__("ttDY")); - var _mitt = _interopRequireDefault(__webpack_require__("kiME")); var _unfetch = _interopRequireDefault(__webpack_require__("m/Gl")); -/* global document */ -// smaller version of https://gist.github.com/igrigorik/a02f2359f3bc50ca7a9c - +/* global document, window */ -function supportsPreload(list) { - if (!list || !list.supports) { - return false; - } +function supportsPreload(el) { try { - return list.supports('preload'); - } catch (e) { + return el.relList.supports('preload'); + } catch (_unused) { return false; } } -var hasPreload = supportsPreload(document.createElement('link').relList); +var hasPreload = supportsPreload(document.createElement('link')); + +function createPreloadLink(url) { + var link = document.createElement('link'); + link.rel = 'preload'; + link.crossOrigin = undefined; + link.href = url; + link.as = 'script'; + document.head.appendChild(link); +} // Retrieve a list of dependencies for a given route from the build manifest + + +function getDependencies(route, _m) { + if ((_m = window.__BUILD_MANIFEST) && (_m = _m[route])) { + return _m.map(function (url) { + return "/_next/" + url; + }); + } + + return []; +} var PageLoader = /*#__PURE__*/ @@ -1109,7 +1049,6 @@ function () { this.buildId = buildId; this.assetPrefix = assetPrefix; this.pageCache = {}; - this.prefetchCache = new _set["default"](); this.pageRegisterEvents = (0, _mitt["default"])(); this.loadingRoutes = {}; this.promisedBuildId = _promise["default"].resolve(); @@ -1165,11 +1104,16 @@ function () { if (document.getElementById("__NEXT_PAGE__" + route)) { return; - } // Load the script if not asked to load yet. - + } if (!_this3.loadingRoutes[route]) { - _this3.loadScript(route); + getDependencies(route).forEach(function (d) { + if (!document.querySelector("script[src^=\"" + d + "\"]")) { + _this3.loadScript(d, route); + } + }); + + _this3.loadRoute(route); _this3.loadingRoutes[route] = true; } @@ -1201,14 +1145,14 @@ function () { }); } }, { - key: "loadScript", - value: function loadScript(route) { + key: "loadRoute", + value: function loadRoute(route) { var _this = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee() { - var scriptRoute, script, url; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee$(_context) { while (1) { switch (_context.prev = _context.next) { @@ -1219,38 +1163,46 @@ function () { case 2: route = _this.normalizeRoute(route); scriptRoute = route === '/' ? '/index.js' : route + ".js"; - script = document.createElement('script'); - - if (false) {} - url = _this.assetPrefix + "/_next/static/" + encodeURIComponent(_this.buildId) + "/pages" + scriptRoute; - script.crossOrigin = undefined; - script.src = url; - - script.onerror = function () { - var error = new Error("Error loading script " + url); - error.code = 'PAGE_LOAD_ERROR'; - _this.pageRegisterEvents.emit(route, { - error: error - }); - }; - - document.body.appendChild(script); + _this.loadScript(url, route); - case 11: + case 6: case "end": return _context.stop(); } } }, _callee); }))(); + } + }, { + key: "loadScript", + value: function loadScript(url, route) { + var _this5 = this; + + var script = document.createElement('script'); + + if (false) {} + + script.crossOrigin = undefined; + script.src = url; + + script.onerror = function () { + var error = new Error("Error loading script " + url); + error.code = 'PAGE_LOAD_ERROR'; + + _this5.pageRegisterEvents.emit(route, { + error: error + }); + }; + + document.body.appendChild(script); } // This method if called by the route code. }, { key: "registerPage", value: function registerPage(route, regFn) { - var _this5 = this; + var _this6 = this; var register = function register() { try { @@ -1258,21 +1210,21 @@ function () { error = _regFn.error, page = _regFn.page; - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error, page: page }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error, page: page }); } catch (error) { - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error }); } @@ -1284,73 +1236,84 @@ function () { } }, { key: "prefetch", - value: function prefetch(route) { + value: function prefetch(route, isDependency) { var _this2 = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee2() { - var scriptRoute, link; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee2$(_context2) { while (1) { switch (_context2.prev = _context2.next) { case 0: + _context2.next = 2; + return _this2.promisedBuildId; + + case 2: route = _this2.normalizeRoute(route); scriptRoute = (route === '/' ? '/index' : route) + ".js"; if (false) {} - if (!(_this2.prefetchCache.has(scriptRoute) || document.getElementById("__NEXT_PAGE__" + route))) { - _context2.next = 5; + url = isDependency ? route : _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; // n.b. If preload is not supported, we fall back to `loadPage` which has + // its own deduping mechanism. + + if (!(document.querySelector("link[rel=\"preload\"][href^=\"" + url + "\"]") || document.getElementById("__NEXT_PAGE__" + route))) { + _context2.next = 8; break; } return _context2.abrupt("return"); - case 5: - _this2.prefetchCache.add(scriptRoute); // Inspired by quicklink, license: https://github.com/GoogleChromeLabs/quicklink/blob/master/LICENSE - // Don't prefetch if the user is on 2G / Don't prefetch if Save-Data is enabled - - + case 8: if (!('connection' in navigator)) { - _context2.next = 9; + _context2.next = 11; break; } if (!((navigator.connection.effectiveType || '').indexOf('2g') !== -1 || navigator.connection.saveData)) { - _context2.next = 9; + _context2.next = 11; break; } return _context2.abrupt("return"); - case 9: + case 11: + if (!isDependency) { + getDependencies(route).forEach(function (url) { + _this2.prefetch(url, true); + }); + } // Feature detection is used to see if preload is supported + // If not fall back to loading script tags before the page is loaded + // https://caniuse.com/#feat=link-rel-preload + + if (!hasPreload) { - _context2.next = 19; + _context2.next = 15; break; } - _context2.next = 12; - return _this2.promisedBuildId; + createPreloadLink(url); + return _context2.abrupt("return"); + + case 15: + if (!isDependency) { + _context2.next = 17; + break; + } - case 12: - link = document.createElement('link'); - link.rel = 'preload'; - link.crossOrigin = undefined; - link.href = _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; - link.as = 'script'; - document.head.appendChild(link); return _context2.abrupt("return"); - case 19: + case 17: if (!(document.readyState === 'complete')) { - _context2.next = 23; + _context2.next = 21; break; } return _context2.abrupt("return", _this2.loadPage(route)["catch"](function () {})); - case 23: + case 21: return _context2.abrupt("return", new _promise["default"](function (resolve) { window.addEventListener('load', function () { _this2.loadPage(route).then(function () { @@ -1361,7 +1324,7 @@ function () { }); })); - case 24: + case 22: case "end": return _context2.stop(); } ```
github-actions[bot] commented 5 years ago

Stats from current PR

Click to expand stats ✅ Total Bundle Size Decrease ✅ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 12.5s | 12.4s | -102ms | | `node_modules` Size | 45.9 MB | 45.9 MB | ⚠️ +8.27 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 206 kB | -164 B | | Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 67.8 kB | ⚠️ +48 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | -1 B | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 300 B | -1 B | | Client `main` Size | 15.4 kB | 15.2 kB | -164 B | | Client `main` gzip Size | 5.33 kB | 5.37 kB | ⚠️ +49 B | | Client `commons` Size | 188 kB | 188 kB | ✓ | | Client `commons` gzip Size | 61.1 kB | 61.1 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Base Rendered Size | 1.35 kB | 1.35 kB | ✓ | | Build Dir Size | 705 kB | 705 kB | ⚠️ +592 B |
Click to expand serverless stats ✅ Total Bundle Size Decrease ✅ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 13.3s | 13.5s | ⚠️ +134ms | | `node_modules` Size | 45.9 MB | 45.9 MB | ⚠️ +8.27 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 206 kB | -164 B | | Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 67.8 kB | ⚠️ +49 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 15.4 kB | 15.2 kB | -164 B | | Client `main` gzip Size | 5.33 kB | 5.37 kB | ⚠️ +49 B | | Client `commons` Size | 188 kB | 188 kB | ✓ | | Client `commons` gzip Size | 61.1 kB | 61.1 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Serverless `pages/link` Size | 252 kB | 252 kB | ✓ | | Serverless `pages/link` gzip Size | 68 kB | 68 kB | -4 B | | Serverless `pages/index` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/index` gzip Size | 65.8 kB | 65.8 kB | -2 B | | Serverless `pages/_error` Size | 244 kB | 244 kB | ✓ | | Serverless `pages/_error` gzip Size | 65.5 kB | 65.5 kB | -2 B | | Serverless `pages/routerDirect` Size | 246 kB | 246 kB | ✓ | | Serverless `pages/routerDirect` gzip Size | 65.7 kB | 65.7 kB | -2 B | | Serverless `pages/withRouter` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/withRouter` gzip Size | 65.9 kB | 65.9 kB | -2 B | | Build Dir Size | 1.89 MB | 1.9 MB | ⚠️ +592 B |
Diff for main.js ```diff @@ -1,20 +1,5 @@ (window["webpackJsonp"] = window["webpackJsonp"] || []).push([[8],{ -/***/ "+iuc": -/***/ (function(module, exports, __webpack_require__) { - -__webpack_require__("wgeU"); -__webpack_require__("FlQf"); -__webpack_require__("bBy9"); -__webpack_require__("B9jh"); -__webpack_require__("dL40"); -__webpack_require__("xvv9"); -__webpack_require__("V+O7"); -module.exports = __webpack_require__("WEpk").Set; - - -/***/ }), - /***/ "+oT+": /***/ (function(module, exports, __webpack_require__) { @@ -69,28 +54,6 @@ __webpack_require__("cHUd")('Map'); /***/ }), -/***/ "B9jh": -/***/ (function(module, exports, __webpack_require__) { - -"use strict"; - -var strong = __webpack_require__("Wu5q"); -var validate = __webpack_require__("n3ko"); -var SET = 'Set'; - -// 23.2 Set Objects -module.exports = __webpack_require__("raTm")(SET, function (get) { - return function Set() { return get(this, arguments.length > 0 ? arguments[0] : undefined); }; -}, { - // 23.2.3.1 Set.prototype.add(value) - add: function add(value) { - return strong.def(validate(this, SET), value = value === 0 ? 0 : value, value); - } -}, strong); - - -/***/ }), - /***/ "BMP1": /***/ (function(module, exports, __webpack_require__) { @@ -875,15 +838,6 @@ module.exports = __webpack_require__("WEpk").Map; /***/ }), -/***/ "V+O7": -/***/ (function(module, exports, __webpack_require__) { - -// https://tc39.github.io/proposal-setmap-offrom/#sec-set.from -__webpack_require__("aPfg")('Set'); - - -/***/ }), - /***/ "XLbu": /***/ (function(module, exports, __webpack_require__) { @@ -951,17 +905,6 @@ exports.DataManager = DataManager; /***/ }), -/***/ "dL40": -/***/ (function(module, exports, __webpack_require__) { - -// https://github.com/DavidBruant/Map-Set.prototype.toJSON -var $export = __webpack_require__("Y7ZC"); - -$export($export.P + $export.R, 'Set', { toJSON: __webpack_require__("8iia")('Set') }); - - -/***/ }), - /***/ "dVTT": /***/ (function(module, exports, __webpack_require__) { @@ -1039,22 +982,6 @@ exports.DataManagerContext = React.createContext(null); /***/ }), -/***/ "ttDY": -/***/ (function(module, exports, __webpack_require__) { - -module.exports = __webpack_require__("+iuc"); - -/***/ }), - -/***/ "xvv9": -/***/ (function(module, exports, __webpack_require__) { - -// https://tc39.github.io/proposal-setmap-offrom/#sec-set.of -__webpack_require__("cHUd")('Set'); - - -/***/ }), - /***/ "zmvN": /***/ (function(module, exports, __webpack_require__) { @@ -1078,28 +1005,45 @@ var _asyncToGenerator2 = _interopRequireDefault(__webpack_require__("+oT+")); var _promise = _interopRequireDefault(__webpack_require__("eVuF")); -var _set = _interopRequireDefault(__webpack_require__("ttDY")); - var _mitt = _interopRequireDefault(__webpack_require__("kiME")); var _unfetch = _interopRequireDefault(__webpack_require__("m/Gl")); -/* global document */ -// smaller version of https://gist.github.com/igrigorik/a02f2359f3bc50ca7a9c +/* global document, window */ -function supportsPreload(list) { - if (!list || !list.supports) { - return false; - } - +function supportsPreload(el) { try { - return list.supports('preload'); - } catch (e) { + return el.relList.supports('preload'); + } catch (_unused) { return false; } } -var hasPreload = supportsPreload(document.createElement('link').relList); +var hasPreload = supportsPreload(document.createElement('link')); + +function createPreloadLink(url) { + var link = document.createElement('link'); + link.rel = 'preload'; + link.crossOrigin = undefined; + link.href = url; + link.as = 'script'; + document.head.appendChild(link); +} // Retrieve a list of dependencies for a given route from the build manifest + + +function getDependencies(route, _m) { + var isModern = false && false; + + if ((_m = window.__BUILD_MANIFEST) && (_m = _m[route])) { + return _m.map(function (url) { + return "/_next/" + url; + }).filter(function (url) { + return /\.module\.js$/.test(url) === isModern; + }); + } + + return []; +} var PageLoader = /*#__PURE__*/ @@ -1109,7 +1053,6 @@ function () { this.buildId = buildId; this.assetPrefix = assetPrefix; this.pageCache = {}; - this.prefetchCache = new _set["default"](); this.pageRegisterEvents = (0, _mitt["default"])(); this.loadingRoutes = {}; this.promisedBuildId = _promise["default"].resolve(); @@ -1165,11 +1108,16 @@ function () { if (document.getElementById("__NEXT_PAGE__" + route)) { return; - } // Load the script if not asked to load yet. - + } if (!_this3.loadingRoutes[route]) { - _this3.loadScript(route); + getDependencies(route).forEach(function (d) { + if (!document.querySelector("script[src^=\"" + d + "\"]")) { + _this3.loadScript(d, route); + } + }); + + _this3.loadRoute(route); _this3.loadingRoutes[route] = true; } @@ -1201,14 +1149,14 @@ function () { }); } }, { - key: "loadScript", - value: function loadScript(route) { + key: "loadRoute", + value: function loadRoute(route) { var _this = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee() { - var scriptRoute, script, url; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee$(_context) { while (1) { switch (_context.prev = _context.next) { @@ -1219,38 +1167,46 @@ function () { case 2: route = _this.normalizeRoute(route); scriptRoute = route === '/' ? '/index.js' : route + ".js"; - script = document.createElement('script'); - - if (false) {} - url = _this.assetPrefix + "/_next/static/" + encodeURIComponent(_this.buildId) + "/pages" + scriptRoute; - script.crossOrigin = undefined; - script.src = url; - - script.onerror = function () { - var error = new Error("Error loading script " + url); - error.code = 'PAGE_LOAD_ERROR'; - _this.pageRegisterEvents.emit(route, { - error: error - }); - }; - - document.body.appendChild(script); + _this.loadScript(url, route); - case 11: + case 6: case "end": return _context.stop(); } } }, _callee); }))(); + } + }, { + key: "loadScript", + value: function loadScript(url, route) { + var _this5 = this; + + var script = document.createElement('script'); + + if (false) {} + + script.crossOrigin = undefined; + script.src = url; + + script.onerror = function () { + var error = new Error("Error loading script " + url); + error.code = 'PAGE_LOAD_ERROR'; + + _this5.pageRegisterEvents.emit(route, { + error: error + }); + }; + + document.body.appendChild(script); } // This method if called by the route code. }, { key: "registerPage", value: function registerPage(route, regFn) { - var _this5 = this; + var _this6 = this; var register = function register() { try { @@ -1258,21 +1214,21 @@ function () { error = _regFn.error, page = _regFn.page; - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error, page: page }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error, page: page }); } catch (error) { - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error }); } @@ -1284,73 +1240,84 @@ function () { } }, { key: "prefetch", - value: function prefetch(route) { + value: function prefetch(route, isDependency) { var _this2 = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee2() { - var scriptRoute, link; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee2$(_context2) { while (1) { switch (_context2.prev = _context2.next) { case 0: + _context2.next = 2; + return _this2.promisedBuildId; + + case 2: route = _this2.normalizeRoute(route); scriptRoute = (route === '/' ? '/index' : route) + ".js"; if (false) {} - if (!(_this2.prefetchCache.has(scriptRoute) || document.getElementById("__NEXT_PAGE__" + route))) { - _context2.next = 5; + url = isDependency ? route : _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; // n.b. If preload is not supported, we fall back to `loadPage` which has + // its own deduping mechanism. + + if (!(document.querySelector("link[rel=\"preload\"][href^=\"" + url + "\"]") || document.getElementById("__NEXT_PAGE__" + route))) { + _context2.next = 8; break; } return _context2.abrupt("return"); - case 5: - _this2.prefetchCache.add(scriptRoute); // Inspired by quicklink, license: https://github.com/GoogleChromeLabs/quicklink/blob/master/LICENSE - // Don't prefetch if the user is on 2G / Don't prefetch if Save-Data is enabled - - + case 8: if (!('connection' in navigator)) { - _context2.next = 9; + _context2.next = 11; break; } if (!((navigator.connection.effectiveType || '').indexOf('2g') !== -1 || navigator.connection.saveData)) { - _context2.next = 9; + _context2.next = 11; break; } return _context2.abrupt("return"); - case 9: + case 11: + if (!isDependency) { + getDependencies(route).forEach(function (url) { + _this2.prefetch(url, true); + }); + } // Feature detection is used to see if preload is supported + // If not fall back to loading script tags before the page is loaded + // https://caniuse.com/#feat=link-rel-preload + + if (!hasPreload) { - _context2.next = 19; + _context2.next = 15; break; } - _context2.next = 12; - return _this2.promisedBuildId; + createPreloadLink(url); + return _context2.abrupt("return"); + + case 15: + if (!isDependency) { + _context2.next = 17; + break; + } - case 12: - link = document.createElement('link'); - link.rel = 'preload'; - link.crossOrigin = undefined; - link.href = _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; - link.as = 'script'; - document.head.appendChild(link); return _context2.abrupt("return"); - case 19: + case 17: if (!(document.readyState === 'complete')) { - _context2.next = 23; + _context2.next = 21; break; } return _context2.abrupt("return", _this2.loadPage(route)["catch"](function () {})); - case 23: + case 21: return _context2.abrupt("return", new _promise["default"](function (resolve) { window.addEventListener('load', function () { _this2.loadPage(route).then(function () { @@ -1361,7 +1328,7 @@ function () { }); })); - case 24: + case 22: case "end": return _context2.stop(); } ```
github-actions[bot] commented 5 years ago

Stats from current PR

Click to expand stats ✅ Total Bundle Size Decrease ✅ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 13.4s | 13.3s | -174ms | | `node_modules` Size | 45.9 MB | 45.9 MB | ⚠️ +8.27 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 206 kB | -164 B | | Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 67.8 kB | ⚠️ +49 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 15.4 kB | 15.2 kB | -164 B | | Client `main` gzip Size | 5.33 kB | 5.37 kB | ⚠️ +49 B | | Client `commons` Size | 188 kB | 188 kB | ✓ | | Client `commons` gzip Size | 61.1 kB | 61.1 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Base Rendered Size | 1.35 kB | 1.35 kB | ✓ | | Build Dir Size | 705 kB | 705 kB | ⚠️ +592 B |
Click to expand serverless stats ✅ Total Bundle Size Decrease ✅ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 14.4s | 14.7s | ⚠️ +236ms | | `node_modules` Size | 45.9 MB | 45.9 MB | ⚠️ +8.27 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 206 kB | -164 B | | Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 67.8 kB | ⚠️ +49 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 15.4 kB | 15.2 kB | -164 B | | Client `main` gzip Size | 5.33 kB | 5.37 kB | ⚠️ +49 B | | Client `commons` Size | 188 kB | 188 kB | ✓ | | Client `commons` gzip Size | 61.1 kB | 61.1 kB | ✓ | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Serverless `pages/link` Size | 252 kB | 252 kB | ✓ | | Serverless `pages/link` gzip Size | 68 kB | 68 kB | -2 B | | Serverless `pages/index` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/index` gzip Size | 65.8 kB | 65.8 kB | -1 B | | Serverless `pages/_error` Size | 244 kB | 244 kB | ✓ | | Serverless `pages/_error` gzip Size | 65.5 kB | 65.5 kB | -1 B | | Serverless `pages/routerDirect` Size | 246 kB | 246 kB | ✓ | | Serverless `pages/routerDirect` gzip Size | 65.7 kB | 65.7 kB | -2 B | | Serverless `pages/withRouter` Size | 245 kB | 245 kB | ✓ | | Serverless `pages/withRouter` gzip Size | 65.9 kB | 65.9 kB | -1 B | | Build Dir Size | 1.89 MB | 1.9 MB | ⚠️ +592 B |
Diff for main.js ```diff @@ -1,19 +1,4 @@ -(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[8],{ - -/***/ "+iuc": -/***/ (function(module, exports, __webpack_require__) { - -__webpack_require__("wgeU"); -__webpack_require__("FlQf"); -__webpack_require__("bBy9"); -__webpack_require__("B9jh"); -__webpack_require__("dL40"); -__webpack_require__("xvv9"); -__webpack_require__("V+O7"); -module.exports = __webpack_require__("WEpk").Set; - - -/***/ }), +(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[2],{ /***/ "+oT+": /***/ (function(module, exports, __webpack_require__) { @@ -69,28 +54,6 @@ __webpack_require__("cHUd")('Map'); /***/ }), -/***/ "B9jh": -/***/ (function(module, exports, __webpack_require__) { - -"use strict"; - -var strong = __webpack_require__("Wu5q"); -var validate = __webpack_require__("n3ko"); -var SET = 'Set'; - -// 23.2 Set Objects -module.exports = __webpack_require__("raTm")(SET, function (get) { - return function Set() { return get(this, arguments.length > 0 ? arguments[0] : undefined); }; -}, { - // 23.2.3.1 Set.prototype.add(value) - add: function add(value) { - return strong.def(validate(this, SET), value = value === 0 ? 0 : value, value); - } -}, strong); - - -/***/ }), - /***/ "BMP1": /***/ (function(module, exports, __webpack_require__) { @@ -875,15 +838,6 @@ module.exports = __webpack_require__("WEpk").Map; /***/ }), -/***/ "V+O7": -/***/ (function(module, exports, __webpack_require__) { - -// https://tc39.github.io/proposal-setmap-offrom/#sec-set.from -__webpack_require__("aPfg")('Set'); - - -/***/ }), - /***/ "XLbu": /***/ (function(module, exports, __webpack_require__) { @@ -951,17 +905,6 @@ exports.DataManager = DataManager; /***/ }), -/***/ "dL40": -/***/ (function(module, exports, __webpack_require__) { - -// https://github.com/DavidBruant/Map-Set.prototype.toJSON -var $export = __webpack_require__("Y7ZC"); - -$export($export.P + $export.R, 'Set', { toJSON: __webpack_require__("8iia")('Set') }); - - -/***/ }), - /***/ "dVTT": /***/ (function(module, exports, __webpack_require__) { @@ -1039,22 +982,6 @@ exports.DataManagerContext = React.createContext(null); /***/ }), -/***/ "ttDY": -/***/ (function(module, exports, __webpack_require__) { - -module.exports = __webpack_require__("+iuc"); - -/***/ }), - -/***/ "xvv9": -/***/ (function(module, exports, __webpack_require__) { - -// https://tc39.github.io/proposal-setmap-offrom/#sec-set.of -__webpack_require__("cHUd")('Set'); - - -/***/ }), - /***/ "zmvN": /***/ (function(module, exports, __webpack_require__) { @@ -1078,28 +1005,45 @@ var _asyncToGenerator2 = _interopRequireDefault(__webpack_require__("+oT+")); var _promise = _interopRequireDefault(__webpack_require__("eVuF")); -var _set = _interopRequireDefault(__webpack_require__("ttDY")); - var _mitt = _interopRequireDefault(__webpack_require__("kiME")); var _unfetch = _interopRequireDefault(__webpack_require__("m/Gl")); -/* global document */ -// smaller version of https://gist.github.com/igrigorik/a02f2359f3bc50ca7a9c +/* global document, window */ -function supportsPreload(list) { - if (!list || !list.supports) { - return false; - } - +function supportsPreload(el) { try { - return list.supports('preload'); - } catch (e) { + return el.relList.supports('preload'); + } catch (_unused) { return false; } } -var hasPreload = supportsPreload(document.createElement('link').relList); +var hasPreload = supportsPreload(document.createElement('link')); + +function createPreloadLink(url) { + var link = document.createElement('link'); + link.rel = 'preload'; + link.crossOrigin = undefined; + link.href = url; + link.as = 'script'; + document.head.appendChild(link); +} // Retrieve a list of dependencies for a given route from the build manifest + + +function getDependencies(route, _m) { + var isModern = false && false; + + if ((_m = window.__BUILD_MANIFEST) && (_m = _m[route])) { + return _m.map(function (url) { + return "/_next/" + url; + }).filter(function (url) { + return /\.module\.js$/.test(url) === isModern; + }); + } + + return []; +} var PageLoader = /*#__PURE__*/ @@ -1109,7 +1053,6 @@ function () { this.buildId = buildId; this.assetPrefix = assetPrefix; this.pageCache = {}; - this.prefetchCache = new _set["default"](); this.pageRegisterEvents = (0, _mitt["default"])(); this.loadingRoutes = {}; this.promisedBuildId = _promise["default"].resolve(); @@ -1165,11 +1108,16 @@ function () { if (document.getElementById("__NEXT_PAGE__" + route)) { return; - } // Load the script if not asked to load yet. - + } if (!_this3.loadingRoutes[route]) { - _this3.loadScript(route); + getDependencies(route).forEach(function (d) { + if (!document.querySelector("script[src^=\"" + d + "\"]")) { + _this3.loadScript(d, route); + } + }); + + _this3.loadRoute(route); _this3.loadingRoutes[route] = true; } @@ -1201,14 +1149,14 @@ function () { }); } }, { - key: "loadScript", - value: function loadScript(route) { + key: "loadRoute", + value: function loadRoute(route) { var _this = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee() { - var scriptRoute, script, url; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee$(_context) { while (1) { switch (_context.prev = _context.next) { @@ -1219,38 +1167,46 @@ function () { case 2: route = _this.normalizeRoute(route); scriptRoute = route === '/' ? '/index.js' : route + ".js"; - script = document.createElement('script'); - - if (false) {} - url = _this.assetPrefix + "/_next/static/" + encodeURIComponent(_this.buildId) + "/pages" + scriptRoute; - script.crossOrigin = undefined; - script.src = url; - - script.onerror = function () { - var error = new Error("Error loading script " + url); - error.code = 'PAGE_LOAD_ERROR'; - _this.pageRegisterEvents.emit(route, { - error: error - }); - }; - - document.body.appendChild(script); + _this.loadScript(url, route); - case 11: + case 6: case "end": return _context.stop(); } } }, _callee); }))(); + } + }, { + key: "loadScript", + value: function loadScript(url, route) { + var _this5 = this; + + var script = document.createElement('script'); + + if (false) {} + + script.crossOrigin = undefined; + script.src = url; + + script.onerror = function () { + var error = new Error("Error loading script " + url); + error.code = 'PAGE_LOAD_ERROR'; + + _this5.pageRegisterEvents.emit(route, { + error: error + }); + }; + + document.body.appendChild(script); } // This method if called by the route code. }, { key: "registerPage", value: function registerPage(route, regFn) { - var _this5 = this; + var _this6 = this; var register = function register() { try { @@ -1258,21 +1214,21 @@ function () { error = _regFn.error, page = _regFn.page; - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error, page: page }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error, page: page }); } catch (error) { - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error }); } @@ -1284,73 +1240,84 @@ function () { } }, { key: "prefetch", - value: function prefetch(route) { + value: function prefetch(route, isDependency) { var _this2 = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee2() { - var scriptRoute, link; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee2$(_context2) { while (1) { switch (_context2.prev = _context2.next) { case 0: + _context2.next = 2; + return _this2.promisedBuildId; + + case 2: route = _this2.normalizeRoute(route); scriptRoute = (route === '/' ? '/index' : route) + ".js"; if (false) {} - if (!(_this2.prefetchCache.has(scriptRoute) || document.getElementById("__NEXT_PAGE__" + route))) { - _context2.next = 5; + url = isDependency ? route : _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; // n.b. If preload is not supported, we fall back to `loadPage` which has + // its own deduping mechanism. + + if (!(document.querySelector("link[rel=\"preload\"][href^=\"" + url + "\"]") || document.getElementById("__NEXT_PAGE__" + route))) { + _context2.next = 8; break; } return _context2.abrupt("return"); - case 5: - _this2.prefetchCache.add(scriptRoute); // Inspired by quicklink, license: https://github.com/GoogleChromeLabs/quicklink/blob/master/LICENSE - // Don't prefetch if the user is on 2G / Don't prefetch if Save-Data is enabled - - + case 8: if (!('connection' in navigator)) { - _context2.next = 9; + _context2.next = 11; break; } if (!((navigator.connection.effectiveType || '').indexOf('2g') !== -1 || navigator.connection.saveData)) { - _context2.next = 9; + _context2.next = 11; break; } return _context2.abrupt("return"); - case 9: + case 11: + if (!isDependency) { + getDependencies(route).forEach(function (url) { + _this2.prefetch(url, true); + }); + } // Feature detection is used to see if preload is supported + // If not fall back to loading script tags before the page is loaded + // https://caniuse.com/#feat=link-rel-preload + + if (!hasPreload) { - _context2.next = 19; + _context2.next = 15; break; } - _context2.next = 12; - return _this2.promisedBuildId; + createPreloadLink(url); + return _context2.abrupt("return"); + + case 15: + if (!isDependency) { + _context2.next = 17; + break; + } - case 12: - link = document.createElement('link'); - link.rel = 'preload'; - link.crossOrigin = undefined; - link.href = _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; - link.as = 'script'; - document.head.appendChild(link); return _context2.abrupt("return"); - case 19: + case 17: if (!(document.readyState === 'complete')) { - _context2.next = 23; + _context2.next = 21; break; } return _context2.abrupt("return", _this2.loadPage(route)["catch"](function () {})); - case 23: + case 21: return _context2.abrupt("return", new _promise["default"](function (resolve) { window.addEventListener('load', function () { _this2.loadPage(route).then(function () { @@ -1361,7 +1328,7 @@ function () { }); })); - case 24: + case 22: case "end": return _context2.stop(); } ```
github-actions[bot] commented 5 years ago

Stats from current PR

Click to expand stats ✅ Total Bundle Size Decrease ✅ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 14.4s | 13.7s | -691ms | | `node_modules` Size | 45.9 MB | 45.9 MB | ⚠️ +8.8 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 206 kB | -49 B | | Total Bundle (main, webpack, commons) gzip Size | 67.9 kB | 67.8 kB | -35 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 15.6 kB | 15.2 kB | -382 B | | Client `main` gzip Size | 5.39 kB | 5.37 kB | -21 B | | Client `commons` Size | 188 kB | 188 kB | ⚠️ +333 B | | Client `commons` gzip Size | 61.1 kB | 61.1 kB | -14 B | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Base Rendered Size | 1.35 kB | 1.35 kB | ✓ | | Build Dir Size | 703 kB | 705 kB | ⚠️ +1.75 kB |
Click to expand serverless stats ✅ Total Bundle Size Decrease ✅ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 15.2s | 15.6s | ⚠️ +435ms | | `node_modules` Size | 45.9 MB | 45.9 MB | ⚠️ +8.8 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 206 kB | -49 B | | Total Bundle (main, webpack, commons) gzip Size | 67.9 kB | 67.8 kB | -36 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | -1 B | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 300 B | -1 B | | Client `main` Size | 15.6 kB | 15.2 kB | -382 B | | Client `main` gzip Size | 5.39 kB | 5.37 kB | -21 B | | Client `commons` Size | 188 kB | 188 kB | ⚠️ +333 B | | Client `commons` gzip Size | 61.1 kB | 61.1 kB | -14 B | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Serverless `pages/link` Size | 252 kB | 252 kB | ⚠️ +625 B | | Serverless `pages/link` gzip Size | 67.9 kB | 68 kB | ⚠️ +18 B | | Serverless `pages/index` Size | 244 kB | 245 kB | ⚠️ +625 B | | Serverless `pages/index` gzip Size | 65.8 kB | 65.8 kB | ⚠️ +7 B | | Serverless `pages/_error` Size | 244 kB | 244 kB | ⚠️ +625 B | | Serverless `pages/_error` gzip Size | 65.5 kB | 65.5 kB | ⚠️ +23 B | | Serverless `pages/routerDirect` Size | 245 kB | 246 kB | ⚠️ +625 B | | Serverless `pages/routerDirect` gzip Size | 65.7 kB | 65.7 kB | ⚠️ +15 B | | Serverless `pages/withRouter` Size | 245 kB | 245 kB | ⚠️ +625 B | | Serverless `pages/withRouter` gzip Size | 65.8 kB | 65.9 kB | ⚠️ +12 B | | Build Dir Size | 1.89 MB | 1.9 MB | ⚠️ +4.95 kB |
Diff for commons.js ```diff @@ -420,6 +420,36 @@ var objectKeys = Object.keys || function (obj) { /***/ }), +/***/ "4Vye": +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +var _interopRequireDefault = __webpack_require__("KI45"); + +var _defineProperty = _interopRequireDefault(__webpack_require__("hfKm")); + +var __importStar = void 0 && (void 0).__importStar || function (mod) { + if (mod && mod.__esModule) return mod; + var result = {}; + if (mod != null) for (var k in mod) { + if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k]; + } + result["default"] = mod; + return result; +}; + +(0, _defineProperty["default"])(exports, "__esModule", { + value: true +}); + +var React = __importStar(__webpack_require__("q1tI")); + +exports.RequestContext = React.createContext(null); + +/***/ }), + /***/ "4jyI": /***/ (function(module, exports, __webpack_require__) { @@ -3018,7 +3048,6 @@ function () { var initialProps = _ref.initialProps, pageLoader = _ref.pageLoader, App = _ref.App, - wrapApp = _ref.wrapApp, Component = _ref.Component, err = _ref.err, subscription = _ref.subscription; @@ -3096,7 +3125,6 @@ function () { this.asPath = as; this.sub = subscription; this.clc = null; - this._wrapApp = wrapApp; if (true) { // in order for `e.state` to work on the `onpopstate` event @@ -3583,7 +3611,6 @@ function () { App = this.components['/_app'].Component; _context2.next = 6; return utils_1.loadGetInitialProps(App, { - AppTree: this._wrapApp(App), Component: Component, router: this, ctx: ctx @@ -6655,6 +6682,7 @@ var _interopRequireDefault = __webpack_require__("KI45"); exports.__esModule = true; exports.useRouter = useRouter; +exports.useRequest = useRequest; exports.makePublicRouterInstance = makePublicRouterInstance; exports.createRouter = exports.withRouter = exports["default"] = void 0; @@ -6671,6 +6699,8 @@ exports.NextRouter = _router2.NextRouter; var _routerContext = __webpack_require__("9EOK"); +var _requestContext = __webpack_require__("4Vye"); + var _withRouter = _interopRequireDefault(__webpack_require__("0Bsm")); exports.withRouter = _withRouter["default"]; @@ -6756,6 +6786,10 @@ exports["default"] = _default; function useRouter() { return _react["default"].useContext(_routerContext.RouterContext); +} + +function useRequest() { + return _react["default"].useContext(_requestContext.RequestContext); } // INTERNAL APIS // ------------- // (do not use following exports inside the app) ```
Diff for main.js ```diff @@ -1,19 +1,4 @@ -(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[2],{ - -/***/ "+iuc": -/***/ (function(module, exports, __webpack_require__) { - -__webpack_require__("wgeU"); -__webpack_require__("FlQf"); -__webpack_require__("bBy9"); -__webpack_require__("B9jh"); -__webpack_require__("dL40"); -__webpack_require__("xvv9"); -__webpack_require__("V+O7"); -module.exports = __webpack_require__("WEpk").Set; - - -/***/ }), +(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[8],{ /***/ "+oT+": /***/ (function(module, exports, __webpack_require__) { @@ -69,28 +54,6 @@ __webpack_require__("cHUd")('Map'); /***/ }), -/***/ "B9jh": -/***/ (function(module, exports, __webpack_require__) { - -"use strict"; - -var strong = __webpack_require__("Wu5q"); -var validate = __webpack_require__("n3ko"); -var SET = 'Set'; - -// 23.2 Set Objects -module.exports = __webpack_require__("raTm")(SET, function (get) { - return function Set() { return get(this, arguments.length > 0 ? arguments[0] : undefined); }; -}, { - // 23.2.3.1 Set.prototype.add(value) - add: function add(value) { - return strong.def(validate(this, SET), value = value === 0 ? 0 : value, value); - } -}, strong); - - -/***/ }), - /***/ "BMP1": /***/ (function(module, exports, __webpack_require__) { @@ -569,7 +532,6 @@ function () { pageLoader: pageLoader, App: App, Component: Component, - wrapApp: wrapApp, err: initialErr, subscription: function subscription(_ref3, App) { var Component = _ref3.Component, @@ -670,7 +632,7 @@ function _renderError() { _renderError = (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee3(props) { - var App, err, appCtx, initProps; + var App, err, initProps; return _regenerator["default"].wrap(function _callee3$(_context3) { while (1) { switch (_context3.prev = _context3.next) { @@ -693,47 +655,42 @@ function _renderError() { case 6: exports.ErrorComponent = ErrorComponent = _context3.sent; - // In production we do a normal render with the `ErrorComponent` as component. - // If we've gotten here upon initial render, we can use the props from the server. - // Otherwise, we need to call `getInitialProps` on `App` before mounting. - appCtx = { - AppTree: wrapApp(App), - Component: ErrorComponent, - router: router, - ctx: { - err: err, - pathname: page, - query: query, - asPath: asPath - } - }; if (!props.props) { - _context3.next = 12; + _context3.next = 11; break; } _context3.t0 = props.props; - _context3.next = 15; + _context3.next = 14; break; - case 12: - _context3.next = 14; - return (0, _utils.loadGetInitialProps)(App, appCtx); + case 11: + _context3.next = 13; + return (0, _utils.loadGetInitialProps)(App, { + Component: ErrorComponent, + router: router, + ctx: { + err: err, + pathname: page, + query: query, + asPath: asPath + } + }); - case 14: + case 13: _context3.t0 = _context3.sent; - case 15: + case 14: initProps = _context3.t0; - _context3.next = 18; + _context3.next = 17; return doRender((0, _extends2["default"])({}, props, { err: err, Component: ErrorComponent, props: initProps })); - case 18: + case 17: case "end": return _context3.stop(); } @@ -778,17 +735,6 @@ function AppContainer(_ref4) { }, children))))); } -var wrapApp = function wrapApp(App) { - return function (props) { - var appProps = (0, _extends2["default"])({}, props, { - Component: Component, - err: err, - router: router - }); - return _react["default"].createElement(AppContainer, null, _react["default"].createElement(App, appProps)); - }; -}; - function doRender(_x4) { return _doRender.apply(this, arguments); } @@ -797,7 +743,7 @@ function _doRender() { _doRender = (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee4(_ref5) { - var App, Component, props, err, _router2, pathname, _query, _asPath, appCtx, appProps; + var App, Component, props, err, _router2, pathname, _query, _asPath, appProps; return _regenerator["default"].wrap(function _callee4$(_context4) { while (1) { @@ -807,37 +753,35 @@ function _doRender() { // this is for when ErrorComponent gets replaced by Component by HMR if (!(!props && Component && Component !== ErrorComponent && lastAppProps.Component === ErrorComponent)) { - _context4.next = 7; + _context4.next = 6; break; } _router2 = router, pathname = _router2.pathname, _query = _router2.query, _asPath = _router2.asPath; - appCtx = { + _context4.next = 5; + return (0, _utils.loadGetInitialProps)(App, { + Component: Component, router: router, - AppTree: wrapApp(App), - Component: ErrorComponent, ctx: { err: err, pathname: pathname, query: _query, asPath: _asPath } - }; - _context4.next = 6; - return (0, _utils.loadGetInitialProps)(App, appCtx); + }); - case 6: + case 5: props = _context4.sent; - case 7: + case 6: Component = Component || lastAppProps.Component; props = props || lastAppProps.props; - appProps = (0, _extends2["default"])({}, props, { + appProps = (0, _extends2["default"])({ Component: Component, err: err, - router: router // lastAppProps has to be set before ReactDom.render to account for ReactDom throwing an error. + router: router + }, props); // lastAppProps has to be set before ReactDom.render to account for ReactDom throwing an error. - }); lastAppProps = appProps; emitter.emit('before-reactdom-render', { Component: Component, @@ -852,7 +796,7 @@ function _doRender() { appProps: appProps }); - case 14: + case 13: case "end": return _context4.stop(); } @@ -894,15 +838,6 @@ module.exports = __webpack_require__("WEpk").Map; /***/ }), -/***/ "V+O7": -/***/ (function(module, exports, __webpack_require__) { - -// https://tc39.github.io/proposal-setmap-offrom/#sec-set.from -__webpack_require__("aPfg")('Set'); - - -/***/ }), - /***/ "XLbu": /***/ (function(module, exports, __webpack_require__) { @@ -970,17 +905,6 @@ exports.DataManager = DataManager; /***/ }), -/***/ "dL40": -/***/ (function(module, exports, __webpack_require__) { - -// https://github.com/DavidBruant/Map-Set.prototype.toJSON -var $export = __webpack_require__("Y7ZC"); - -$export($export.P + $export.R, 'Set', { toJSON: __webpack_require__("8iia")('Set') }); - - -/***/ }), - /***/ "dVTT": /***/ (function(module, exports, __webpack_require__) { @@ -1058,22 +982,6 @@ exports.DataManagerContext = React.createContext(null); /***/ }), -/***/ "ttDY": -/***/ (function(module, exports, __webpack_require__) { - -module.exports = __webpack_require__("+iuc"); - -/***/ }), - -/***/ "xvv9": -/***/ (function(module, exports, __webpack_require__) { - -// https://tc39.github.io/proposal-setmap-offrom/#sec-set.of -__webpack_require__("cHUd")('Set'); - - -/***/ }), - /***/ "zmvN": /***/ (function(module, exports, __webpack_require__) { @@ -1097,28 +1005,45 @@ var _asyncToGenerator2 = _interopRequireDefault(__webpack_require__("+oT+")); var _promise = _interopRequireDefault(__webpack_require__("eVuF")); -var _set = _interopRequireDefault(__webpack_require__("ttDY")); - var _mitt = _interopRequireDefault(__webpack_require__("kiME")); var _unfetch = _interopRequireDefault(__webpack_require__("m/Gl")); -/* global document */ -// smaller version of https://gist.github.com/igrigorik/a02f2359f3bc50ca7a9c - +/* global document, window */ -function supportsPreload(list) { - if (!list || !list.supports) { - return false; - } +function supportsPreload(el) { try { - return list.supports('preload'); - } catch (e) { + return el.relList.supports('preload'); + } catch (_unused) { return false; } } -var hasPreload = supportsPreload(document.createElement('link').relList); +var hasPreload = supportsPreload(document.createElement('link')); + +function createPreloadLink(url) { + var link = document.createElement('link'); + link.rel = 'preload'; + link.crossOrigin = undefined; + link.href = url; + link.as = 'script'; + document.head.appendChild(link); +} // Retrieve a list of dependencies for a given route from the build manifest + + +function getDependencies(route, _m) { + var isModern = false && false; + + if ((_m = window.__BUILD_MANIFEST) && (_m = _m[route])) { + return _m.map(function (url) { + return "/_next/" + url; + }).filter(function (url) { + return /\.module\.js$/.test(url) === isModern; + }); + } + + return []; +} var PageLoader = /*#__PURE__*/ @@ -1128,7 +1053,6 @@ function () { this.buildId = buildId; this.assetPrefix = assetPrefix; this.pageCache = {}; - this.prefetchCache = new _set["default"](); this.pageRegisterEvents = (0, _mitt["default"])(); this.loadingRoutes = {}; this.promisedBuildId = _promise["default"].resolve(); @@ -1184,11 +1108,16 @@ function () { if (document.getElementById("__NEXT_PAGE__" + route)) { return; - } // Load the script if not asked to load yet. - + } if (!_this3.loadingRoutes[route]) { - _this3.loadScript(route); + getDependencies(route).forEach(function (d) { + if (!document.querySelector("script[src^=\"" + d + "\"]")) { + _this3.loadScript(d, route); + } + }); + + _this3.loadRoute(route); _this3.loadingRoutes[route] = true; } @@ -1220,14 +1149,14 @@ function () { }); } }, { - key: "loadScript", - value: function loadScript(route) { + key: "loadRoute", + value: function loadRoute(route) { var _this = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee() { - var scriptRoute, script, url; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee$(_context) { while (1) { switch (_context.prev = _context.next) { @@ -1238,38 +1167,46 @@ function () { case 2: route = _this.normalizeRoute(route); scriptRoute = route === '/' ? '/index.js' : route + ".js"; - script = document.createElement('script'); - - if (false) {} - url = _this.assetPrefix + "/_next/static/" + encodeURIComponent(_this.buildId) + "/pages" + scriptRoute; - script.crossOrigin = undefined; - script.src = url; - - script.onerror = function () { - var error = new Error("Error loading script " + url); - error.code = 'PAGE_LOAD_ERROR'; - - _this.pageRegisterEvents.emit(route, { - error: error - }); - }; - document.body.appendChild(script); + _this.loadScript(url, route); - case 11: + case 6: case "end": return _context.stop(); } } }, _callee); }))(); + } + }, { + key: "loadScript", + value: function loadScript(url, route) { + var _this5 = this; + + var script = document.createElement('script'); + + if (false) {} + + script.crossOrigin = undefined; + script.src = url; + + script.onerror = function () { + var error = new Error("Error loading script " + url); + error.code = 'PAGE_LOAD_ERROR'; + + _this5.pageRegisterEvents.emit(route, { + error: error + }); + }; + + document.body.appendChild(script); } // This method if called by the route code. }, { key: "registerPage", value: function registerPage(route, regFn) { - var _this5 = this; + var _this6 = this; var register = function register() { try { @@ -1277,21 +1214,21 @@ function () { error = _regFn.error, page = _regFn.page; - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error, page: page }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error, page: page }); } catch (error) { - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error }); } @@ -1303,73 +1240,84 @@ function () { } }, { key: "prefetch", - value: function prefetch(route) { + value: function prefetch(route, isDependency) { var _this2 = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee2() { - var scriptRoute, link; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee2$(_context2) { while (1) { switch (_context2.prev = _context2.next) { case 0: + _context2.next = 2; + return _this2.promisedBuildId; + + case 2: route = _this2.normalizeRoute(route); scriptRoute = (route === '/' ? '/index' : route) + ".js"; if (false) {} - if (!(_this2.prefetchCache.has(scriptRoute) || document.getElementById("__NEXT_PAGE__" + route))) { - _context2.next = 5; + url = isDependency ? route : _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; // n.b. If preload is not supported, we fall back to `loadPage` which has + // its own deduping mechanism. + + if (!(document.querySelector("link[rel=\"preload\"][href^=\"" + url + "\"]") || document.getElementById("__NEXT_PAGE__" + route))) { + _context2.next = 8; break; } return _context2.abrupt("return"); - case 5: - _this2.prefetchCache.add(scriptRoute); // Inspired by quicklink, license: https://github.com/GoogleChromeLabs/quicklink/blob/master/LICENSE - // Don't prefetch if the user is on 2G / Don't prefetch if Save-Data is enabled - - + case 8: if (!('connection' in navigator)) { - _context2.next = 9; + _context2.next = 11; break; } if (!((navigator.connection.effectiveType || '').indexOf('2g') !== -1 || navigator.connection.saveData)) { - _context2.next = 9; + _context2.next = 11; break; } return _context2.abrupt("return"); - case 9: + case 11: + if (!isDependency) { + getDependencies(route).forEach(function (url) { + _this2.prefetch(url, true); + }); + } // Feature detection is used to see if preload is supported + // If not fall back to loading script tags before the page is loaded + // https://caniuse.com/#feat=link-rel-preload + + if (!hasPreload) { - _context2.next = 19; + _context2.next = 15; break; } - _context2.next = 12; - return _this2.promisedBuildId; + createPreloadLink(url); + return _context2.abrupt("return"); + + case 15: + if (!isDependency) { + _context2.next = 17; + break; + } - case 12: - link = document.createElement('link'); - link.rel = 'preload'; - link.crossOrigin = undefined; - link.href = _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; - link.as = 'script'; - document.head.appendChild(link); return _context2.abrupt("return"); - case 19: + case 17: if (!(document.readyState === 'complete')) { - _context2.next = 23; + _context2.next = 21; break; } return _context2.abrupt("return", _this2.loadPage(route)["catch"](function () {})); - case 23: + case 21: return _context2.abrupt("return", new _promise["default"](function (resolve) { window.addEventListener('load', function () { _this2.loadPage(route).then(function () { @@ -1380,7 +1328,7 @@ function () { }); })); - case 24: + case 22: case "end": return _context2.stop(); } ```
github-actions[bot] commented 5 years ago

Stats from current PR

Click to expand stats ✅ Total Bundle Size Decrease ✅ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 13.3s | 13.1s | -281ms | | `node_modules` Size | 45.9 MB | 45.9 MB | ⚠️ +8.75 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 206 kB | -49 B | | Total Bundle (main, webpack, commons) gzip Size | 67.9 kB | 67.8 kB | -35 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 15.6 kB | 15.2 kB | -382 B | | Client `main` gzip Size | 5.39 kB | 5.37 kB | -21 B | | Client `commons` Size | 188 kB | 188 kB | ⚠️ +333 B | | Client `commons` gzip Size | 61.1 kB | 61.1 kB | -14 B | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Base Rendered Size | 1.35 kB | 1.35 kB | ✓ | | Build Dir Size | 703 kB | 705 kB | ⚠️ +1.75 kB |
Click to expand serverless stats ✅ Total Bundle Size Decrease ✅ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 14.4s | 14.5s | ⚠️ +90ms | | `node_modules` Size | 45.9 MB | 45.9 MB | ⚠️ +8.75 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 206 kB | -49 B | | Total Bundle (main, webpack, commons) gzip Size | 67.9 kB | 67.8 kB | -35 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 15.6 kB | 15.2 kB | -382 B | | Client `main` gzip Size | 5.39 kB | 5.37 kB | -21 B | | Client `commons` Size | 188 kB | 188 kB | ⚠️ +333 B | | Client `commons` gzip Size | 61.1 kB | 61.1 kB | -14 B | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Serverless `pages/link` Size | 252 kB | 252 kB | ⚠️ +625 B | | Serverless `pages/link` gzip Size | 67.9 kB | 68 kB | ⚠️ +16 B | | Serverless `pages/index` Size | 244 kB | 245 kB | ⚠️ +625 B | | Serverless `pages/index` gzip Size | 65.8 kB | 65.8 kB | ⚠️ +6 B | | Serverless `pages/_error` Size | 244 kB | 244 kB | ⚠️ +625 B | | Serverless `pages/_error` gzip Size | 65.5 kB | 65.5 kB | ⚠️ +22 B | | Serverless `pages/routerDirect` Size | 245 kB | 246 kB | ⚠️ +625 B | | Serverless `pages/routerDirect` gzip Size | 65.7 kB | 65.7 kB | ⚠️ +15 B | | Serverless `pages/withRouter` Size | 245 kB | 245 kB | ⚠️ +625 B | | Serverless `pages/withRouter` gzip Size | 65.8 kB | 65.9 kB | ⚠️ +10 B | | Build Dir Size | 1.89 MB | 1.9 MB | ⚠️ +4.95 kB |
Diff for commons.js ```diff @@ -420,6 +420,36 @@ var objectKeys = Object.keys || function (obj) { /***/ }), +/***/ "4Vye": +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +var _interopRequireDefault = __webpack_require__("KI45"); + +var _defineProperty = _interopRequireDefault(__webpack_require__("hfKm")); + +var __importStar = void 0 && (void 0).__importStar || function (mod) { + if (mod && mod.__esModule) return mod; + var result = {}; + if (mod != null) for (var k in mod) { + if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k]; + } + result["default"] = mod; + return result; +}; + +(0, _defineProperty["default"])(exports, "__esModule", { + value: true +}); + +var React = __importStar(__webpack_require__("q1tI")); + +exports.RequestContext = React.createContext(null); + +/***/ }), + /***/ "4jyI": /***/ (function(module, exports, __webpack_require__) { @@ -3018,7 +3048,6 @@ function () { var initialProps = _ref.initialProps, pageLoader = _ref.pageLoader, App = _ref.App, - wrapApp = _ref.wrapApp, Component = _ref.Component, err = _ref.err, subscription = _ref.subscription; @@ -3096,7 +3125,6 @@ function () { this.asPath = as; this.sub = subscription; this.clc = null; - this._wrapApp = wrapApp; if (true) { // in order for `e.state` to work on the `onpopstate` event @@ -3583,7 +3611,6 @@ function () { App = this.components['/_app'].Component; _context2.next = 6; return utils_1.loadGetInitialProps(App, { - AppTree: this._wrapApp(App), Component: Component, router: this, ctx: ctx @@ -6655,6 +6682,7 @@ var _interopRequireDefault = __webpack_require__("KI45"); exports.__esModule = true; exports.useRouter = useRouter; +exports.useRequest = useRequest; exports.makePublicRouterInstance = makePublicRouterInstance; exports.createRouter = exports.withRouter = exports["default"] = void 0; @@ -6671,6 +6699,8 @@ exports.NextRouter = _router2.NextRouter; var _routerContext = __webpack_require__("9EOK"); +var _requestContext = __webpack_require__("4Vye"); + var _withRouter = _interopRequireDefault(__webpack_require__("0Bsm")); exports.withRouter = _withRouter["default"]; @@ -6756,6 +6786,10 @@ exports["default"] = _default; function useRouter() { return _react["default"].useContext(_routerContext.RouterContext); +} + +function useRequest() { + return _react["default"].useContext(_requestContext.RequestContext); } // INTERNAL APIS // ------------- // (do not use following exports inside the app) ```
Diff for main.js ```diff @@ -1,20 +1,5 @@ (window["webpackJsonp"] = window["webpackJsonp"] || []).push([[2],{ -/***/ "+iuc": -/***/ (function(module, exports, __webpack_require__) { - -__webpack_require__("wgeU"); -__webpack_require__("FlQf"); -__webpack_require__("bBy9"); -__webpack_require__("B9jh"); -__webpack_require__("dL40"); -__webpack_require__("xvv9"); -__webpack_require__("V+O7"); -module.exports = __webpack_require__("WEpk").Set; - - -/***/ }), - /***/ "+oT+": /***/ (function(module, exports, __webpack_require__) { @@ -69,28 +54,6 @@ __webpack_require__("cHUd")('Map'); /***/ }), -/***/ "B9jh": -/***/ (function(module, exports, __webpack_require__) { - -"use strict"; - -var strong = __webpack_require__("Wu5q"); -var validate = __webpack_require__("n3ko"); -var SET = 'Set'; - -// 23.2 Set Objects -module.exports = __webpack_require__("raTm")(SET, function (get) { - return function Set() { return get(this, arguments.length > 0 ? arguments[0] : undefined); }; -}, { - // 23.2.3.1 Set.prototype.add(value) - add: function add(value) { - return strong.def(validate(this, SET), value = value === 0 ? 0 : value, value); - } -}, strong); - - -/***/ }), - /***/ "BMP1": /***/ (function(module, exports, __webpack_require__) { @@ -569,7 +532,6 @@ function () { pageLoader: pageLoader, App: App, Component: Component, - wrapApp: wrapApp, err: initialErr, subscription: function subscription(_ref3, App) { var Component = _ref3.Component, @@ -670,7 +632,7 @@ function _renderError() { _renderError = (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee3(props) { - var App, err, appCtx, initProps; + var App, err, initProps; return _regenerator["default"].wrap(function _callee3$(_context3) { while (1) { switch (_context3.prev = _context3.next) { @@ -693,47 +655,42 @@ function _renderError() { case 6: exports.ErrorComponent = ErrorComponent = _context3.sent; - // In production we do a normal render with the `ErrorComponent` as component. - // If we've gotten here upon initial render, we can use the props from the server. - // Otherwise, we need to call `getInitialProps` on `App` before mounting. - appCtx = { - AppTree: wrapApp(App), - Component: ErrorComponent, - router: router, - ctx: { - err: err, - pathname: page, - query: query, - asPath: asPath - } - }; if (!props.props) { - _context3.next = 12; + _context3.next = 11; break; } _context3.t0 = props.props; - _context3.next = 15; + _context3.next = 14; break; - case 12: - _context3.next = 14; - return (0, _utils.loadGetInitialProps)(App, appCtx); + case 11: + _context3.next = 13; + return (0, _utils.loadGetInitialProps)(App, { + Component: ErrorComponent, + router: router, + ctx: { + err: err, + pathname: page, + query: query, + asPath: asPath + } + }); - case 14: + case 13: _context3.t0 = _context3.sent; - case 15: + case 14: initProps = _context3.t0; - _context3.next = 18; + _context3.next = 17; return doRender((0, _extends2["default"])({}, props, { err: err, Component: ErrorComponent, props: initProps })); - case 18: + case 17: case "end": return _context3.stop(); } @@ -778,17 +735,6 @@ function AppContainer(_ref4) { }, children))))); } -var wrapApp = function wrapApp(App) { - return function (props) { - var appProps = (0, _extends2["default"])({}, props, { - Component: Component, - err: err, - router: router - }); - return _react["default"].createElement(AppContainer, null, _react["default"].createElement(App, appProps)); - }; -}; - function doRender(_x4) { return _doRender.apply(this, arguments); } @@ -797,7 +743,7 @@ function _doRender() { _doRender = (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee4(_ref5) { - var App, Component, props, err, _router2, pathname, _query, _asPath, appCtx, appProps; + var App, Component, props, err, _router2, pathname, _query, _asPath, appProps; return _regenerator["default"].wrap(function _callee4$(_context4) { while (1) { @@ -807,37 +753,35 @@ function _doRender() { // this is for when ErrorComponent gets replaced by Component by HMR if (!(!props && Component && Component !== ErrorComponent && lastAppProps.Component === ErrorComponent)) { - _context4.next = 7; + _context4.next = 6; break; } _router2 = router, pathname = _router2.pathname, _query = _router2.query, _asPath = _router2.asPath; - appCtx = { + _context4.next = 5; + return (0, _utils.loadGetInitialProps)(App, { + Component: Component, router: router, - AppTree: wrapApp(App), - Component: ErrorComponent, ctx: { err: err, pathname: pathname, query: _query, asPath: _asPath } - }; - _context4.next = 6; - return (0, _utils.loadGetInitialProps)(App, appCtx); + }); - case 6: + case 5: props = _context4.sent; - case 7: + case 6: Component = Component || lastAppProps.Component; props = props || lastAppProps.props; - appProps = (0, _extends2["default"])({}, props, { + appProps = (0, _extends2["default"])({ Component: Component, err: err, - router: router // lastAppProps has to be set before ReactDom.render to account for ReactDom throwing an error. + router: router + }, props); // lastAppProps has to be set before ReactDom.render to account for ReactDom throwing an error. - }); lastAppProps = appProps; emitter.emit('before-reactdom-render', { Component: Component, @@ -852,7 +796,7 @@ function _doRender() { appProps: appProps }); - case 14: + case 13: case "end": return _context4.stop(); } @@ -894,15 +838,6 @@ module.exports = __webpack_require__("WEpk").Map; /***/ }), -/***/ "V+O7": -/***/ (function(module, exports, __webpack_require__) { - -// https://tc39.github.io/proposal-setmap-offrom/#sec-set.from -__webpack_require__("aPfg")('Set'); - - -/***/ }), - /***/ "XLbu": /***/ (function(module, exports, __webpack_require__) { @@ -970,17 +905,6 @@ exports.DataManager = DataManager; /***/ }), -/***/ "dL40": -/***/ (function(module, exports, __webpack_require__) { - -// https://github.com/DavidBruant/Map-Set.prototype.toJSON -var $export = __webpack_require__("Y7ZC"); - -$export($export.P + $export.R, 'Set', { toJSON: __webpack_require__("8iia")('Set') }); - - -/***/ }), - /***/ "dVTT": /***/ (function(module, exports, __webpack_require__) { @@ -1058,22 +982,6 @@ exports.DataManagerContext = React.createContext(null); /***/ }), -/***/ "ttDY": -/***/ (function(module, exports, __webpack_require__) { - -module.exports = __webpack_require__("+iuc"); - -/***/ }), - -/***/ "xvv9": -/***/ (function(module, exports, __webpack_require__) { - -// https://tc39.github.io/proposal-setmap-offrom/#sec-set.of -__webpack_require__("cHUd")('Set'); - - -/***/ }), - /***/ "zmvN": /***/ (function(module, exports, __webpack_require__) { @@ -1097,28 +1005,45 @@ var _asyncToGenerator2 = _interopRequireDefault(__webpack_require__("+oT+")); var _promise = _interopRequireDefault(__webpack_require__("eVuF")); -var _set = _interopRequireDefault(__webpack_require__("ttDY")); - var _mitt = _interopRequireDefault(__webpack_require__("kiME")); var _unfetch = _interopRequireDefault(__webpack_require__("m/Gl")); -/* global document */ -// smaller version of https://gist.github.com/igrigorik/a02f2359f3bc50ca7a9c - +/* global document, window */ -function supportsPreload(list) { - if (!list || !list.supports) { - return false; - } +function supportsPreload(el) { try { - return list.supports('preload'); - } catch (e) { + return el.relList.supports('preload'); + } catch (_unused) { return false; } } -var hasPreload = supportsPreload(document.createElement('link').relList); +var hasPreload = supportsPreload(document.createElement('link')); + +function createPreloadLink(url) { + var link = document.createElement('link'); + link.rel = 'preload'; + link.crossOrigin = undefined; + link.href = url; + link.as = 'script'; + document.head.appendChild(link); +} // Retrieve a list of dependencies for a given route from the build manifest + + +function getDependencies(route, _m) { + var isModern = false && false; + + if ((_m = window.__BUILD_MANIFEST) && (_m = _m[route])) { + return _m.map(function (url) { + return "/_next/" + url; + }).filter(function (url) { + return /\.module\.js$/.test(url) === isModern; + }); + } + + return []; +} var PageLoader = /*#__PURE__*/ @@ -1128,7 +1053,6 @@ function () { this.buildId = buildId; this.assetPrefix = assetPrefix; this.pageCache = {}; - this.prefetchCache = new _set["default"](); this.pageRegisterEvents = (0, _mitt["default"])(); this.loadingRoutes = {}; this.promisedBuildId = _promise["default"].resolve(); @@ -1184,11 +1108,16 @@ function () { if (document.getElementById("__NEXT_PAGE__" + route)) { return; - } // Load the script if not asked to load yet. - + } if (!_this3.loadingRoutes[route]) { - _this3.loadScript(route); + getDependencies(route).forEach(function (d) { + if (!document.querySelector("script[src^=\"" + d + "\"]")) { + _this3.loadScript(d, route); + } + }); + + _this3.loadRoute(route); _this3.loadingRoutes[route] = true; } @@ -1220,14 +1149,14 @@ function () { }); } }, { - key: "loadScript", - value: function loadScript(route) { + key: "loadRoute", + value: function loadRoute(route) { var _this = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee() { - var scriptRoute, script, url; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee$(_context) { while (1) { switch (_context.prev = _context.next) { @@ -1238,38 +1167,46 @@ function () { case 2: route = _this.normalizeRoute(route); scriptRoute = route === '/' ? '/index.js' : route + ".js"; - script = document.createElement('script'); - - if (false) {} - url = _this.assetPrefix + "/_next/static/" + encodeURIComponent(_this.buildId) + "/pages" + scriptRoute; - script.crossOrigin = undefined; - script.src = url; - - script.onerror = function () { - var error = new Error("Error loading script " + url); - error.code = 'PAGE_LOAD_ERROR'; - - _this.pageRegisterEvents.emit(route, { - error: error - }); - }; - document.body.appendChild(script); + _this.loadScript(url, route); - case 11: + case 6: case "end": return _context.stop(); } } }, _callee); }))(); + } + }, { + key: "loadScript", + value: function loadScript(url, route) { + var _this5 = this; + + var script = document.createElement('script'); + + if (false) {} + + script.crossOrigin = undefined; + script.src = url; + + script.onerror = function () { + var error = new Error("Error loading script " + url); + error.code = 'PAGE_LOAD_ERROR'; + + _this5.pageRegisterEvents.emit(route, { + error: error + }); + }; + + document.body.appendChild(script); } // This method if called by the route code. }, { key: "registerPage", value: function registerPage(route, regFn) { - var _this5 = this; + var _this6 = this; var register = function register() { try { @@ -1277,21 +1214,21 @@ function () { error = _regFn.error, page = _regFn.page; - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error, page: page }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error, page: page }); } catch (error) { - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error }); } @@ -1303,73 +1240,84 @@ function () { } }, { key: "prefetch", - value: function prefetch(route) { + value: function prefetch(route, isDependency) { var _this2 = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee2() { - var scriptRoute, link; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee2$(_context2) { while (1) { switch (_context2.prev = _context2.next) { case 0: + _context2.next = 2; + return _this2.promisedBuildId; + + case 2: route = _this2.normalizeRoute(route); scriptRoute = (route === '/' ? '/index' : route) + ".js"; if (false) {} - if (!(_this2.prefetchCache.has(scriptRoute) || document.getElementById("__NEXT_PAGE__" + route))) { - _context2.next = 5; + url = isDependency ? route : _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; // n.b. If preload is not supported, we fall back to `loadPage` which has + // its own deduping mechanism. + + if (!(document.querySelector("link[rel=\"preload\"][href^=\"" + url + "\"]") || document.getElementById("__NEXT_PAGE__" + route))) { + _context2.next = 8; break; } return _context2.abrupt("return"); - case 5: - _this2.prefetchCache.add(scriptRoute); // Inspired by quicklink, license: https://github.com/GoogleChromeLabs/quicklink/blob/master/LICENSE - // Don't prefetch if the user is on 2G / Don't prefetch if Save-Data is enabled - - + case 8: if (!('connection' in navigator)) { - _context2.next = 9; + _context2.next = 11; break; } if (!((navigator.connection.effectiveType || '').indexOf('2g') !== -1 || navigator.connection.saveData)) { - _context2.next = 9; + _context2.next = 11; break; } return _context2.abrupt("return"); - case 9: + case 11: + if (!isDependency) { + getDependencies(route).forEach(function (url) { + _this2.prefetch(url, true); + }); + } // Feature detection is used to see if preload is supported + // If not fall back to loading script tags before the page is loaded + // https://caniuse.com/#feat=link-rel-preload + + if (!hasPreload) { - _context2.next = 19; + _context2.next = 15; break; } - _context2.next = 12; - return _this2.promisedBuildId; + createPreloadLink(url); + return _context2.abrupt("return"); + + case 15: + if (!isDependency) { + _context2.next = 17; + break; + } - case 12: - link = document.createElement('link'); - link.rel = 'preload'; - link.crossOrigin = undefined; - link.href = _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; - link.as = 'script'; - document.head.appendChild(link); return _context2.abrupt("return"); - case 19: + case 17: if (!(document.readyState === 'complete')) { - _context2.next = 23; + _context2.next = 21; break; } return _context2.abrupt("return", _this2.loadPage(route)["catch"](function () {})); - case 23: + case 21: return _context2.abrupt("return", new _promise["default"](function (resolve) { window.addEventListener('load', function () { _this2.loadPage(route).then(function () { @@ -1380,7 +1328,7 @@ function () { }); })); - case 24: + case 22: case "end": return _context2.stop(); } ```
github-actions[bot] commented 5 years ago

Stats from current PR

Click to expand stats ✅ Total Bundle Size Decrease ✅ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 13.7s | 13.1s | -588ms | | `node_modules` Size | 45.9 MB | 45.9 MB | ⚠️ +8.75 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 206 kB | -49 B | | Total Bundle (main, webpack, commons) gzip Size | 67.9 kB | 67.8 kB | -35 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 15.6 kB | 15.2 kB | -382 B | | Client `main` gzip Size | 5.39 kB | 5.37 kB | -21 B | | Client `commons` Size | 188 kB | 188 kB | ⚠️ +333 B | | Client `commons` gzip Size | 61.1 kB | 61.1 kB | -14 B | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Base Rendered Size | 1.35 kB | 1.35 kB | ✓ | | Build Dir Size | 703 kB | 705 kB | ⚠️ +1.75 kB |
Click to expand serverless stats ✅ Total Bundle Size Decrease ✅ | | zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | | - | - | - | - | | Build Duration | 14.4s | 14.5s | ⚠️ +91ms | | `node_modules` Size | 45.9 MB | 45.9 MB | ⚠️ +8.75 kB | | Total Bundle (main, webpack, commons) Size | 206 kB | 206 kB | -49 B | | Total Bundle (main, webpack, commons) gzip Size | 67.9 kB | 67.8 kB | -35 B | | Client `_app` Size | 2.39 kB | 2.39 kB | ✓ | | Client `_app` gzip Size | 1.08 kB | 1.08 kB | ✓ | | Client `_error` Size | 8.22 kB | 8.22 kB | ✓ | | Client `_error` gzip Size | 3.16 kB | 3.16 kB | ✓ | | Client `pages/index` Size | 343 B | 343 B | ✓ | | Client `pages/index` gzip Size | 246 B | 246 B | ✓ | | Client `pages/link` Size | 4.08 kB | 4.08 kB | ✓ | | Client `pages/link` gzip Size | 1.8 kB | 1.8 kB | ✓ | | Client `pages/routerDirect` Size | 423 B | 423 B | ✓ | | Client `pages/routerDirect` gzip Size | 306 B | 306 B | ✓ | | Client `pages/withRouter` Size | 435 B | 435 B | ✓ | | Client `pages/withRouter` gzip Size | 301 B | 301 B | ✓ | | Client `main` Size | 15.6 kB | 15.2 kB | -382 B | | Client `main` gzip Size | 5.39 kB | 5.37 kB | -21 B | | Client `commons` Size | 188 kB | 188 kB | ⚠️ +333 B | | Client `commons` gzip Size | 61.1 kB | 61.1 kB | -14 B | | Client `webpack` Size | 1.49 kB | 1.49 kB | ✓ | | Client `webpack` gzip Size | 770 B | 770 B | ✓ | | Serverless `pages/link` Size | 252 kB | 252 kB | ⚠️ +625 B | | Serverless `pages/link` gzip Size | 67.9 kB | 68 kB | ⚠️ +16 B | | Serverless `pages/index` Size | 244 kB | 245 kB | ⚠️ +625 B | | Serverless `pages/index` gzip Size | 65.8 kB | 65.8 kB | ⚠️ +8 B | | Serverless `pages/_error` Size | 244 kB | 244 kB | ⚠️ +625 B | | Serverless `pages/_error` gzip Size | 65.5 kB | 65.5 kB | ⚠️ +24 B | | Serverless `pages/routerDirect` Size | 245 kB | 246 kB | ⚠️ +625 B | | Serverless `pages/routerDirect` gzip Size | 65.7 kB | 65.7 kB | ⚠️ +16 B | | Serverless `pages/withRouter` Size | 245 kB | 245 kB | ⚠️ +625 B | | Serverless `pages/withRouter` gzip Size | 65.8 kB | 65.9 kB | ⚠️ +11 B | | Build Dir Size | 1.89 MB | 1.9 MB | ⚠️ +4.95 kB |
Diff for commons.js ```diff @@ -420,6 +420,36 @@ var objectKeys = Object.keys || function (obj) { /***/ }), +/***/ "4Vye": +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +var _interopRequireDefault = __webpack_require__("KI45"); + +var _defineProperty = _interopRequireDefault(__webpack_require__("hfKm")); + +var __importStar = void 0 && (void 0).__importStar || function (mod) { + if (mod && mod.__esModule) return mod; + var result = {}; + if (mod != null) for (var k in mod) { + if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k]; + } + result["default"] = mod; + return result; +}; + +(0, _defineProperty["default"])(exports, "__esModule", { + value: true +}); + +var React = __importStar(__webpack_require__("q1tI")); + +exports.RequestContext = React.createContext(null); + +/***/ }), + /***/ "4jyI": /***/ (function(module, exports, __webpack_require__) { @@ -3018,7 +3048,6 @@ function () { var initialProps = _ref.initialProps, pageLoader = _ref.pageLoader, App = _ref.App, - wrapApp = _ref.wrapApp, Component = _ref.Component, err = _ref.err, subscription = _ref.subscription; @@ -3096,7 +3125,6 @@ function () { this.asPath = as; this.sub = subscription; this.clc = null; - this._wrapApp = wrapApp; if (true) { // in order for `e.state` to work on the `onpopstate` event @@ -3583,7 +3611,6 @@ function () { App = this.components['/_app'].Component; _context2.next = 6; return utils_1.loadGetInitialProps(App, { - AppTree: this._wrapApp(App), Component: Component, router: this, ctx: ctx @@ -6655,6 +6682,7 @@ var _interopRequireDefault = __webpack_require__("KI45"); exports.__esModule = true; exports.useRouter = useRouter; +exports.useRequest = useRequest; exports.makePublicRouterInstance = makePublicRouterInstance; exports.createRouter = exports.withRouter = exports["default"] = void 0; @@ -6671,6 +6699,8 @@ exports.NextRouter = _router2.NextRouter; var _routerContext = __webpack_require__("9EOK"); +var _requestContext = __webpack_require__("4Vye"); + var _withRouter = _interopRequireDefault(__webpack_require__("0Bsm")); exports.withRouter = _withRouter["default"]; @@ -6756,6 +6786,10 @@ exports["default"] = _default; function useRouter() { return _react["default"].useContext(_routerContext.RouterContext); +} + +function useRequest() { + return _react["default"].useContext(_requestContext.RequestContext); } // INTERNAL APIS // ------------- // (do not use following exports inside the app) ```
Diff for main.js ```diff @@ -1,19 +1,4 @@ -(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[2],{ - -/***/ "+iuc": -/***/ (function(module, exports, __webpack_require__) { - -__webpack_require__("wgeU"); -__webpack_require__("FlQf"); -__webpack_require__("bBy9"); -__webpack_require__("B9jh"); -__webpack_require__("dL40"); -__webpack_require__("xvv9"); -__webpack_require__("V+O7"); -module.exports = __webpack_require__("WEpk").Set; - - -/***/ }), +(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[8],{ /***/ "+oT+": /***/ (function(module, exports, __webpack_require__) { @@ -69,28 +54,6 @@ __webpack_require__("cHUd")('Map'); /***/ }), -/***/ "B9jh": -/***/ (function(module, exports, __webpack_require__) { - -"use strict"; - -var strong = __webpack_require__("Wu5q"); -var validate = __webpack_require__("n3ko"); -var SET = 'Set'; - -// 23.2 Set Objects -module.exports = __webpack_require__("raTm")(SET, function (get) { - return function Set() { return get(this, arguments.length > 0 ? arguments[0] : undefined); }; -}, { - // 23.2.3.1 Set.prototype.add(value) - add: function add(value) { - return strong.def(validate(this, SET), value = value === 0 ? 0 : value, value); - } -}, strong); - - -/***/ }), - /***/ "BMP1": /***/ (function(module, exports, __webpack_require__) { @@ -569,7 +532,6 @@ function () { pageLoader: pageLoader, App: App, Component: Component, - wrapApp: wrapApp, err: initialErr, subscription: function subscription(_ref3, App) { var Component = _ref3.Component, @@ -670,7 +632,7 @@ function _renderError() { _renderError = (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee3(props) { - var App, err, appCtx, initProps; + var App, err, initProps; return _regenerator["default"].wrap(function _callee3$(_context3) { while (1) { switch (_context3.prev = _context3.next) { @@ -693,47 +655,42 @@ function _renderError() { case 6: exports.ErrorComponent = ErrorComponent = _context3.sent; - // In production we do a normal render with the `ErrorComponent` as component. - // If we've gotten here upon initial render, we can use the props from the server. - // Otherwise, we need to call `getInitialProps` on `App` before mounting. - appCtx = { - AppTree: wrapApp(App), - Component: ErrorComponent, - router: router, - ctx: { - err: err, - pathname: page, - query: query, - asPath: asPath - } - }; if (!props.props) { - _context3.next = 12; + _context3.next = 11; break; } _context3.t0 = props.props; - _context3.next = 15; + _context3.next = 14; break; - case 12: - _context3.next = 14; - return (0, _utils.loadGetInitialProps)(App, appCtx); + case 11: + _context3.next = 13; + return (0, _utils.loadGetInitialProps)(App, { + Component: ErrorComponent, + router: router, + ctx: { + err: err, + pathname: page, + query: query, + asPath: asPath + } + }); - case 14: + case 13: _context3.t0 = _context3.sent; - case 15: + case 14: initProps = _context3.t0; - _context3.next = 18; + _context3.next = 17; return doRender((0, _extends2["default"])({}, props, { err: err, Component: ErrorComponent, props: initProps })); - case 18: + case 17: case "end": return _context3.stop(); } @@ -778,17 +735,6 @@ function AppContainer(_ref4) { }, children))))); } -var wrapApp = function wrapApp(App) { - return function (props) { - var appProps = (0, _extends2["default"])({}, props, { - Component: Component, - err: err, - router: router - }); - return _react["default"].createElement(AppContainer, null, _react["default"].createElement(App, appProps)); - }; -}; - function doRender(_x4) { return _doRender.apply(this, arguments); } @@ -797,7 +743,7 @@ function _doRender() { _doRender = (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee4(_ref5) { - var App, Component, props, err, _router2, pathname, _query, _asPath, appCtx, appProps; + var App, Component, props, err, _router2, pathname, _query, _asPath, appProps; return _regenerator["default"].wrap(function _callee4$(_context4) { while (1) { @@ -807,37 +753,35 @@ function _doRender() { // this is for when ErrorComponent gets replaced by Component by HMR if (!(!props && Component && Component !== ErrorComponent && lastAppProps.Component === ErrorComponent)) { - _context4.next = 7; + _context4.next = 6; break; } _router2 = router, pathname = _router2.pathname, _query = _router2.query, _asPath = _router2.asPath; - appCtx = { + _context4.next = 5; + return (0, _utils.loadGetInitialProps)(App, { + Component: Component, router: router, - AppTree: wrapApp(App), - Component: ErrorComponent, ctx: { err: err, pathname: pathname, query: _query, asPath: _asPath } - }; - _context4.next = 6; - return (0, _utils.loadGetInitialProps)(App, appCtx); + }); - case 6: + case 5: props = _context4.sent; - case 7: + case 6: Component = Component || lastAppProps.Component; props = props || lastAppProps.props; - appProps = (0, _extends2["default"])({}, props, { + appProps = (0, _extends2["default"])({ Component: Component, err: err, - router: router // lastAppProps has to be set before ReactDom.render to account for ReactDom throwing an error. + router: router + }, props); // lastAppProps has to be set before ReactDom.render to account for ReactDom throwing an error. - }); lastAppProps = appProps; emitter.emit('before-reactdom-render', { Component: Component, @@ -852,7 +796,7 @@ function _doRender() { appProps: appProps }); - case 14: + case 13: case "end": return _context4.stop(); } @@ -894,15 +838,6 @@ module.exports = __webpack_require__("WEpk").Map; /***/ }), -/***/ "V+O7": -/***/ (function(module, exports, __webpack_require__) { - -// https://tc39.github.io/proposal-setmap-offrom/#sec-set.from -__webpack_require__("aPfg")('Set'); - - -/***/ }), - /***/ "XLbu": /***/ (function(module, exports, __webpack_require__) { @@ -970,17 +905,6 @@ exports.DataManager = DataManager; /***/ }), -/***/ "dL40": -/***/ (function(module, exports, __webpack_require__) { - -// https://github.com/DavidBruant/Map-Set.prototype.toJSON -var $export = __webpack_require__("Y7ZC"); - -$export($export.P + $export.R, 'Set', { toJSON: __webpack_require__("8iia")('Set') }); - - -/***/ }), - /***/ "dVTT": /***/ (function(module, exports, __webpack_require__) { @@ -1058,22 +982,6 @@ exports.DataManagerContext = React.createContext(null); /***/ }), -/***/ "ttDY": -/***/ (function(module, exports, __webpack_require__) { - -module.exports = __webpack_require__("+iuc"); - -/***/ }), - -/***/ "xvv9": -/***/ (function(module, exports, __webpack_require__) { - -// https://tc39.github.io/proposal-setmap-offrom/#sec-set.of -__webpack_require__("cHUd")('Set'); - - -/***/ }), - /***/ "zmvN": /***/ (function(module, exports, __webpack_require__) { @@ -1097,28 +1005,45 @@ var _asyncToGenerator2 = _interopRequireDefault(__webpack_require__("+oT+")); var _promise = _interopRequireDefault(__webpack_require__("eVuF")); -var _set = _interopRequireDefault(__webpack_require__("ttDY")); - var _mitt = _interopRequireDefault(__webpack_require__("kiME")); var _unfetch = _interopRequireDefault(__webpack_require__("m/Gl")); -/* global document */ -// smaller version of https://gist.github.com/igrigorik/a02f2359f3bc50ca7a9c - +/* global document, window */ -function supportsPreload(list) { - if (!list || !list.supports) { - return false; - } +function supportsPreload(el) { try { - return list.supports('preload'); - } catch (e) { + return el.relList.supports('preload'); + } catch (_unused) { return false; } } -var hasPreload = supportsPreload(document.createElement('link').relList); +var hasPreload = supportsPreload(document.createElement('link')); + +function createPreloadLink(url) { + var link = document.createElement('link'); + link.rel = 'preload'; + link.crossOrigin = undefined; + link.href = url; + link.as = 'script'; + document.head.appendChild(link); +} // Retrieve a list of dependencies for a given route from the build manifest + + +function getDependencies(route, _m) { + var isModern = false && false; + + if ((_m = window.__BUILD_MANIFEST) && (_m = _m[route])) { + return _m.map(function (url) { + return "/_next/" + url; + }).filter(function (url) { + return /\.module\.js$/.test(url) === isModern; + }); + } + + return []; +} var PageLoader = /*#__PURE__*/ @@ -1128,7 +1053,6 @@ function () { this.buildId = buildId; this.assetPrefix = assetPrefix; this.pageCache = {}; - this.prefetchCache = new _set["default"](); this.pageRegisterEvents = (0, _mitt["default"])(); this.loadingRoutes = {}; this.promisedBuildId = _promise["default"].resolve(); @@ -1184,11 +1108,16 @@ function () { if (document.getElementById("__NEXT_PAGE__" + route)) { return; - } // Load the script if not asked to load yet. - + } if (!_this3.loadingRoutes[route]) { - _this3.loadScript(route); + getDependencies(route).forEach(function (d) { + if (!document.querySelector("script[src^=\"" + d + "\"]")) { + _this3.loadScript(d, route); + } + }); + + _this3.loadRoute(route); _this3.loadingRoutes[route] = true; } @@ -1220,14 +1149,14 @@ function () { }); } }, { - key: "loadScript", - value: function loadScript(route) { + key: "loadRoute", + value: function loadRoute(route) { var _this = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee() { - var scriptRoute, script, url; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee$(_context) { while (1) { switch (_context.prev = _context.next) { @@ -1238,38 +1167,46 @@ function () { case 2: route = _this.normalizeRoute(route); scriptRoute = route === '/' ? '/index.js' : route + ".js"; - script = document.createElement('script'); - - if (false) {} - url = _this.assetPrefix + "/_next/static/" + encodeURIComponent(_this.buildId) + "/pages" + scriptRoute; - script.crossOrigin = undefined; - script.src = url; - - script.onerror = function () { - var error = new Error("Error loading script " + url); - error.code = 'PAGE_LOAD_ERROR'; - - _this.pageRegisterEvents.emit(route, { - error: error - }); - }; - document.body.appendChild(script); + _this.loadScript(url, route); - case 11: + case 6: case "end": return _context.stop(); } } }, _callee); }))(); + } + }, { + key: "loadScript", + value: function loadScript(url, route) { + var _this5 = this; + + var script = document.createElement('script'); + + if (false) {} + + script.crossOrigin = undefined; + script.src = url; + + script.onerror = function () { + var error = new Error("Error loading script " + url); + error.code = 'PAGE_LOAD_ERROR'; + + _this5.pageRegisterEvents.emit(route, { + error: error + }); + }; + + document.body.appendChild(script); } // This method if called by the route code. }, { key: "registerPage", value: function registerPage(route, regFn) { - var _this5 = this; + var _this6 = this; var register = function register() { try { @@ -1277,21 +1214,21 @@ function () { error = _regFn.error, page = _regFn.page; - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error, page: page }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error, page: page }); } catch (error) { - _this5.pageCache[route] = { + _this6.pageCache[route] = { error: error }; - _this5.pageRegisterEvents.emit(route, { + _this6.pageRegisterEvents.emit(route, { error: error }); } @@ -1303,73 +1240,84 @@ function () { } }, { key: "prefetch", - value: function prefetch(route) { + value: function prefetch(route, isDependency) { var _this2 = this; return (0, _asyncToGenerator2["default"])( /*#__PURE__*/ _regenerator["default"].mark(function _callee2() { - var scriptRoute, link; + var scriptRoute, url; return _regenerator["default"].wrap(function _callee2$(_context2) { while (1) { switch (_context2.prev = _context2.next) { case 0: + _context2.next = 2; + return _this2.promisedBuildId; + + case 2: route = _this2.normalizeRoute(route); scriptRoute = (route === '/' ? '/index' : route) + ".js"; if (false) {} - if (!(_this2.prefetchCache.has(scriptRoute) || document.getElementById("__NEXT_PAGE__" + route))) { - _context2.next = 5; + url = isDependency ? route : _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; // n.b. If preload is not supported, we fall back to `loadPage` which has + // its own deduping mechanism. + + if (!(document.querySelector("link[rel=\"preload\"][href^=\"" + url + "\"]") || document.getElementById("__NEXT_PAGE__" + route))) { + _context2.next = 8; break; } return _context2.abrupt("return"); - case 5: - _this2.prefetchCache.add(scriptRoute); // Inspired by quicklink, license: https://github.com/GoogleChromeLabs/quicklink/blob/master/LICENSE - // Don't prefetch if the user is on 2G / Don't prefetch if Save-Data is enabled - - + case 8: if (!('connection' in navigator)) { - _context2.next = 9; + _context2.next = 11; break; } if (!((navigator.connection.effectiveType || '').indexOf('2g') !== -1 || navigator.connection.saveData)) { - _context2.next = 9; + _context2.next = 11; break; } return _context2.abrupt("return"); - case 9: + case 11: + if (!isDependency) { + getDependencies(route).forEach(function (url) { + _this2.prefetch(url, true); + }); + } // Feature detection is used to see if preload is supported + // If not fall back to loading script tags before the page is loaded + // https://caniuse.com/#feat=link-rel-preload + + if (!hasPreload) { - _context2.next = 19; + _context2.next = 15; break; } - _context2.next = 12; - return _this2.promisedBuildId; + createPreloadLink(url); + return _context2.abrupt("return"); + + case 15: + if (!isDependency) { + _context2.next = 17; + break; + } - case 12: - link = document.createElement('link'); - link.rel = 'preload'; - link.crossOrigin = undefined; - link.href = _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; - link.as = 'script'; - document.head.appendChild(link); return _context2.abrupt("return"); - case 19: + case 17: if (!(document.readyState === 'complete')) { - _context2.next = 23; + _context2.next = 21; break; } return _context2.abrupt("return", _this2.loadPage(route)["catch"](function () {})); - case 23: + case 21: return _context2.abrupt("return", new _promise["default"](function (resolve) { window.addEventListener('load', function () { _this2.loadPage(route).then(function () { @@ -1380,7 +1328,7 @@ function () { }); })); - case 24: + case 22: case "end": return _context2.stop(); } ```