From 5f0828677962c1adc9c0c4f938961ccbe3b5ede4 Mon Sep 17 00:00:00 2001 From: William Durand Date: Tue, 16 Feb 2021 11:47:24 +0100 Subject: [PATCH] Remove code-splitting feature (#10093) --- .babelrc | 4 +- config/default.js | 11 +- config/dev.js | 4 - config/development.js | 4 - config/stage.js | 4 - config/test.js | 7 - package.json | 5 - renovate.json | 4 - src/amo/client/base.js | 15 +- src/amo/components/Routes/index.js | 26 +-- src/amo/components/ServerHtml/index.js | 92 +-------- src/amo/server/base.js | 31 +-- src/amo/server/sriDataPlugin.js | 7 +- stories/setup/main.js | 5 +- tests/__fixtures__/loadable-stats.json | 10 - tests/unit/amo/components/TestServerHtml.js | 181 ------------------ .../unit/amo/middleware/test_cspMiddleware.js | 4 +- tests/unit/amo/server/test_sriDataPlugin.js | 33 ---- webpack-common.js | 13 +- yarn.lock | 36 +--- 20 files changed, 29 insertions(+), 467 deletions(-) delete mode 100644 tests/__fixtures__/loadable-stats.json diff --git a/.babelrc b/.babelrc index e96a8208bb7..900dd4d22cd 100644 --- a/.babelrc +++ b/.babelrc @@ -11,9 +11,7 @@ "@babel/preset-react" ], "plugins": [ - "@babel/plugin-proposal-class-properties", - "@babel/plugin-syntax-dynamic-import", - "@loadable/babel-plugin" + "@babel/plugin-proposal-class-properties" ], "env": { "test": { diff --git a/config/default.js b/config/default.js index 71c665c74ae..50bdcd713ce 100644 --- a/config/default.js +++ b/config/default.js @@ -8,16 +8,10 @@ import { addonsServerProdCDN, analyticsHost, prodDomain, apiProdHost, baseUrlPro const addonsFrontendCDN = 'https://addons-amo.cdn.mozilla.net'; const basePath = path.resolve(__dirname, '../'); -const distPath = path.join(basePath, 'dist'); -const loadableStatsFilename = 'loadable-stats.json'; module.exports = { basePath, - // This is needed for code-splitting. - loadableStatsFilename, - loadableStatsFile: path.join(distPath, loadableStatsFilename), - // The base URL of the site (for SEO purpose). baseURL: baseUrlProd, @@ -142,6 +136,7 @@ module.exports = { // from ./lib/shared.js CSP: { directives: { + defaultSrc: ["'none'"], baseUri: ["'self'"], childSrc: ["'none'"], connectSrc: [analyticsHost, apiProdHost, sentryHost], @@ -157,10 +152,6 @@ module.exports = { manifestSrc: ["'none'"], mediaSrc: ["'none'"], objectSrc: ["'none'"], - // This is needed because `prefetchSrc` isn't supported by FF yet. - // See: https://bugzilla.mozilla.org/show_bug.cgi?id=1457204 - defaultSrc: [addonsFrontendCDN], - prefetchSrc: [addonsFrontendCDN], // Script is limited to the amo specific CDN. scriptSrc: [ addonsFrontendCDN, diff --git a/config/dev.js b/config/dev.js index 7fa68f0001b..c24a39b1392 100644 --- a/config/dev.js +++ b/config/dev.js @@ -37,10 +37,6 @@ module.exports = { styleSrc: [ addonsFrontendCDN, ], - // This is needed because `prefetchSrc` isn't supported by FF yet. - // See: https://bugzilla.mozilla.org/show_bug.cgi?id=1457204 - defaultSrc: [addonsFrontendCDN], - prefetchSrc: [addonsFrontendCDN], }, }, diff --git a/config/development.js b/config/development.js index 2e2b0ea402e..b576b8c592d 100644 --- a/config/development.js +++ b/config/development.js @@ -77,10 +77,6 @@ module.exports = { // webpack injects inline CSS "'unsafe-inline'", ], - // This is needed because `prefetchSrc` isn't supported by FF yet. - // See: https://bugzilla.mozilla.org/show_bug.cgi?id=1457204 - defaultSrc: [webpackHost], - prefetchSrc: [webpackHost], }, reportOnly: true, }, diff --git a/config/stage.js b/config/stage.js index 60b6055e932..18bf7d7b965 100644 --- a/config/stage.js +++ b/config/stage.js @@ -35,10 +35,6 @@ module.exports = { styleSrc: [ addonsFrontendCDN, ], - // This is needed because `prefetchSrc` isn't supported by FF yet. - // See: https://bugzilla.mozilla.org/show_bug.cgi?id=1457204 - defaultSrc: [addonsFrontendCDN], - prefetchSrc: [addonsFrontendCDN], }, }, diff --git a/config/test.js b/config/test.js index 28451300db2..44c5fb78912 100644 --- a/config/test.js +++ b/config/test.js @@ -1,7 +1,3 @@ -import path from 'path'; - -const fixturesPath = path.join(__dirname, '..', 'tests', '__fixtures__'); - // Put any test configuration overrides here. module.exports = { // No test should touch the API so seeing this would indicate a bug. @@ -16,8 +12,5 @@ module.exports = { // Force-disable Sentry publicSentryDsn: null, - // We use a fake/incomplete file for the test suite. - loadableStatsFile: path.join(fixturesPath, 'loadable-stats.json'), - mozillaUserId: 1337, }; diff --git a/package.json b/package.json index 809e4f71b1b..326eac6a5c4 100644 --- a/package.json +++ b/package.json @@ -173,8 +173,6 @@ }, "homepage": "https://github.com/mozilla/addons-frontend#readme", "dependencies": { - "@loadable/component": "5.14.1", - "@loadable/server": "5.14.0", "@mozilla-protocol/tokens": "5.0.5", "@willdurand/isomorphic-formdata": "1.2.0", "base62": "2.0.1", @@ -258,14 +256,11 @@ "devDependencies": { "@babel/core": "^7.1.6", "@babel/plugin-proposal-class-properties": "^7.1.0", - "@babel/plugin-syntax-dynamic-import": "^7.0.0", "@babel/preset-env": "^7.1.6", "@babel/preset-flow": "^7.0.0", "@babel/preset-react": "^7.0.0", "@babel/register": "^7.0.0", "@emotion/core": "^11.0.0", - "@loadable/babel-plugin": "^5.7.1", - "@loadable/webpack-plugin": "^5.2.1", "@storybook/addon-docs": "^6.0.21", "@storybook/addons": "^6.0.0", "@storybook/react": "^6.0.0", diff --git a/renovate.json b/renovate.json index 59ebc45c427..ec8f03917c6 100644 --- a/renovate.json +++ b/renovate.json @@ -26,10 +26,6 @@ ], "groupName": "reactivestack/cookies" }, - { - "packagePatterns": ["@loadable/*"], - "groupName": "loadable components" - }, { "packagePatterns": [ "history", diff --git a/src/amo/client/base.js b/src/amo/client/base.js index 03a0bf26b50..25f8bcfe068 100644 --- a/src/amo/client/base.js +++ b/src/amo/client/base.js @@ -7,7 +7,6 @@ import { createBrowserHistory } from 'history'; import RavenJs from 'raven-js'; import * as React from 'react'; import { render } from 'react-dom'; -import { loadableReady } from '@loadable/component'; import Root from 'amo/components/Root'; import { langToLocale, makeI18n, sanitizeLanguage } from 'amo/i18n/utils'; @@ -123,14 +122,12 @@ export default async function createClient( const i18n = makeI18n(i18nData, lang); const renderApp = (App) => { - return loadableReady(() => { - render( - - - , - document.getElementById('react-view'), - ); - }); + render( + + + , + document.getElementById('react-view'), + ); }; return { history, renderApp, store }; diff --git a/src/amo/components/Routes/index.js b/src/amo/components/Routes/index.js index b45df61f134..984b34cdffb 100644 --- a/src/amo/components/Routes/index.js +++ b/src/amo/components/Routes/index.js @@ -2,7 +2,6 @@ import config from 'config'; import * as React from 'react'; import { Route, Switch } from 'react-router-dom'; -import loadable from '@loadable/component'; import Addon from 'amo/pages/Addon'; import AddonInfo, { @@ -33,31 +32,10 @@ import UsersUnsubscribe from 'amo/pages/UsersUnsubscribe'; import SimulateAsyncError from 'amo/pages/error-simulation/SimulateAsyncError'; import SimulateClientError from 'amo/pages/error-simulation/SimulateClientError'; import SimulateSyncError from 'amo/pages/error-simulation/SimulateSyncError'; +import About from 'amo/pages/StaticPages/About'; +import ReviewGuide from 'amo/pages/StaticPages/ReviewGuide'; import type { ConfigType } from 'amo/types/config'; -// About `loadable()` and code-splitting: -// -// 1. Set `webpackChunkName` to the name of the page component -// 2. Set `webpackPreload: true` as already done below -// -// Important: We do not use `webpackPrefetch: true` to prevent webpack to -// inject anything in the HTML returned by the server. Webpack does not inject -// anything when `webpackPreload` is set to `true` but '@loadable/server' -// gathers these chunks and we render the appropriate tags in the HTML in -// `ServerHtml`. - -const About = loadable(() => - import( - /* webpackPreload: true, webpackChunkName: "About" */ '../../pages/StaticPages/About' - ), -); - -const ReviewGuide = loadable(() => - import( - /* webpackPreload: true, webpackChunkName: "ReviewGuide" */ '../../pages/StaticPages/ReviewGuide' - ), -); - type Props = {| _config?: ConfigType, |}; diff --git a/src/amo/components/ServerHtml/index.js b/src/amo/components/ServerHtml/index.js index a7b586b4a6b..e6bf8c74d8c 100644 --- a/src/amo/components/ServerHtml/index.js +++ b/src/amo/components/ServerHtml/index.js @@ -16,7 +16,6 @@ export default class ServerHtml extends Component { static propTypes = { appState: PropTypes.object.isRequired, assets: PropTypes.object.isRequired, - chunkExtractor: PropTypes.object.isRequired, component: PropTypes.element.isRequired, htmlDir: PropTypes.string, htmlLang: PropTypes.string, @@ -111,93 +110,8 @@ export default class ServerHtml extends Component { )}`; } - renderStyles() { - const { chunkExtractor } = this.props; - - return chunkExtractor - .getMainAssets('style') - .filter( - // We render the main bundle with `getScript()`, so we skip it here. - (asset) => asset.chunk !== APP_NAME, - ) - .map((asset) => { - const sriProps = this.getSriProps(asset.filename); - - return ( - - ); - }); - } - - renderPreLinks() { - const { chunkExtractor } = this.props; - - return ( - chunkExtractor - .getPreAssets() - // We want to retrieve the bundles with "webpackPreload: true" only, and - // not the main bundle (amo). - .filter((asset) => asset.type === 'childAsset') - // We return both "preload" and "prefetch" links to maximize browser - // support, even though both links don't have the same goal. - .map((asset) => [ - , - , - ]) - ); - } - - renderAsyncScripts() { - const { chunkExtractor } = this.props; - - return chunkExtractor - .getMainAssets('script') - .filter( - // We render the main bundle with `getScript()`, so we skip it here. - (asset) => asset.chunk !== APP_NAME, - ) - .map((asset) => { - const sriProps = this.getSriProps(asset.filename); - - return ( -