diff --git a/.changeset/poor-sloths-mate.md b/.changeset/poor-sloths-mate.md new file mode 100644 index 000000000..e638a42be --- /dev/null +++ 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 index 457b89e21..2cec29c9d 100644 --- 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/src/index.js b/packages/cli/src/index.js index 699aea812..dc0601c37 100755 --- a/packages/cli/src/index.js +++ b/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)', diff --git a/packages/cli/src/lib/webpack/create-load-manifest.js b/packages/cli/src/lib/webpack/create-load-manifest.js deleted file mode 100644 index 0772f1b9a..000000000 --- a/packages/cli/src/lib/webpack/create-load-manifest.js +++ /dev/null @@ -1,69 +0,0 @@ -module.exports = (assets, namedChunkGroups, isProd) => { - if (!isProd) return {}; - /** - * This is a mapping of generic/pre-build filenames to their postbuild output - * - * bundle.js -> bundle.29bec.esm.js - * route-home.css -> styles/route-home.chunk.8aeee.css - * - * Even if a user alters the output name, we still have keys we can expect & rely on - */ - assets = JSON.parse(assets['asset-manifest.json']._value); - - const mainJs = assets['bundle.js']; - const mainCss = assets['bundle.css']; - - const defaults = { - ...(mainCss && { - [mainCss]: { - type: 'style', - weight: 1, - }, - }), - ...(mainJs && { - [mainJs]: { - type: 'script', - weight: 1, - }, - }), - }, - manifest = { - '/': defaults, - }; - - Object.keys(assets) - .filter(asset => /^route-.*\.js$/.test(asset)) - .map(asset => asset.replace(/\.js$/, '')) - .forEach(route => { - const routeManifest = Object.assign({}, defaults); - - const routeCss = assets[`${route}.css`]; - const routeJs = assets[`${route}.js`]; - - routeManifest[routeJs] = { type: 'script', weight: 0.9 }; - if (routeCss) routeManifest[routeCss] = { type: 'style', weight: 0.9 }; - - const path = route.replace(/^route-/, '/').replace(/^\/home/, '/'); - - if (namedChunkGroups) { - // async files to be loaded, generated by splitChunksPlugin - const asyncFiles = namedChunkGroups.get(route) || {}; - if (asyncFiles && asyncFiles.chunks) { - asyncFiles.chunks.forEach(asset => { - asset.files = asset.files || []; - asset.files.forEach(file => { - if (routeManifest[file]) return; - if (/\.css$/.test(file)) { - routeManifest[file] = { type: 'style', weight: 0.9 }; - } else if (/\.js$/.test(file)) { - routeManifest[file] = { type: 'script', weight: 0.9 }; - } - }); - }); - } - } - manifest[path] = routeManifest; - }); - - return manifest; -}; diff --git a/packages/cli/src/lib/webpack/push-manifest.js b/packages/cli/src/lib/webpack/push-manifest.js deleted file mode 100644 index 5e8938748..000000000 --- a/packages/cli/src/lib/webpack/push-manifest.js +++ /dev/null @@ -1,32 +0,0 @@ -const { Compilation, sources } = require('webpack'); -const createLoadManifest = require('./create-load-manifest'); - -module.exports = class PushManifestPlugin { - constructor(isProd) { - this.isProd = isProd; - } - apply(compiler) { - compiler.hooks.thisCompilation.tap('PushManifestPlugin', compilation => { - compilation.hooks.processAssets.tap( - { - name: 'PushManifestPlugin', - stage: Compilation.PROCESS_ASSETS_STAGE_ANALYSE, - }, - () => { - const manifest = JSON.stringify( - createLoadManifest( - compilation.assets, - compilation.namedChunkGroups, - this.isProd - ) - ); - - compilation.emitAsset( - 'push-manifest.json', - new sources.RawSource(manifest) - ); - } - ); - }); - } -}; diff --git a/packages/cli/src/lib/webpack/render-html-plugin.js b/packages/cli/src/lib/webpack/render-html-plugin.js index 998c40b66..8b9918c04 100644 --- a/packages/cli/src/lib/webpack/render-html-plugin.js +++ b/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: { diff --git a/packages/cli/src/lib/webpack/webpack-base-config.js b/packages/cli/src/lib/webpack/webpack-base-config.js index 443d9d7a0..989746f20 100644 --- a/packages/cli/src/lib/webpack/webpack-base-config.js +++ b/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 diff --git a/packages/cli/src/lib/webpack/webpack-client-config.js b/packages/cli/src/lib/webpack/webpack-client-config.js index cac6f0b9e..99b4d7b0a 100644 --- a/packages/cli/src/lib/webpack/webpack-client-config.js +++ b/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'); @@ -123,7 +122,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/src/resources/head-end.ejs b/packages/cli/src/resources/head-end.ejs index 07ff50c69..63cf7b89c 100644 --- a/packages/cli/src/resources/head-end.ejs +++ b/packages/cli/src/resources/head-end.ejs @@ -2,10 +2,3 @@ <% if (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 `