Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Examples] using-preact: add Prefresh, DevTools & chunking fix #13976

Merged
merged 4 commits into from
Jun 9, 2020

Conversation

developit
Copy link
Contributor

@developit developit commented Jun 9, 2020

This adds prefresh and preact/debug + DevTools during development. It also fixes the chunking/splitting configuration for production builds by creating a preact chunk based on the existing framework chunk.

I'm still considering publishing the config here as a plugin, since I worry about the copy-paste effect on this much regex-foo.

/cc @JoviDeCroock

@ijjk ijjk added the examples Issue/PR related to examples label Jun 9, 2020
"react": "github:preact-compat/react#1.0.0",
"react-dom": "github:preact-compat/react-dom#1.0.0"
"react-dom": "github:preact-compat/react-dom#1.0.0",
"react-ssr-prepass": "npm:preact-ssr-prepass@^1.0.1"
Copy link
Member

@Timer Timer Jun 9, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This package no longer lives inside Next.js. We can probably remove it.

And it was only ever used for an experimental feature.

@ijjk
Copy link
Member

ijjk commented Jun 9, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General
vercel/next.js canary developit/next.js patch-7 Change
buildDuration 12.2s 11.8s -307ms
nodeModulesSize 64.9 MB 64.9 MB
Page Load Tests Overall increase ✓
vercel/next.js canary developit/next.js patch-7 Change
/ failed reqs 0 0
/ total time (seconds) 2.187 2.112 -0.07
/ avg req/sec 1142.98 1183.7 ⚠️ +40.72
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.452 1.37 -0.08
/error-in-render avg req/sec 1721.35 1825.09 ⚠️ +103.74
Client Bundles (main, webpack, commons)
vercel/next.js canary developit/next.js patch-7 Change
main-HASH.js gzip 6.49 kB 6.49 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..ec24.js gzip 10.5 kB 10.5 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 56.9 kB 56.9 kB
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary developit/next.js patch-7 Change
main-HASH.module.js gzip 5.58 kB 5.58 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.92 kB 6.92 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 52.4 kB 52.4 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary developit/next.js patch-7 Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB
Overall change 26.3 kB 26.3 kB
Client Pages
vercel/next.js canary developit/next.js patch-7 Change
_app.js gzip 1.26 kB 1.26 kB
_error.js gzip 3.25 kB 3.25 kB
hooks.js gzip 881 B 881 B
index.js gzip 222 B 222 B
link.js gzip 2.05 kB 2.05 kB
routerDirect.js gzip 279 B 279 B
withRouter.js gzip 278 B 278 B
Overall change 8.22 kB 8.22 kB
Client Pages Modern
vercel/next.js canary developit/next.js patch-7 Change
_app.module.js gzip 604 B 604 B
_error.module.js gzip 2.04 kB 2.04 kB
hooks.module.js gzip 383 B 383 B
index.module.js gzip 223 B 223 B
link.module.js gzip 1.52 kB 1.52 kB
routerDirect..dule.js gzip 281 B 281 B
withRouter.m..dule.js gzip 278 B 278 B
Overall change 5.33 kB 5.33 kB
Client Build Manifests
vercel/next.js canary developit/next.js patch-7 Change
_buildManifest.js gzip 171 B 171 B
_buildManife..dule.js gzip 180 B 180 B
Overall change 351 B 351 B
Rendered Page Sizes
vercel/next.js canary developit/next.js patch-7 Change
index.html gzip 901 B 901 B
link.html gzip 906 B 906 B
withRouter.html gzip 894 B 894 B
Overall change 2.7 kB 2.7 kB

Serverless Mode
General
vercel/next.js canary developit/next.js patch-7 Change
buildDuration 13.1s 13.6s ⚠️ +432ms
nodeModulesSize 64.9 MB 64.9 MB
Client Bundles (main, webpack, commons)
vercel/next.js canary developit/next.js patch-7 Change
main-HASH.js gzip 6.49 kB 6.49 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..ec24.js gzip 10.5 kB 10.5 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 56.9 kB 56.9 kB
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary developit/next.js patch-7 Change
main-HASH.module.js gzip 5.58 kB 5.58 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.92 kB 6.92 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 52.4 kB 52.4 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary developit/next.js patch-7 Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB
Overall change 26.3 kB 26.3 kB
Client Pages
vercel/next.js canary developit/next.js patch-7 Change
_app.js gzip 1.26 kB 1.26 kB
_error.js gzip 3.25 kB 3.25 kB
hooks.js gzip 881 B 881 B
index.js gzip 222 B 222 B
link.js gzip 2.05 kB 2.05 kB
routerDirect.js gzip 279 B 279 B
withRouter.js gzip 278 B 278 B
Overall change 8.22 kB 8.22 kB
Client Pages Modern
vercel/next.js canary developit/next.js patch-7 Change
_app.module.js gzip 604 B 604 B
_error.module.js gzip 2.04 kB 2.04 kB
hooks.module.js gzip 383 B 383 B
index.module.js gzip 223 B 223 B
link.module.js gzip 1.52 kB 1.52 kB
routerDirect..dule.js gzip 281 B 281 B
withRouter.m..dule.js gzip 278 B 278 B
Overall change 5.33 kB 5.33 kB
Client Build Manifests
vercel/next.js canary developit/next.js patch-7 Change
_buildManifest.js gzip 171 B 171 B
_buildManife..dule.js gzip 180 B 180 B
Overall change 351 B 351 B
Serverless bundles
vercel/next.js canary developit/next.js patch-7 Change
_error.js 874 kB 874 kB
404.html 4.13 kB 4.13 kB
hooks.html 3.71 kB 3.71 kB
index.js 875 kB 875 kB
link.js 913 kB 913 kB
routerDirect.js 905 kB 905 kB
withRouter.js 905 kB 905 kB
Overall change 4.48 MB 4.48 MB

@ijjk
Copy link
Member

ijjk commented Jun 9, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General
vercel/next.js canary developit/next.js patch-7 Change
buildDuration 11.6s 11.6s ⚠️ +30ms
nodeModulesSize 64.9 MB 64.9 MB
Page Load Tests Overall increase ✓
vercel/next.js canary developit/next.js patch-7 Change
/ failed reqs 0 0
/ total time (seconds) 2.057 1.973 -0.08
/ avg req/sec 1215.49 1267.01 ⚠️ +51.52
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.332 1.316 -0.02
/error-in-render avg req/sec 1876.7 1900.07 ⚠️ +23.37
Client Bundles (main, webpack, commons)
vercel/next.js canary developit/next.js patch-7 Change
main-HASH.js gzip 6.49 kB 6.49 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..ec24.js gzip 10.5 kB 10.5 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 56.9 kB 56.9 kB
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary developit/next.js patch-7 Change
main-HASH.module.js gzip 5.58 kB 5.58 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.92 kB 6.92 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 52.4 kB 52.4 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary developit/next.js patch-7 Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB
Overall change 26.3 kB 26.3 kB
Client Pages
vercel/next.js canary developit/next.js patch-7 Change
_app.js gzip 1.26 kB 1.26 kB
_error.js gzip 3.25 kB 3.25 kB
hooks.js gzip 881 B 881 B
index.js gzip 222 B 222 B
link.js gzip 2.05 kB 2.05 kB
routerDirect.js gzip 279 B 279 B
withRouter.js gzip 278 B 278 B
Overall change 8.22 kB 8.22 kB
Client Pages Modern
vercel/next.js canary developit/next.js patch-7 Change
_app.module.js gzip 604 B 604 B
_error.module.js gzip 2.04 kB 2.04 kB
hooks.module.js gzip 383 B 383 B
index.module.js gzip 223 B 223 B
link.module.js gzip 1.52 kB 1.52 kB
routerDirect..dule.js gzip 281 B 281 B
withRouter.m..dule.js gzip 278 B 278 B
Overall change 5.33 kB 5.33 kB
Client Build Manifests
vercel/next.js canary developit/next.js patch-7 Change
_buildManifest.js gzip 171 B 171 B
_buildManife..dule.js gzip 180 B 180 B
Overall change 351 B 351 B
Rendered Page Sizes
vercel/next.js canary developit/next.js patch-7 Change
index.html gzip 901 B 901 B
link.html gzip 906 B 906 B
withRouter.html gzip 894 B 894 B
Overall change 2.7 kB 2.7 kB

Serverless Mode
General
vercel/next.js canary developit/next.js patch-7 Change
buildDuration 12.9s 12.9s -82ms
nodeModulesSize 64.9 MB 64.9 MB
Client Bundles (main, webpack, commons)
vercel/next.js canary developit/next.js patch-7 Change
main-HASH.js gzip 6.49 kB 6.49 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..ec24.js gzip 10.5 kB 10.5 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 56.9 kB 56.9 kB
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary developit/next.js patch-7 Change
main-HASH.module.js gzip 5.58 kB 5.58 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.92 kB 6.92 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 52.4 kB 52.4 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary developit/next.js patch-7 Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB
Overall change 26.3 kB 26.3 kB
Client Pages
vercel/next.js canary developit/next.js patch-7 Change
_app.js gzip 1.26 kB 1.26 kB
_error.js gzip 3.25 kB 3.25 kB
hooks.js gzip 881 B 881 B
index.js gzip 222 B 222 B
link.js gzip 2.05 kB 2.05 kB
routerDirect.js gzip 279 B 279 B
withRouter.js gzip 278 B 278 B
Overall change 8.22 kB 8.22 kB
Client Pages Modern
vercel/next.js canary developit/next.js patch-7 Change
_app.module.js gzip 604 B 604 B
_error.module.js gzip 2.04 kB 2.04 kB
hooks.module.js gzip 383 B 383 B
index.module.js gzip 223 B 223 B
link.module.js gzip 1.52 kB 1.52 kB
routerDirect..dule.js gzip 281 B 281 B
withRouter.m..dule.js gzip 278 B 278 B
Overall change 5.33 kB 5.33 kB
Client Build Manifests
vercel/next.js canary developit/next.js patch-7 Change
_buildManifest.js gzip 171 B 171 B
_buildManife..dule.js gzip 180 B 180 B
Overall change 351 B 351 B
Serverless bundles
vercel/next.js canary developit/next.js patch-7 Change
_error.js 874 kB 874 kB
404.html 4.13 kB 4.13 kB
hooks.html 3.71 kB 3.71 kB
index.js 875 kB 875 kB
link.js 913 kB 913 kB
routerDirect.js 905 kB 905 kB
withRouter.js 905 kB 905 kB
Overall change 4.48 MB 4.48 MB

@ijjk
Copy link
Member

ijjk commented Jun 9, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General
vercel/next.js canary developit/next.js patch-7 Change
buildDuration 13.9s 13.8s -176ms
nodeModulesSize 64.9 MB 64.9 MB
Page Load Tests Overall increase ✓
vercel/next.js canary developit/next.js patch-7 Change
/ failed reqs 0 0
/ total time (seconds) 2.404 2.3 -0.1
/ avg req/sec 1039.96 1087.09 ⚠️ +47.13
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.636 1.44 -0.2
/error-in-render avg req/sec 1528.46 1736.31 ⚠️ +207.85
Client Bundles (main, webpack, commons)
vercel/next.js canary developit/next.js patch-7 Change
main-HASH.js gzip 6.49 kB 6.49 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..ec24.js gzip 10.5 kB 10.5 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 56.9 kB 56.9 kB
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary developit/next.js patch-7 Change
main-HASH.module.js gzip 5.58 kB 5.58 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.92 kB 6.92 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 52.4 kB 52.4 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary developit/next.js patch-7 Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB
Overall change 26.3 kB 26.3 kB
Client Pages
vercel/next.js canary developit/next.js patch-7 Change
_app.js gzip 1.26 kB 1.26 kB
_error.js gzip 3.25 kB 3.25 kB
hooks.js gzip 881 B 881 B
index.js gzip 222 B 222 B
link.js gzip 2.05 kB 2.05 kB
routerDirect.js gzip 279 B 279 B
withRouter.js gzip 278 B 278 B
Overall change 8.22 kB 8.22 kB
Client Pages Modern
vercel/next.js canary developit/next.js patch-7 Change
_app.module.js gzip 604 B 604 B
_error.module.js gzip 2.04 kB 2.04 kB
hooks.module.js gzip 383 B 383 B
index.module.js gzip 223 B 223 B
link.module.js gzip 1.52 kB 1.52 kB
routerDirect..dule.js gzip 281 B 281 B
withRouter.m..dule.js gzip 278 B 278 B
Overall change 5.33 kB 5.33 kB
Client Build Manifests
vercel/next.js canary developit/next.js patch-7 Change
_buildManifest.js gzip 171 B 171 B
_buildManife..dule.js gzip 180 B 180 B
Overall change 351 B 351 B
Rendered Page Sizes
vercel/next.js canary developit/next.js patch-7 Change
index.html gzip 901 B 901 B
link.html gzip 906 B 906 B
withRouter.html gzip 894 B 894 B
Overall change 2.7 kB 2.7 kB

Serverless Mode
General
vercel/next.js canary developit/next.js patch-7 Change
buildDuration 15.2s 15s -171ms
nodeModulesSize 64.9 MB 64.9 MB
Client Bundles (main, webpack, commons)
vercel/next.js canary developit/next.js patch-7 Change
main-HASH.js gzip 6.49 kB 6.49 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..ec24.js gzip 10.5 kB 10.5 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 56.9 kB 56.9 kB
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary developit/next.js patch-7 Change
main-HASH.module.js gzip 5.58 kB 5.58 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.92 kB 6.92 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 52.4 kB 52.4 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary developit/next.js patch-7 Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB
Overall change 26.3 kB 26.3 kB
Client Pages
vercel/next.js canary developit/next.js patch-7 Change
_app.js gzip 1.26 kB 1.26 kB
_error.js gzip 3.25 kB 3.25 kB
hooks.js gzip 881 B 881 B
index.js gzip 222 B 222 B
link.js gzip 2.05 kB 2.05 kB
routerDirect.js gzip 279 B 279 B
withRouter.js gzip 278 B 278 B
Overall change 8.22 kB 8.22 kB
Client Pages Modern
vercel/next.js canary developit/next.js patch-7 Change
_app.module.js gzip 604 B 604 B
_error.module.js gzip 2.04 kB 2.04 kB
hooks.module.js gzip 383 B 383 B
index.module.js gzip 223 B 223 B
link.module.js gzip 1.52 kB 1.52 kB
routerDirect..dule.js gzip 281 B 281 B
withRouter.m..dule.js gzip 278 B 278 B
Overall change 5.33 kB 5.33 kB
Client Build Manifests
vercel/next.js canary developit/next.js patch-7 Change
_buildManifest.js gzip 171 B 171 B
_buildManife..dule.js gzip 180 B 180 B
Overall change 351 B 351 B
Serverless bundles
vercel/next.js canary developit/next.js patch-7 Change
_error.js 874 kB 874 kB
404.html 4.13 kB 4.13 kB
hooks.html 3.71 kB 3.71 kB
index.js 875 kB 875 kB
link.js 913 kB 913 kB
routerDirect.js 905 kB 905 kB
withRouter.js 905 kB 905 kB
Overall change 4.48 MB 4.48 MB

@kodiakhq kodiakhq bot merged commit f2e29f6 into vercel:canary Jun 9, 2020
@monsonjeremy
Copy link
Contributor

monsonjeremy commented Jun 10, 2020

@developit It seems to be related to this PR, but I've added this next.config.js file to my project that uses Preact and since adding it I get the following in my head in dev mode:

<style data-next-hide-fouc="">body{display:none}</style>

If I comment out either of these parts (individually or together) I no longer get this injected into the head of my document.

    const splitChunks = config.optimization && config.optimization.splitChunks;
    if (splitChunks) {
      const cacheGroups = splitChunks.cacheGroups;
      const test = /[\\/]node_modules[\\/](preact|preact-render-to-string|preact-context-provider)[\\/]/;
      if (cacheGroups.framework) {
        cacheGroups.preact = Object.assign({}, cacheGroups.framework, { test });
        cacheGroups.commons.name = 'framework';
      } else {
        cacheGroups.preact = { name: 'commons', chunks: 'all', test };
      }
    }
    // Automatically inject Preact DevTools:
    if (dev && !isServer) {
      const entry = config.entry;
      config.entry = () =>
        entry().then((entries) => {
          entries['main.js'] = ['preact/debug'].concat(entries['main.js'] || []);
          return entries;
        });
    }

I can't reproduce this on the actual example, but I suspect that's a function of the fact that the example is so small. Do you have an idea why this could trigger the data-next-hide-fouc tag?

Edit: I think the fix is to not do any chunk splitting in dev mode. This seems to mess with dev mode if some other vendors are included.

Changing the chunk splitting part to this worked for me:

    // Move Preact into the framework chunk instead of duplicating in routes:
    if (!dev) {
      const splitChunks = config.optimization && config.optimization.splitChunks;
      if (splitChunks) {
        const cacheGroups = splitChunks.cacheGroups;
        const test = /[\\/]node_modules[\\/](preact|preact-render-to-string|preact-context-provider)[\\/]/;
        cacheGroups.framework = true;
        cacheGroups.commons = {};
        if (cacheGroups.framework) {
          cacheGroups.preact = Object.assign({}, cacheGroups.framework, { test });
          cacheGroups.commons.name = 'framework';
        } else {
          cacheGroups.preact = { name: 'commons', chunks: 'all', test };
        }
      }
    }

4cm4k1 added a commit to 4cm4k1/personal-website that referenced this pull request Jun 11, 2020
developit added a commit to developit/next.js that referenced this pull request Jun 11, 2020
kodiakhq bot pushed a commit that referenced this pull request Jun 12, 2020
darshkpatel pushed a commit to MLH-Fellowship/next.js that referenced this pull request Jun 12, 2020
rokinsky pushed a commit to rokinsky/next.js that referenced this pull request Jul 11, 2020
…l#13976)

This adds [prefresh](https://github.com/JoviDeCroock/prefresh) and [preact/debug + DevTools](https://preactjs.com/guide/v10/debugging/) during development. It also fixes the chunking/splitting configuration for production builds by creating a `preact` chunk based on the existing framework chunk.

I'm still considering publishing the config here as a plugin, since I worry about the copy-paste effect on this much regex-foo.

/cc @JoviDeCroock
rokinsky pushed a commit to rokinsky/next.js that referenced this pull request Jul 11, 2020
@vercel vercel locked as resolved and limited conversation to collaborators Jan 30, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
examples Issue/PR related to examples
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants