diff --git a/.changeset/wild-lizards-raise.md b/.changeset/wild-lizards-raise.md new file mode 100644 index 000000000..25086ee96 --- /dev/null +++ b/.changeset/wild-lizards-raise.md @@ -0,0 +1,18 @@ +--- +'preact-cli': major +--- + +Removes support for automatic async routes via `@preact/async-loader`. + +Instead of magic directories, users can use `preact-iso`'s `lazy()` to split routes & components as they wish from anywhere. + +This should be a lot more powerful and transparent compared to the previous setup. + +```js +// before +import Home from './routes/home'; + +// after +import { lazy } from 'preact-iso'; +const Home = lazy(() => import('./routes/home.js')); +``` diff --git a/README.md b/README.md index 510e08376..842634088 100644 --- a/README.md +++ b/README.md @@ -30,8 +30,7 @@ ### Features - **100/100 Lighthouse score**, right out of the box ([proof]) -- Fully **automatic code splitting** for routes _(see [Route-Based Code Splitting](#route-based-code-splitting))_ -- Transparently code-split any component with an [`async!`] prefix +- Transparently code-split any component with a [`lazy()`] import - Auto-generated [Service Workers] for offline caching powered by [Workbox] - [PRPL] pattern support for efficient loading - Zero-configuration pre-rendering / server-side rendering hydration @@ -358,45 +357,6 @@ export default (config, env, helpers, options) => { }; ``` -### Route-Based Code Splitting - -"Route" components are automatically code-splitted at build time to create smaller bundles and avoid loading more code than is needed by each page. This works by intercepting imports for route components with an [async loader](https://github.com/preactjs/preact-cli/tree/master/packages/async-loader), which returns a lightweight wrapper component that handles code splitting seamlessly. - -Automatic code splitting is applied to all JavaScript and TypeScript files in the following locations: - -
Pattern | Examples |
---|---|
-src/routes/NAME- |
-src/routes/home.js - src/routes/about/index.tsx
- |
-src/components/routes/NAME- |
-src/components/routes/profile.ts - src/components/routes/profile/index.js
- |
-src/components/async/NAME- |
-src/components/async/profile.ts - src/components/async/profile/index.js
- |