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

experimental: Using preact-iso to lazy load components #1731

Draft
wants to merge 25 commits into
base: master
Choose a base branch
from

Conversation

rschristian
Copy link
Member

@rschristian rschristian commented Aug 13, 2022

What kind of change does this PR introduce?

Experimental refactor

Did you add tests for your changes?

Yes

Summary

Deprecates async-loader and automatic route splitting for instead relying on lazy loading, like with preact-iso's lazy().

Code splitting as it previously worked was quite opaque, relying on magic directory names rather than user code.

This should make bundle splitting much more transparent by moving the control into user code.

// before
import Home from './routes/home';

// after
const Home = lazy(() => import('./routes/home.js'));

Does this PR introduce a breaking change?

Yes

@changeset-bot
Copy link

changeset-bot bot commented Aug 13, 2022

🦋 Changeset detected

Latest commit: 076d599

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
preact-cli Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@@ -25,6 +25,7 @@ module.exports = function (env) {
],
].filter(Boolean),
plugins: [
require.resolve('@rschristian/babel-plugin-webpack-chunk-name-comments'),
Copy link
Member Author

Choose a reason for hiding this comment

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

Webpack is not able to provide names for chunks created with import(). This has two major implications:

  1. We'll need to create names else we'll see things like 611.chunk.js in the output
  2. Named chunk groups will not work at all. We currently use them to build the push manifest.

So, I elected to solve this with a Babel plugin. It simply inserts a magic comment to specify the chunk name based upon the import path (import('./routes/foo.js') -> import(/* webpackChunkName: "routes-foo" */ "./routes-foo.js")). Source

The advantage of this approach is that users will not have to manually annotate their imports, we will not have to switch chunks to have named IDs1, we get file names that closely resemble previous output, and we keep named chunk groups.

Hopefully it's not an issue adding my own module. It's quite simple and I'm happy to maintain it if there are any issues.


  1. We could set Webpack to create chunks with names for IDs and extrapolate file names from there, but that hurts perf and still won't give names to the chunk groups.

@rschristian rschristian force-pushed the experimental/iso-lazy branch 3 times, most recently from ed27f75 to bd44545 Compare August 18, 2022 08:05
@rschristian rschristian force-pushed the experimental/iso-lazy branch 2 times, most recently from 67d6b83 to c488c3e Compare August 25, 2022 06:32
@rschristian rschristian force-pushed the experimental/iso-lazy branch 2 times, most recently from 7a8184f to 6653885 Compare December 14, 2022 00:33
'es-polyfills.legacy.js': 42690,
'dom-polyfills.8a933.legacy.js': 5252,
'dom-polyfills.8a933.legacy.js.map': 18836,
'es-polyfills.legacy.js': 61323,
Copy link
Member Author

Choose a reason for hiding this comment

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

Note to self: 20kb jump seems quite heavy. Thinking something isn't right.

@rschristian rschristian force-pushed the experimental/iso-lazy branch 4 times, most recently from a70297e to da85167 Compare December 15, 2022 00:28
rschristian and others added 18 commits February 2, 2023 06:04
* feat: webpack-v5

* test: Update tests

* docs: Updating docs to reflect changes

* chore: Removing optimize-plugin local patch
* refactor: Determine CSS module by filename, not directory

* docs: Adding changeset

* refactor: Project creation pull from templates 'main' branch

* test: Updating tests

* revert: Accidentally removed log message
* refactor: Extracting out project creation to own package

* docs: Adding changeset

* refactor: Misc edits to common deps & workspace helper scripts

* test: Fixing 'create' test suite

* ci: Increase minimum Node version

* chore: Fix typos

* docs: Update ReadMe instructions

* chore: Better (and untaken) package name

* docs: Update changeset

* test: Update 'create' test suite & build output hashes

* docs: Expounding upon changeset
* refactor: Drops support for Preact v8

* docs: Adding changeset
* refactor: Switch over to automatic runtime transform for JSX

* test: Removing `h` imports from test suite

* docs: Adding changeset
* docs: Adding readme for create-cli

* feat: Initial publish

* fix: Correcting broken readme links
* refactor: Disable hashing ssr-build's css

* docs: Adding changeset

* test: Fix unrelated change from altered template
* refactor: Removes `--preload` flag & functionality

* docs: Adding changeset

* docs: Updating readme for removal of preload
* refactor: Separate internal concepts of config and env

* docs: Adding changeset
* refactor: Revise inconsistent, unused, and deprecated flags

* docs: Adding changeset
* refactor: Better root error handling

* refactor: Switch prerender plugin to be async for error gen

* refactor: Simplify & improve compilation messages
…isc housekeeping (#1753)

* refactor: Drop rimraf for built-in fs.rm

* refactor: Drop src argument in build & watch cmds

* refactor: Extract info cmd from CLI entrypoint

* refactor: Remove update-notifier

* refactor: Switch from fs.promises to fs/promises

* docs: Adding changeset
* refactor: Merging EJS templates and switcing preferred template extension to .ejs

* test: Fixing test suite to reflect latest changes

* chore: Cleaning

* docs: Updating ReadMe

* docs: Adding changeset

* refactor: Add error message for <% preact.(head|body)End %>
* refactor: Enables HMR via Prefresh by default

* docs: Adding changeset

* test: Updating tests to reflect changes to templates
* refactor: Remove Critters (perhaps temporarily)

* docs: Adding changeset
Base automatically changed from next to master October 10, 2023 20:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants