refactor: Remove --preload flag (#1737)

* refactor: Removes `--preload` flag & functionality

* docs: Adding changeset

* docs: Updating readme for removal of preload

.changeset/poor-sloths-mate.md

@@ -0,0 +1,5 @@
+---
+'preact-cli': major
+---
+
+Removes `--preload` flag and functionality from build command.

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)

packages/cli/src/index.js

@@ -44,11 +44,6 @@ prog
  '--template',
  'Path to custom HTML template (default "src/template.html")'
  )
- .option(
- '--preload',
- 'Adds preload links to the HTML for required resources',
- false
- )
  .option(
  '--analyze',
  'Launch interactive Analyzer to inspect production bundle(s)',

packages/cli/src/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';
@@ -85,26 +84,16 @@ 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,
  url,
  manifest: config.manifest,
  inlineCss: config['inline-css'],
- preload: config.preload,
  config,
  preRenderData: values,
  CLI_DATA: { preRenderData: { url, ...routeData } },
  ssr: config.prerender ? prerender({ cwd, dest, src }, values) : '',
- loadManifest,
  entrypoints,
  },
  htmlWebpackPlugin: {

packages/cli/src/lib/webpack/webpack-base-config.js

@@ -302,7 +302,7 @@ module.exports = function createBaseConfig(env) {
  }),
  new WebpackManifestPlugin({
  fileName: 'asset-manifest.json',
- assetHookStage: webpack.Compiler.PROCESS_ASSETS_STAGE_ANALYSE,
+ assetHookStage: webpack.Compilation.PROCESS_ASSETS_STAGE_SUMMARIZE,
  // TODO: Remove this next breaking change and use the full filepath from this manifest
  // when referring to built assets, i.e.:
  // https://github.com/preactjs/preact-cli/blob/master/packages/cli/src/resources/head-end.ejs#L1

packages/cli/src/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');
@@ -125,7 +124,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({

packages/cli/src/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"':'' %>>
- <% } %>
-<% } %>

packages/cli/tests/build.test.js

@@ -90,58 +90,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);
@@ -253,22 +201,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');