diff --git a/jsconfig.json b/jsconfig.json index 2e7c7fcdf..16f7d8882 100644 --- a/jsconfig.json +++ b/jsconfig.json @@ -1,6 +1,7 @@ { "compilerOptions": { "target": "ESNext", + "module": "ESNext", "moduleResolution": "Node", "allowJs": true, "checkJs": true, diff --git a/packages/cli/lib/lib/webpack/webpack-base-config.js b/packages/cli/lib/lib/webpack/webpack-base-config.js index 556a02cb6..adca0179e 100644 --- a/packages/cli/lib/lib/webpack/webpack-base-config.js +++ b/packages/cli/lib/lib/webpack/webpack-base-config.js @@ -292,9 +292,12 @@ module.exports = function createBaseConfig(env) { new MiniCssExtractPlugin({ filename: isProd && !env.isServer ? '[name].[contenthash:5].css' : '[name].css', - chunkFilename: isProd - ? '[name].chunk.[contenthash:5].css' - : '[name].chunk.css', + chunkFilename: pathData => { + const chunkName = pathData.chunk.id.split('_').slice(0, -1).join('-'); + return isProd + ? `${chunkName}.chunk.[chunkhash:5].css` + : `${chunkName}.chunk.css`; + }, }), ProgressBarPlugin({ format: diff --git a/packages/cli/lib/lib/webpack/webpack-client-config.js b/packages/cli/lib/lib/webpack/webpack-client-config.js index 136c1f230..fd7c540af 100644 --- a/packages/cli/lib/lib/webpack/webpack-client-config.js +++ b/packages/cli/lib/lib/webpack/webpack-client-config.js @@ -88,7 +88,12 @@ async function clientConfig(env) { } return env.isProd ? '[name].[chunkhash:5].js' : '[name].js'; }, - chunkFilename: '[name].chunk.[chunkhash:5].js', + chunkFilename: pathData => { + const chunkName = pathData.chunk.id.split('_').slice(0, -1).join('-'); + return env.isProd + ? `${chunkName}.chunk.[chunkhash:5].js` + : `${chunkName}.chunk.js`; + }, }, resolveLoader: { @@ -173,6 +178,7 @@ function isProd(env) { cache: true, optimization: { + chunkIds: 'named', minimizer: [ new TerserPlugin({ extractComments: false, diff --git a/packages/cli/package.json b/packages/cli/package.json index c92b6941f..84adfdbf1 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -42,6 +42,7 @@ "p-retry": "^4.5.0", "polka": "^0.5.2", "preact": "^10.6.5", + "preact-iso": "^2.3.0", "preact-render-to-string": "^5.1.19", "preact-router": "^3.0.1", "puppeteer": "^9.1.1", diff --git a/packages/cli/tests/build.test.js b/packages/cli/tests/build.test.js index 08cb5e21f..54e842fb1 100644 --- a/packages/cli/tests/build.test.js +++ b/packages/cli/tests/build.test.js @@ -1,9 +1,9 @@ -const { join } = require('path'); +const { join, relative } = require('path'); const { access, mkdir, readdir, readFile, rename, unlink, writeFile } = require('fs').promises; const looksLike = require('html-looks-like'); const { create, build, buildFast } = require('./lib/cli'); -const { snapshot } = require('./lib/utils'); +const { expand, snapshot } = require('./lib/utils'); const { subject } = require('./lib/output'); const images = require('./images/build'); const minimatch = require('minimatch'); @@ -84,6 +84,26 @@ describe('preact build', () => { await expect(buildFast(dir)).resolves.not.toThrow(); }); + it.only('lazy loads routes with preact-iso `lazy`', async () => { + let dir = await subject('lazy-load-iso'); + await buildFast(dir, { prerender: false }); + + let output = await expand(join(dir, 'build')).then(arr => { + return arr.map(x => relative(dir, x)); + }); + + let expected = [ + /build\/a\.chunk\.\w{5}\.js$/, + /build\/a\.chunk\.\w{5}\.css$/, + /build\/b\.chunk\.\w{5}\.js$/, + /build\/b\.chunk\.\w{5}\.css$/, + ]; + + expected.forEach(pattern => { + expect(output.find(file => pattern.test(file))).not.toBeUndefined(); + }); + }); + it('should patch global location object', async () => { let dir = await subject('location-patch'); diff --git a/packages/cli/tests/subjects/lazy-load-iso/a.css b/packages/cli/tests/subjects/lazy-load-iso/a.css new file mode 100644 index 000000000..818d40628 --- /dev/null +++ b/packages/cli/tests/subjects/lazy-load-iso/a.css @@ -0,0 +1,3 @@ +h1 { + color: red; +} diff --git a/packages/cli/tests/subjects/lazy-load-iso/a.js b/packages/cli/tests/subjects/lazy-load-iso/a.js new file mode 100644 index 000000000..639fd9ce7 --- /dev/null +++ b/packages/cli/tests/subjects/lazy-load-iso/a.js @@ -0,0 +1,3 @@ +import './a.css'; + +export default () =>

Lazy Load A

; diff --git a/packages/cli/tests/subjects/lazy-load-iso/b.css b/packages/cli/tests/subjects/lazy-load-iso/b.css new file mode 100644 index 000000000..9fab7db2d --- /dev/null +++ b/packages/cli/tests/subjects/lazy-load-iso/b.css @@ -0,0 +1,3 @@ +h1 { + color: blue; +} diff --git a/packages/cli/tests/subjects/lazy-load-iso/b.js b/packages/cli/tests/subjects/lazy-load-iso/b.js new file mode 100644 index 000000000..fe870596b --- /dev/null +++ b/packages/cli/tests/subjects/lazy-load-iso/b.js @@ -0,0 +1,3 @@ +import './b.css'; + +export default () =>

Lazy Load B

; diff --git a/packages/cli/tests/subjects/lazy-load-iso/index.js b/packages/cli/tests/subjects/lazy-load-iso/index.js new file mode 100644 index 000000000..b0ac957ff --- /dev/null +++ b/packages/cli/tests/subjects/lazy-load-iso/index.js @@ -0,0 +1,16 @@ +import { ErrorBoundary, lazy, Router } from 'preact-iso'; + +// Asynchronous, code-splitted: +const A = lazy(() => import('./a.js')); +const B = lazy(() => import('./b.js')); + +export default function App() { + return ( + + + + + + + ); +} diff --git a/packages/cli/tests/subjects/lazy-load-iso/package.json b/packages/cli/tests/subjects/lazy-load-iso/package.json new file mode 100644 index 000000000..8775bcf99 --- /dev/null +++ b/packages/cli/tests/subjects/lazy-load-iso/package.json @@ -0,0 +1,4 @@ +{ + "private": true, + "name": "preact-lazy-load-iso" +} diff --git a/packages/cli/tests/subjects/lazy-load-iso/preact.config.js b/packages/cli/tests/subjects/lazy-load-iso/preact.config.js new file mode 100644 index 000000000..dc1f29b66 --- /dev/null +++ b/packages/cli/tests/subjects/lazy-load-iso/preact.config.js @@ -0,0 +1,6 @@ +module.exports = function (config, env, helpers) { + // TODO: clean up later, just removes the async loader + if (env.isProd && !env.isServer) { + config.module.rules.pop(); + } +}; diff --git a/yarn.lock b/yarn.lock index c0cd19d30..cbe3d0e2e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11386,6 +11386,11 @@ postcss@^8.4.13: picocolors "^1.0.0" source-map-js "^1.0.2" +preact-iso@^2.3.0: + version "2.3.0" + resolved "https://registry.yarnpkg.com/preact-iso/-/preact-iso-2.3.0.tgz#ab6c5de28df9e0f7a0589dd2175a83ba821f69ec" + integrity sha512-taJmRidbWrjHEhoVoxXS2Kvxa6X3jXSsTtD7rSYeJuxnPNr1ghCu1JUzCrRxmZwTUNWIqwUpNi+AJoLtvCPN7g== + preact-render-to-string@^5.1.19: version "5.1.19" resolved "https://registry.yarnpkg.com/preact-render-to-string/-/preact-render-to-string-5.1.19.tgz#ffae7c3bd1680be5ecf5991d41fe3023b3051e0e"