refactor: Remove --preload flag (#1737)

* refactor: Removes `--preload` flag & functionality * docs: Adding changeset * docs: Updating readme for removal of preload
preactjs · Aug 18, 2022 · 4953687 · 4953687
1 parent 3e86e81
commit 4953687
Show file tree

Hide file tree

Showing 20 changed files with 5 additions and 356 deletions.
diff --git a/.changeset/poor-sloths-mate.md b/.changeset/poor-sloths-mate.md
@@ -0,0 +1,5 @@
+---
+'preact-cli': major
+---
+
+Removes `--preload` flag and functionality from build command.
diff --git a/README.md b/README.md
@@ -125,7 +125,6 @@ $ [npm run / yarn] preact build
  --babelConfig Path to custom Babel config (default .babelrc)
  --json Generate build stats for bundle analysis
  --template Path to custom HTML template (default 'src/template.html')
- --preload Adds preload tags to the document its assets (default false)
  --analyze Launch interactive Analyzer to inspect production bundle(s)
  --prerender Renders route(s) into generated static HTML (default true)
  --prerenderUrls Path to pre-rendered routes config (default prerender-urls.json)

diff --git a/packages/cli/lib/commands/build.js b/packages/cli/lib/commands/build.js
@@ -39,11 +39,6 @@ const options = [
  name: '--template',
  description: 'Path to custom HTML template (default "src/template.html")',
  },
- {
- name: '--preload',
- description: 'Adds preload tags to the document its assets',
- default: false,
- },
  {
  name: '--analyze',
  description: 'Launch interactive Analyzer to inspect production bundle(s)',

diff --git a/packages/cli/lib/lib/webpack/create-load-manifest.js b/packages/cli/lib/lib/webpack/create-load-manifest.js
diff --git a/packages/cli/lib/lib/webpack/push-manifest.js b/packages/cli/lib/lib/webpack/push-manifest.js
diff --git a/packages/cli/lib/lib/webpack/render-html-plugin.js b/packages/cli/lib/lib/webpack/render-html-plugin.js
@@ -7,7 +7,6 @@ const {
 } = require('html-webpack-skip-assets-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const prerender = require('./prerender');
-const createLoadManifest = require('./create-load-manifest');
 const { esmImport, tryResolveConfig, warn } = require('../../util');
 
 const PREACT_FALLBACK_URL = '/200.html';
@@ -82,14 +81,6 @@ module.exports = async function renderHTMLPlugin(config) {
  entryFiles.find(file => /\.(m?js)(\?|$)/.test(file));
  });
 
- let loadManifest = compilation.assets['push-manifest.json']
- ? JSON.parse(compilation.assets['push-manifest.json'].source())
- : createLoadManifest(
- compilation.assets,
- compilation.namedChunkGroups,
- config.isProd
- );
-
  return {
  cli: {
  title,
@@ -101,7 +92,6 @@ module.exports = async function renderHTMLPlugin(config) {
  preRenderData: values,
  CLI_DATA: { preRenderData: { url, ...routeData } },
  ssr: config.prerender ? prerender({ cwd, dest, src }, values) : '',
- loadManifest,
  entrypoints,
  },
  htmlWebpackPlugin: {

diff --git a/packages/cli/lib/lib/webpack/webpack-client-config.js b/packages/cli/lib/lib/webpack/webpack-client-config.js
@@ -10,7 +10,6 @@ const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 const CrittersPlugin = require('critters-webpack-plugin');
 const renderHTMLPlugin = require('./render-html-plugin');
-const PushManifestPlugin = require('./push-manifest');
 const baseConfig = require('./webpack-base-config');
 const { InjectManifest } = require('workbox-webpack-plugin');
 const CompressionPlugin = require('compression-webpack-plugin');
@@ -132,7 +131,6 @@ async function clientConfig(env) {
  'process.env.ADD_SW': env.sw,
  'process.env.PRERENDER': env.prerender,
  }),
- new PushManifestPlugin(env.isProd),
  ...(await renderHTMLPlugin(env)),
  copyPatterns.length !== 0 &&
  new CopyWebpackPlugin({

diff --git a/packages/cli/lib/resources/head-end.ejs b/packages/cli/lib/resources/head-end.ejs
@@ -2,10 +2,3 @@
 <% if (cli.manifest.theme_color) { %>
  <meta name="theme-color" content="<%= cli.manifest.theme_color %>">
 <% } %>
-<% const filesRegexp = cli.inlineCss ? /\.(chunk\.\w{5}\.css|js)$/ : /\.(css|js)$/;%>
-<% for (const file in cli.loadManifest[cli.url]) { %>
- <% if (cli.preload && file && file.match(filesRegexp)) { %>
- <% /* crossorigin for main bundle as that is loaded from `<script type=module` tag, other lazy loaded bundles are from webpack so its not needed */ %>
- <link rel="preload" href="<%= htmlWebpackPlugin.files.publicPath + file %>" as="<%= file.match(/\.css$/)?'style':'script' %>" <%= file.match(/bundle\.\w{5}\.(?<!legacy)\.js$/)?'crossorigin="anonymous"':'' %>>
- <% } %>
-<% } %>
diff --git a/packages/cli/tests/build.test.js b/packages/cli/tests/build.test.js
@@ -97,58 +97,6 @@ describe('preact build', () => {
  expect(await access(file)).toBeUndefined();
  });
 
- describe('Push manifest plugin', () => {
- it('should produce correct default `push-manifest.json`', async () => {
- let dir = await create('default');
-
- await buildFast(dir);
- const manifest = await readFile(
- `${dir}/build/push-manifest.json`,
- 'utf8'
- );
- expect(manifest).toEqual(
- expect.stringMatching(getRegExpFromMarkup(images.pushManifest))
- );
- });
-
- it('should produce correct `push-manifest.json` when expected values are missing', async () => {
- // In this subject, there is no source CSS which means no CSS asset is output.
- // In the past, this would result in `"undefined": { type: "style" ... }` being added to the manifest.
- let dir = await subject('custom-webpack');
- await buildFast(dir);
- const manifest = await readFile(
- `${dir}/build/push-manifest.json`,
- 'utf8'
- );
- expect(manifest).not.toMatch(/"undefined"/);
- });
-
- // Issue #1675
- it('should produce correct `push-manifest.json` when user configures output filenames', async () => {
- let dir = await subject('custom-webpack');
-
- const config = await readFile(`${dir}/preact.config.js`, 'utf8');
- await writeFile(
- `${dir}/preact.config.js`,
- config.replace(
- "config.output.filename = '[name].js'",
- "config.output.filename = 'scripts/[name].js'"
- )
- );
-
- await buildFast(dir, { prerender: false });
- const manifest = await readFile(
- `${dir}/build/push-manifest.json`,
- 'utf8'
- );
- expect(manifest).toEqual(
- expect.stringMatching(
- getRegExpFromMarkup(images.pushManifestAlteredFilenames)
- )
- );
- });
- });
-
  it('should use a custom `.env` with prefixed environment variables', async () => {
  let dir = await subject('custom-dotenv');
  await buildFast(dir);
@@ -260,22 +208,6 @@ describe('preact build', () => {
  );
  });
 
- it('--preload', async () => {
- let dir = await subject('preload-chunks');
-
- await buildFast(dir, { preload: true });
- let head = await getHead(dir);
- expect(head).toEqual(
- expect.stringMatching(getRegExpFromMarkup(images.preload.true))
- );
-
- await buildFast(dir, { preload: false });
- head = await getHead(dir);
- expect(head).toEqual(
- expect.stringMatching(getRegExpFromMarkup(images.preload.false))
- );
- });
-
  it('--prerender', async () => {
  let dir = await subject('minimal');
 

diff --git a/packages/cli/tests/images/build.js b/packages/cli/tests/images/build.js
@@ -28,7 +28,6 @@ exports.default = {
  'index.html': 2263,
  'manifest.json': 455,
  'preact_prerender_data.json': 11,
- 'push-manifest.json': 450,
  'asset-manifest.json': 943,
 
  'route-home.chunk.4ad71.js': 339,
@@ -100,45 +99,6 @@ exports.prerender.heads.custom = `
 <\\/head>
 `;
 
-exports.preload = {};
-
-exports.preload.true = `
-<head>
- <meta charset=\\"utf-8\\">
- <title>preact-preload-chunks<\\/title>
- <meta name=\\"viewport\\" content=\\"width=device-width,initial-scale=1\\">
- <meta name=\\"mobile-web-app-capable\\" content=\\"yes\\">
- <meta name=\\"apple-mobile-web-app-capable\\" content=\\"yes\\">
- <link rel=\\"apple-touch-icon\\" href=\\"\\/assets\\/icons\\/apple-touch-icon\\.png\\">
- <link rel=\\"manifest\\" href=\\"\\/manifest\\.json\\">
- <link rel=\\"preload\\" href=\\"\\/bundle\\.\\w{5}\\.js\\" as=\\"script\\">
- <link rel=\\"preload\\" href=\\"\\/route-home\\.chunk\\.\\w{5}\\.js\\" as=\\"script\\">
- <link rel=\\"preload\\" href=\\"\\/route-home\\.chunk\\.\\w{5}\\.css\\" as=\\"style\\">
- <style>html{padding:0}<\\/style>
- <link href=\\"\\/bundle\\.\\w{5}\\.css\\" rel=\\"stylesheet\\" media=\\"print\\" onload=\\"this.media='all'\\">
- <noscript>
- <link rel=\\"stylesheet\\" href=\\"\\/bundle.\\w{5}.css\\">
- </noscript>
-</head>
-`;
-
-exports.preload.false = `
-<head>
- <meta charset=\\"utf-8\\">
- <title>preact-preload-chunks<\\/title>
- <meta name=\\"viewport\\" content=\\"width=device-width,initial-scale=1\\">
- <meta name=\\"mobile-web-app-capable\\" content=\\"yes\\">
- <meta name=\\"apple-mobile-web-app-capable\\" content=\\"yes\\">
- <link rel=\\"apple-touch-icon\\" href=\\"\\/assets\\/icons\\/apple-touch-icon\\.png\\">
- <link rel=\\"manifest\\" href=\\"\\/manifest\\.json\\">
- <style>html{padding:0}<\\/style>
- <link href=\\"\\/bundle\\.\\w{5}\\.css\\" rel=\\"stylesheet\\" media=\\"print\\" onload=\\"this.media='all'\\">
- <noscript>
- <link rel=\\"stylesheet\\" href=\\"\\/bundle.\\w{5}.css\\">
- </noscript>
-</head>
-`;
-
 exports.prerender.home = `
 <body>
  <div id="app">
@@ -207,58 +167,6 @@ exports.template = `
 </html>
 `;
 
-exports.pushManifest = `
-{
- "/":{
- "bundle.\\w{5}.css":{
- "type":"style",
- "weight":1
- },
- "bundle.\\w{5}.js":{
- "type":"script",
- "weight":1
- },
- "route-home.chunk.\\w{5}.js":{
- "type":"script",
- "weight":0.9
- },
- "route-home.chunk.\\w{5}.css":{
- "type":"style",
- "weight":0.9
- }
- },
- "/profile":{
- "bundle.\\w{5}.css":{
- "type":"style",
- "weight":1
- },
- "bundle.\\w{5}.js":{
- "type":"script",
- "weight":1
- },
- "route-profile.chunk.\\w{5}.js":{
- "type":"script",
- "weight":0.9
- },
- "route-profile.chunk.\\w{5}.css":{
- "type":"style",
- "weight":0.9
- }
- }
-}
-`;
-
-exports.pushManifestAlteredFilenames = `
-{
- "/":{
- "scripts/bundle.js":{
- "type":"script",
- "weight":1
- }
- }
-}
-`;
-
 exports.publicPath = `
 <!DOCTYPE html>
 <html lang="en">