Skip to content

Commit 372d8fa

Browse files
rschristianrschristian
authored
refactor: Remove optimize-plugin (#1816)
* refactor: Remove `optimize-plugin` * test: Update test suite * docs: Add changeset
1 parent d91d77e commit 372d8fa

File tree

12 files changed

+58
-455
lines changed

12 files changed

+58
-455
lines changed

‎.changeset/lazy-zoos-clean.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'preact-cli': patch
3+
'create-preact-cli': patch
4+
---
5+
6+
Removed `optimize-plugin`, now a single bundle will be output.

‎packages/cli/package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,6 @@
6464
"kleur": "^4.1.4",
6565
"mini-css-extract-plugin": "^2.5.3",
6666
"minimatch": "^3.0.3",
67-
"optimize-plugin": "^1.3.1",
6867
"postcss": "^8.4.13",
6968
"postcss-load-config": "^3.1.4",
7069
"postcss-loader": "^6.2.1",

‎packages/cli/src/lib/webpack/render-html-plugin.js‎

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -85,21 +85,6 @@ module.exports = async function renderHTMLPlugin(config, env) {
8585
entrypoints[name] =
8686
publicPath + entryFiles.find(file => /\.m?js(?:\?|$)/.test(file));
8787
});
88-
89-
const optimizePlugin = compilation.options.plugins.find(
90-
plugin => plugin.constructor.name == 'OptimizePlugin'
91-
);
92-
if (optimizePlugin) {
93-
// Retrieves the (generated) legacy bundle
94-
const legacyBundle = entrypoints['bundle']
95-
.replace(publicPath, '')
96-
.replace(/\.js$/, '.legacy.js');
97-
entrypoints['legacy-bundle'] = publicPath + legacyBundle;
98-
99-
// Retrieves the (generated) es-polyfills
100-
entrypoints['es-polyfills'] =
101-
publicPath + optimizePlugin.options.polyfillsFilename;
102-
}
10388
};
10489

10590
const htmlWebpackConfig = values => {

‎packages/cli/src/lib/webpack/webpack-client-config.js‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ const baseConfig = require('./webpack-base-config');
1414
const { InjectManifest } = require('workbox-webpack-plugin');
1515
const RefreshPlugin = require('@prefresh/webpack');
1616
const { normalizePath, warn } = require('../../util');
17-
const OptimizePlugin = require('optimize-plugin');
1817

1918
const cleanFilename = name =>
2019
name.replace(
@@ -46,7 +45,7 @@ async function clientConfig(config, env) {
4645
swSrc: swPath,
4746
include: [
4847
/200\.html$/,
49-
/(?<!legacy|polyfills)\.js$/,
48+
/(?<!polyfills)\.js$/,
5049
/\.css$/,
5150
/\.(png|jpg|svg|gif|webp|avif)$/,
5251
],
@@ -149,16 +148,9 @@ function prodBuild(config) {
149148
),
150149

151150
plugins: [
152-
new OptimizePlugin({
153-
polyfillsFilename: 'es-polyfills.js',
154-
exclude: [/^sw.*\.js/, /^dom-polyfills.*\.js/],
155-
modernize: false,
156-
minify: false,
157-
verbose: false,
158-
}),
159151
new SizePlugin({
160152
stripHash: name =>
161-
name.replace(/\.[a-z0-9]{5}((\.legacy)?\.(?:js|css)$)/i, '.*****$1'),
153+
name.replace(/\.[a-z0-9]{5}(\.(?:js|css)$)/i, '.*****$1'),
162154
}),
163155
],
164156
cache: true,

‎packages/cli/src/resources/template.ejs‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,5 @@
2121
<% } %>
2222
<script type="module" src="<%= cli.entrypoints['bundle'] %>"></script>
2323
<script nomodule src="<%= cli.entrypoints['dom-polyfills'] %>"></script>
24-
<script nomodule src="<%= cli.entrypoints['es-polyfills'] %>"></script>
25-
<script nomodule defer src="<%= cli.entrypoints['legacy-bundle'] %>"></script>
2624
</body>
2725
</html>

‎packages/cli/tests/build.test.js‎

Lines changed: 27 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const {
88
writeFile,
99
} = require('fs/promises');
1010
const looksLike = require('html-looks-like');
11-
const { create, build, buildFast } = require('./lib/cli');
11+
const { create, build } = require('./lib/cli');
1212
const { snapshot } = require('./lib/utils');
1313
const { subject } = require('./lib/output');
1414
const images = require('./images/build');
@@ -80,25 +80,25 @@ describe('preact build', () => {
8080
it('builds the `typescript` template', async () => {
8181
let dir = await create('typescript');
8282

83-
await expect(buildFast(dir)).resolves.not.toThrow();
83+
await expect(build(dir)).resolves.not.toThrow();
8484
});
8585

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

89-
await expect(buildFast(dir)).resolves.not.toThrow();
89+
await expect(build(dir)).resolves.not.toThrow();
9090
});
9191

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

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

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

134-
await expect(
135-
buildFast(dir, { src: 'renamed-src' })
136-
).resolves.not.toThrow();
134+
await expect(build(dir, { src: 'renamed-src' })).resolves.not.toThrow();
137135
});
138136

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

142-
await buildFast(dir, { dest: 'renamed-dest' });
140+
await build(dir, { dest: 'renamed-dest' });
143141
expect(await access(join(dir, 'renamed-dest'))).toBeUndefined();
144142
});
145143

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

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

151-
await buildFast(dir, { sw: true });
149+
await build(dir, { sw: true });
152150
expect(await access(join(dir, 'build', 'sw.js'))).toBeUndefined();
153151
expect(logSpy).toHaveBeenCalledWith(
154152
expect.stringContaining('Could not find sw.js')
155153
);
156154

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

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

172170
await rename(join(dir, '.babelrc'), join(dir, 'babel.config.json'));
173-
await buildFast(dir, {
171+
await build(dir, {
174172
babelConfig: 'babel.config.json',
175173
prerender: false,
176174
});
@@ -185,7 +183,7 @@ describe('preact build', () => {
185183
join(dir, 'template.ejs'),
186184
join(dir, 'renamed-template.ejs')
187185
);
188-
await buildFast(dir, { template: 'renamed-template.ejs' });
186+
await build(dir, { template: 'renamed-template.ejs' });
189187

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

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

203-
await buildFast(dir, { prerender: false });
201+
await build(dir, { prerender: false });
204202
html = await getOutputFile(dir, 'index.html');
205203
expect(html).not.toMatch('<h1>Minimal App</h1>');
206204
});
207205

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

211-
await buildFast(dir, { prerenderUrls: 'prerender-urls.json' });
209+
await build(dir, { prerenderUrls: 'prerender-urls.json' });
212210
expect(await access(join(dir, 'build/index.html'))).toBeUndefined();
213211
expect(
214212
await access(join(dir, 'build/route66/index.html'))
@@ -221,7 +219,7 @@ describe('preact build', () => {
221219
join(dir, 'prerender-urls.json'),
222220
join(dir, 'renamed-urls.json')
223221
);
224-
await buildFast(dir, { prerenderUrls: 'renamed-urls.json' });
222+
await build(dir, { prerenderUrls: 'renamed-urls.json' });
225223
expect(await access(join(dir, 'build/index.html'))).toBeUndefined();
226224
expect(
227225
await access(join(dir, 'build/route66/index.html'))
@@ -234,26 +232,26 @@ describe('preact build', () => {
234232
it('--inlineCss', async () => {
235233
let dir = await subject('minimal');
236234

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

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

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

249-
await buildFast(dir, { config: 'preact.config.js' });
247+
await build(dir, { config: 'preact.config.js' });
250248
expect(await access(join(dir, 'build/bundle.js'))).toBeUndefined();
251249

252250
await rename(
253251
join(dir, 'preact.config.js'),
254252
join(dir, 'renamed-config.js')
255253
);
256-
await buildFast(dir, { config: 'renamed-config.js' });
254+
await build(dir, { config: 'renamed-config.js' });
257255
expect(await access(join(dir, 'build/bundle.js'))).toBeUndefined();
258256
});
259257

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

281-
await buildFast(dir);
279+
await build(dir);
282280
const builtStylesheet = await getOutputFile(dir, /bundle\.\w{5}\.css$/);
283281

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

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

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

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

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

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

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

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

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

372370
const body1 = await getBody(dir);
373371
looksLike(body1, images.prerender.home);

‎packages/cli/tests/config-formats.test.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
const { join } = require('path');
22
const { access } = require('fs/promises');
3-
const { build, buildFast } = require('./lib/cli');
3+
const { build } = require('./lib/cli');
44
const { subject } = require('./lib/output');
55

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

22-
await buildFast(dir);
22+
await build(dir);
2323

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

35-
await buildFast(dir, {
35+
await build(dir, {
3636
prerenderUrls: `prerenderUrls/${moduleFormat}/${dataFormat}`,
3737
});
3838

‎packages/cli/tests/images/build.js‎

Lines changed: 11 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -14,33 +14,26 @@ exports.default = {
1414
'ssr-build/ssr-bundle.css': 2346,
1515
'ssr-build/ssr-bundle.css.map': 3603,
1616

17-
'bundle.d55d3.js': 22978,
18-
'bundle.d55d3.js.map': 92378,
19-
'bundle.d55d3.legacy.js': 23646,
20-
'bundle.d55d3.legacy.js.map': 92673,
17+
'bundle.05a31.js': 22978,
18+
'bundle.05a31.js.map': 125226,
2119
'bundle.6329a.css': 1173,
2220
'bundle.6329a.css.map': 2165,
2321

24-
'dom-polyfills.99150.js': 5221,
25-
'dom-polyfills.99150.js.map': 18676,
26-
'es-polyfills.js': 46419,
22+
'dom-polyfills.f5813.js': 5221,
23+
'dom-polyfills.f5813.js.map': 18676,
2724

2825
'favicon.ico': 15086,
2926
'index.html': 3998,
3027
'manifest.json': 455,
3128
'preact_prerender_data.json': 11,
3229

33-
'route-home.chunk.ede4d.js': 1179,
34-
'route-home.chunk.ede4d.js.map': 3814,
35-
'route-home.chunk.ede4d.legacy.js': 1222,
36-
'route-home.chunk.ede4d.legacy.js.map': 3964,
37-
'route-home.chunk.d116e.css': 838,
38-
'route-home.chunk.d116e.css.map': 1406,
39-
40-
'route-profile.chunk.6856a.js': 3165,
41-
'route-profile.chunk.6856a.js.map': 13170,
42-
'route-profile.chunk.6856a.legacy.js': 3302,
43-
'route-profile.chunk.6856a.legacy.js.map': 13200,
30+
'route-home.chunk.585d0.js': 1231,
31+
'route-home.chunk.585d0.js.map': 2057,
32+
'route-home.chunk.d116e.css': 825,
33+
'route-home.chunk.d116e.css.map': 1378,
34+
35+
'route-profile.chunk.66aa5.js': 3300,
36+
'route-profile.chunk.66aa5.js.map': 21931,
4437
};
4538

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

0 commit comments

Comments
 (0)