Skip to content

Commit

Permalink
refactor: Remove optimize-plugin (#1816)
Browse files Browse the repository at this point in the history 
* refactor: Remove `optimize-plugin`

* test: Update test suite

* docs: Add changeset
  • Loading branch information
@rschristian
rschristian committed Jan 19, 2024
1 parent d91d77e commit 372d8fa
Show file tree
Hide file tree
Showing 12 changed files with 58 additions and 455 deletions.
6 changes: 6 additions & 0 deletions .changeset/lazy-zoos-clean.md
View file
@@ -0,0 +1,6 @@
---
'preact-cli': patch
'create-preact-cli': patch
---

Removed `optimize-plugin`, now a single bundle will be output.
1 change: 0 additions & 1 deletion packages/cli/package.json
View file
Expand Up @@ -64,7 +64,6 @@
"kleur": "^4.1.4",
"mini-css-extract-plugin": "^2.5.3",
"minimatch": "^3.0.3",
"optimize-plugin": "^1.3.1",
"postcss": "^8.4.13",
"postcss-load-config": "^3.1.4",
"postcss-loader": "^6.2.1",
Expand Down
15 changes: 0 additions & 15 deletions packages/cli/src/lib/webpack/render-html-plugin.js
View file
Expand Up @@ -85,21 +85,6 @@ module.exports = async function renderHTMLPlugin(config, env) {
entrypoints[name] =
publicPath + entryFiles.find(file => /\.m?js(?:\?|$)/.test(file));
});

const optimizePlugin = compilation.options.plugins.find(
plugin => plugin.constructor.name == 'OptimizePlugin'
);
if (optimizePlugin) {
// Retrieves the (generated) legacy bundle
const legacyBundle = entrypoints['bundle']
.replace(publicPath, '')
.replace(/\.js$/, '.legacy.js');
entrypoints['legacy-bundle'] = publicPath + legacyBundle;

// Retrieves the (generated) es-polyfills
entrypoints['es-polyfills'] =
publicPath + optimizePlugin.options.polyfillsFilename;
}
};

const htmlWebpackConfig = values => {
Expand Down
12 changes: 2 additions & 10 deletions packages/cli/src/lib/webpack/webpack-client-config.js
View file
Expand Up @@ -14,7 +14,6 @@ const baseConfig = require('./webpack-base-config');
const { InjectManifest } = require('workbox-webpack-plugin');
const RefreshPlugin = require('@prefresh/webpack');
const { normalizePath, warn } = require('../../util');
const OptimizePlugin = require('optimize-plugin');

const cleanFilename = name =>
name.replace(
Expand Down Expand Up @@ -46,7 +45,7 @@ async function clientConfig(config, env) {
swSrc: swPath,
include: [
/200\.html$/,
/(?<!legacy|polyfills)\.js$/,
/(?<!polyfills)\.js$/,
/\.css$/,
/\.(png|jpg|svg|gif|webp|avif)$/,
],
Expand Down Expand Up @@ -149,16 +148,9 @@ function prodBuild(config) {
),

plugins: [
new OptimizePlugin({
polyfillsFilename: 'es-polyfills.js',
exclude: [/^sw.*\.js/, /^dom-polyfills.*\.js/],
modernize: false,
minify: false,
verbose: false,
}),
new SizePlugin({
stripHash: name =>
name.replace(/\.[a-z0-9]{5}((\.legacy)?\.(?:js|css)$)/i, '.*****$1'),
name.replace(/\.[a-z0-9]{5}(\.(?:js|css)$)/i, '.*****$1'),
}),
],
cache: true,
Expand Down
2 changes: 0 additions & 2 deletions packages/cli/src/resources/template.ejs
View file
Expand Up @@ -21,7 +21,5 @@
<% } %>
<script type="module" src="<%= cli.entrypoints['bundle'] %>"></script>
<script nomodule src="<%= cli.entrypoints['dom-polyfills'] %>"></script>
<script nomodule src="<%= cli.entrypoints['es-polyfills'] %>"></script>
<script nomodule defer src="<%= cli.entrypoints['legacy-bundle'] %>"></script>
</body>
</html>
56 changes: 27 additions & 29 deletions packages/cli/tests/build.test.js
View file
Expand Up @@ -8,7 +8,7 @@ const {
writeFile,
} = require('fs/promises');
const looksLike = require('html-looks-like');
const { create, build, buildFast } = require('./lib/cli');
const { create, build } = require('./lib/cli');
const { snapshot } = require('./lib/utils');
const { subject } = require('./lib/output');
const images = require('./images/build');
Expand Down Expand Up @@ -80,25 +80,25 @@ describe('preact build', () => {
it('builds the `typescript` template', async () => {
let dir = await create('typescript');

await expect(buildFast(dir)).resolves.not.toThrow();
await expect(build(dir)).resolves.not.toThrow();
});

it('should patch global location object', async () => {
let dir = await subject('location-patch');

await expect(buildFast(dir)).resolves.not.toThrow();
await expect(build(dir)).resolves.not.toThrow();
});

it('should copy resources from static to build directory', async () => {
let dir = await subject('static-root');
await buildFast(dir);
await build(dir);
let file = join(dir, 'build', '.htaccess');
expect(await access(file)).toBeUndefined();
});

it('should use a custom `.env` with prefixed environment variables', async () => {
let dir = await subject('custom-dotenv');
await buildFast(dir);
await build(dir);

const bundleFile = (await readdir(`${dir}/build`)).find(file =>
/bundle\.\w{5}\.js$/.test(file)
Expand Down Expand Up @@ -131,15 +131,13 @@ describe('preact build', () => {
await rename(join(dir, 'index.js'), join(dir, 'renamed-src/index.js'));
await rename(join(dir, 'style.css'), join(dir, 'renamed-src/style.css'));

await expect(
buildFast(dir, { src: 'renamed-src' })
).resolves.not.toThrow();
await expect(build(dir, { src: 'renamed-src' })).resolves.not.toThrow();
});

it('--dest', async () => {
let dir = await subject('minimal');

await buildFast(dir, { dest: 'renamed-dest' });
await build(dir, { dest: 'renamed-dest' });
expect(await access(join(dir, 'renamed-dest'))).toBeUndefined();
});

Expand All @@ -148,13 +146,13 @@ describe('preact build', () => {

const logSpy = jest.spyOn(process.stdout, 'write');

await buildFast(dir, { sw: true });
await build(dir, { sw: true });
expect(await access(join(dir, 'build', 'sw.js'))).toBeUndefined();
expect(logSpy).toHaveBeenCalledWith(
expect.stringContaining('Could not find sw.js')
);

await buildFast(dir, { sw: false });
await build(dir, { sw: false });
await expect(access(join(dir, 'build', 'sw.js'))).rejects.toThrow(
'no such file or directory'
);
Expand All @@ -165,12 +163,12 @@ describe('preact build', () => {
// Prerendering is disabled to avoid (non-relevant) regenerator issues
let dir = await subject('custom-babelrc');

await buildFast(dir, { prerender: false });
await build(dir, { prerender: false });
let transpiledChunk = await getOutputFile(dir, /bundle\.\w{5}\.js$/);
expect(/=>\s?setTimeout/.test(transpiledChunk)).toBe(false);

await rename(join(dir, '.babelrc'), join(dir, 'babel.config.json'));
await buildFast(dir, {
await build(dir, {
babelConfig: 'babel.config.json',
prerender: false,
});
Expand All @@ -185,7 +183,7 @@ describe('preact build', () => {
join(dir, 'template.ejs'),
join(dir, 'renamed-template.ejs')
);
await buildFast(dir, { template: 'renamed-template.ejs' });
await build(dir, { template: 'renamed-template.ejs' });

const html = await getOutputFile(dir, 'index.html');
expect(html).toEqual(
Expand All @@ -196,19 +194,19 @@ describe('preact build', () => {
it('--prerender', async () => {
let dir = await subject('minimal');

await buildFast(dir, { prerender: true });
await build(dir, { prerender: true });
let html = await getOutputFile(dir, 'index.html');
expect(html).toMatch('<h1>Minimal App</h1>');

await buildFast(dir, { prerender: false });
await build(dir, { prerender: false });
html = await getOutputFile(dir, 'index.html');
expect(html).not.toMatch('<h1>Minimal App</h1>');
});

it('--prerenderUrls', async () => {
let dir = await subject('multiple-prerendering');

await buildFast(dir, { prerenderUrls: 'prerender-urls.json' });
await build(dir, { prerenderUrls: 'prerender-urls.json' });
expect(await access(join(dir, 'build/index.html'))).toBeUndefined();
expect(
await access(join(dir, 'build/route66/index.html'))
Expand All @@ -221,7 +219,7 @@ describe('preact build', () => {
join(dir, 'prerender-urls.json'),
join(dir, 'renamed-urls.json')
);
await buildFast(dir, { prerenderUrls: 'renamed-urls.json' });
await build(dir, { prerenderUrls: 'renamed-urls.json' });
expect(await access(join(dir, 'build/index.html'))).toBeUndefined();
expect(
await access(join(dir, 'build/route66/index.html'))
Expand All @@ -234,26 +232,26 @@ describe('preact build', () => {
it('--inlineCss', async () => {
let dir = await subject('minimal');

await buildFast(dir, { inlineCss: true });
await build(dir, { inlineCss: true });
let head = await getHead(dir);
expect(head).toMatch('<style>h1{color:red}</style>');

await buildFast(dir, { inlineCss: false });
await build(dir, { inlineCss: false });
head = await getOutputFile(dir, 'index.html');
expect(head).not.toMatch(/<style>[^<]*<\/style>/);
});

it('--config', async () => {
let dir = await subject('custom-webpack');

await buildFast(dir, { config: 'preact.config.js' });
await build(dir, { config: 'preact.config.js' });
expect(await access(join(dir, 'build/bundle.js'))).toBeUndefined();

await rename(
join(dir, 'preact.config.js'),
join(dir, 'renamed-config.js')
);
await buildFast(dir, { config: 'renamed-config.js' });
await build(dir, { config: 'renamed-config.js' });
expect(await access(join(dir, 'build/bundle.js'))).toBeUndefined();
});

Expand All @@ -278,7 +276,7 @@ describe('preact build', () => {
'h2{color:green}'
);

await buildFast(dir);
await build(dir);
const builtStylesheet = await getOutputFile(dir, /bundle\.\w{5}\.css$/);

expect(builtStylesheet).toMatch('h1{color:red}');
Expand All @@ -289,7 +287,7 @@ describe('preact build', () => {

it('should use plain CSS & CSS Modules together, determining loading method by filename', async () => {
let dir = await subject('css-modules');
await buildFast(dir);
await build(dir);
const builtStylesheet = await getOutputFile(dir, /bundle\.\w{5}\.css$/);

expect(builtStylesheet).toMatch('h1{color:red}');
Expand All @@ -298,7 +296,7 @@ describe('preact build', () => {

it('should inline critical CSS only', async () => {
let dir = await subject('css-inline');
await buildFast(dir);
await build(dir);
const builtStylesheet = await getOutputFile(dir, /bundle\.\w{5}\.css$/);
const html = await getOutputFile(dir, 'index.html');

Expand All @@ -309,15 +307,15 @@ describe('preact build', () => {
// Issue #1411
it('should preserve side-effectful CSS imports even if package.json claims no side effects', async () => {
let dir = await subject('css-side-effect');
await buildFast(dir);
await build(dir);

const builtStylesheet = await getOutputFile(dir, /bundle\.\w{5}\.css$/);
expect(builtStylesheet).toMatch('h1{background:#673ab8}');
});

it('should use SASS, SCSS, and CSS Modules for each', async () => {
let dir = await subject('css-sass');
await buildFast(dir);
await build(dir);
const builtStylesheet = await getOutputFile(dir, /bundle\.\w{5}\.css$/);

expect(builtStylesheet).toMatch('h1{background:blue;color:red}');
Expand All @@ -330,7 +328,7 @@ describe('preact build', () => {
prerenderUrlFiles.forEach(prerenderUrls => {
it(`should prerender the routes provided with '${prerenderUrls}'`, async () => {
let dir = await subject('multiple-prerendering');
await buildFast(dir, { prerenderUrls });
await build(dir, { prerenderUrls });

const body1 = await getBody(dir);
looksLike(body1, images.prerender.home);
Expand Down Expand Up @@ -367,7 +365,7 @@ describe('preact build', () => {
prerenderUrlFiles.forEach(prerenderUrls => {
it(`should prerender the routes with data provided with '${prerenderUrls}' via provider`, async () => {
let dir = await subject('multiple-prerendering-with-provider');
await buildFast(dir, { prerenderUrls });
await build(dir, { prerenderUrls });

const body1 = await getBody(dir);
looksLike(body1, images.prerender.home);
Expand Down
6 changes: 3 additions & 3 deletions packages/cli/tests/config-formats.test.js
View file
@@ -1,6 +1,6 @@
const { join } = require('path');
const { access } = require('fs/promises');
const { build, buildFast } = require('./lib/cli');
const { build } = require('./lib/cli');
const { subject } = require('./lib/output');

const formats = ['cjs', 'esm'];
Expand All @@ -19,7 +19,7 @@ describe('config files', () => {
it(`should load the 'prerender-urls.json' file`, async () => {
let dir = await subject('multiple-config-files');

await buildFast(dir);
await build(dir);

expect(await access(join(dir, 'build/index.html'))).toBeUndefined();
expect(
Expand All @@ -32,7 +32,7 @@ describe('config files', () => {
it(`should load the '${dataFormat}' file in ${moduleFormat}`, async () => {
let dir = await subject('multiple-config-files');

await buildFast(dir, {
await build(dir, {
prerenderUrls: `prerenderUrls/${moduleFormat}/${dataFormat}`,
});

Expand Down
31 changes: 11 additions & 20 deletions packages/cli/tests/images/build.js
View file
Expand Up @@ -14,33 +14,26 @@ exports.default = {
'ssr-build/ssr-bundle.css': 2346,
'ssr-build/ssr-bundle.css.map': 3603,

'bundle.d55d3.js': 22978,
'bundle.d55d3.js.map': 92378,
'bundle.d55d3.legacy.js': 23646,
'bundle.d55d3.legacy.js.map': 92673,
'bundle.05a31.js': 22978,
'bundle.05a31.js.map': 125226,
'bundle.6329a.css': 1173,
'bundle.6329a.css.map': 2165,

'dom-polyfills.99150.js': 5221,
'dom-polyfills.99150.js.map': 18676,
'es-polyfills.js': 46419,
'dom-polyfills.f5813.js': 5221,
'dom-polyfills.f5813.js.map': 18676,

'favicon.ico': 15086,
'index.html': 3998,
'manifest.json': 455,
'preact_prerender_data.json': 11,

'route-home.chunk.ede4d.js': 1179,
'route-home.chunk.ede4d.js.map': 3814,
'route-home.chunk.ede4d.legacy.js': 1222,
'route-home.chunk.ede4d.legacy.js.map': 3964,
'route-home.chunk.d116e.css': 838,
'route-home.chunk.d116e.css.map': 1406,

'route-profile.chunk.6856a.js': 3165,
'route-profile.chunk.6856a.js.map': 13170,
'route-profile.chunk.6856a.legacy.js': 3302,
'route-profile.chunk.6856a.legacy.js.map': 13200,
'route-home.chunk.585d0.js': 1231,
'route-home.chunk.585d0.js.map': 2057,
'route-home.chunk.d116e.css': 825,
'route-home.chunk.d116e.css.map': 1378,

'route-profile.chunk.66aa5.js': 3300,
'route-profile.chunk.66aa5.js.map': 21931,
};

exports.prerender = {};
Expand Down Expand Up @@ -176,8 +169,6 @@ exports.publicPath = `
<script type="__PREACT_CLI_DATA__">%7B%22prerenderData%22:%7B%22url%22:%22/%22%7D%7D</script>
<script type="module" src="/example-path/bundle.\\w{5}.js"></script>
<script nomodule="" src="/example-path/dom-polyfills.\\w{5}.js"></script>
<script nomodule="" src="/example-path/es-polyfills.js"></script>
<script nomodule="" defer="defer" src="/example-path/bundle.\\w{5}.legacy.js"></script>
</body>
</html>
`;

0 comments on commit 372d8fa

Please sign in to comment.