diff --git a/packages/docusaurus-theme-live-codeblock/package.json b/packages/docusaurus-theme-live-codeblock/package.json index 705d7d6a6e..f4e68f8b8c 100644 --- a/packages/docusaurus-theme-live-codeblock/package.json +++ b/packages/docusaurus-theme-live-codeblock/package.json @@ -8,12 +8,11 @@ }, "license": "MIT", "dependencies": { + "@philpl/buble": "^0.19.7", "classnames": "^2.2.6", "clipboard": "^2.0.4", "prism-react-renderer": "^0.1.7", - "react-live": "^2.1.2", - "react-loadable": "^5.5.0", - "react-loadable-visibility": "^3.0.1" + "react-live": "^2.1.2" }, "peerDependencies": { "@docusaurus/core": "^2.0.0", diff --git a/packages/docusaurus-theme-live-codeblock/src/index.js b/packages/docusaurus-theme-live-codeblock/src/index.js index 6b6790b3ec..a210d030fa 100644 --- a/packages/docusaurus-theme-live-codeblock/src/index.js +++ b/packages/docusaurus-theme-live-codeblock/src/index.js @@ -14,5 +14,17 @@ module.exports = function() { getThemePath() { return path.resolve(__dirname, './theme'); }, + + configureWebpack() { + return { + resolve: { + alias: { + // fork of Buble which removes Buble's large dependency and weighs in at a smaller size of ~51kB + // https://github.com/FormidableLabs/react-live#what-bundle-size-can-i-expect + buble: '@philpl/buble', + }, + }, + }; + }, }; }; diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js b/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js index 216adcbd03..54f6c102ec 100644 --- a/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js +++ b/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js @@ -7,22 +7,13 @@ import React, {useEffect, useState, useRef} from 'react'; import classnames from 'classnames'; -import LoadableVisibility from 'react-loadable-visibility/react-loadable'; import Highlight, {defaultProps} from 'prism-react-renderer'; import nightOwlTheme from 'prism-react-renderer/themes/nightOwl'; import Clipboard from 'clipboard'; -import Loading from '@theme/Loading'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; +import Playground from '@theme/Playground'; import styles from './styles.module.css'; -/* Live playground is not small in size, lazy load it is better */ -const Playground = LoadableVisibility({ - loader: () => import('@theme/Playground'), - loading: Loading, - modules: ['@theme/Playground'], - webpack: () => [require.resolveWeak('@theme/Playground')], -}); - export default ({children, className: languageClassName, live, ...props}) => { const { siteConfig: { diff --git a/packages/docusaurus/src/webpack/base.ts b/packages/docusaurus/src/webpack/base.ts index 5867ae53ef..fbc2946be8 100644 --- a/packages/docusaurus/src/webpack/base.ts +++ b/packages/docusaurus/src/webpack/base.ts @@ -86,38 +86,16 @@ export function createBaseConfig( ] : undefined, splitChunks: { - maxInitialRequests: Infinity, - maxAsyncRequests: Infinity, + // Since the chunk name includes all origin chunk names it’s recommended for production builds with long term caching to NOT include [name] in the filenames + name: false, cacheGroups: { // disable the built-in cacheGroups default: false, common: { name: 'common', - chunks: 'all', minChunks: totalPages > 2 ? totalPages * 0.5 : 2, priority: 40, }, - vendor: { - test: /[\\/]node_modules[\\/]/, - priority: 30, - minSize: 250000, - name(module) { - // get the package name. E.g. node_modules/packageName/not/this/part - const packageName = module.context.match( - /[\\/]node_modules[\\/](.*?)([\\/]|$)/, - )[1]; - - // some servers don't like @ symbols as filename - return `${packageName.replace('@', '')}`; - }, - }, - vendors: { - test: /[\\/]node_modules[\\/]/, - name: 'vendors', - priority: 20, - // create chunk regardless of the size of the chunk - enforce: true, - }, }, }, }, diff --git a/yarn.lock b/yarn.lock index 1945fc8f9e..0f8f28c69c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2176,6 +2176,21 @@ universal-user-agent "^2.0.0" url-template "^2.0.8" +"@philpl/buble@^0.19.7": + version "0.19.7" + resolved "https://registry.yarnpkg.com/@philpl/buble/-/buble-0.19.7.tgz#27231e6391393793b64bc1c982fc7b593198b893" + integrity sha512-wKTA2DxAGEW+QffRQvOhRQ0VBiYU2h2p8Yc1oBNlqSKws48/8faxqKNIuub0q4iuyTuLwtB8EkwiKwhlfV1PBA== + dependencies: + acorn "^6.1.1" + acorn-class-fields "^0.2.1" + acorn-dynamic-import "^4.0.0" + acorn-jsx "^5.0.1" + chalk "^2.4.2" + magic-string "^0.25.2" + minimist "^1.2.0" + os-homedir "^1.0.1" + regexpu-core "^4.5.4" + "@samverschueren/stream-to-observable@^0.3.0": version "0.3.0" resolved "https://registry.yarnpkg.com/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.0.tgz#ecdf48d532c58ea477acfcab80348424f8d0662f" @@ -2747,6 +2762,16 @@ accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.7: mime-types "~2.1.24" negotiator "0.6.2" +acorn-class-fields@^0.2.1: + version "0.2.1" + resolved "https://registry.yarnpkg.com/acorn-class-fields/-/acorn-class-fields-0.2.1.tgz#748058bceeb0ef25164bbc671993984083f5a085" + integrity sha512-US/kqTe0H8M4LN9izoL+eykVAitE68YMuYZ3sHn3i1fjniqR7oQ3SPvuMK/VT1kjOQHrx5Q88b90TtOKgAv2hQ== + +acorn-dynamic-import@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/acorn-dynamic-import/-/acorn-dynamic-import-4.0.0.tgz#482210140582a36b83c3e342e1cfebcaa9240948" + integrity sha512-d3OEjQV4ROpoflsnUA8HozoIR504TFxNivYEUi6uwz0IYhBkTDXGuWlNdMtybRt3nqVx/L6XqMt0FxkXuWKZhw== + acorn-globals@^4.1.0: version "4.3.2" resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-4.3.2.tgz#4e2c2313a597fd589720395f6354b41cd5ec8006" @@ -2762,6 +2787,11 @@ acorn-jsx@^3.0.0: dependencies: acorn "^3.0.4" +acorn-jsx@^5.0.1: + version "5.0.1" + resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.0.1.tgz#32a064fd925429216a09b141102bfdd185fae40e" + integrity sha512-HJ7CfNHrfJLlNTzIEUTj43LNWGkqpRLxm3YjAlcD0ACydk9XynzYsCBHxut+iqt+1aBXkx9UP/w/ZqMr13XIzg== + acorn-walk@^6.0.1, acorn-walk@^6.1.1: version "6.1.1" resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-6.1.1.tgz#d363b66f5fac5f018ff9c3a1e7b6f8e310cc3913" @@ -2782,7 +2812,7 @@ acorn@^6.0.1, acorn@^6.0.7: resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.1.1.tgz#7d25ae05bb8ad1f9b699108e1094ecd7884adc1f" integrity sha512-jPTiwtOxaHNaAPg/dmrJ/beuzLRnXtB0kQPQ8JpotKJgTB6rX6c8mlf315941pyjBSaPg8NHXS9fhP4u17DpGA== -acorn@^6.2.0: +acorn@^6.1.1, acorn@^6.2.0: version "6.2.0" resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.2.0.tgz#67f0da2fc339d6cfb5d6fb244fd449f33cd8bbe3" integrity sha512-8oe72N3WPMjA+2zVG71Ia0nXZ8DpQH+QyyHO+p06jT8eg8FGG3FbcUIi8KziHlAfheJQZeoqbvq1mQSQHXKYLw== @@ -9796,6 +9826,13 @@ magic-string@^0.25.1: dependencies: sourcemap-codec "^1.4.4" +magic-string@^0.25.2: + version "0.25.3" + resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.3.tgz#34b8d2a2c7fec9d9bdf9929a3fd81d271ef35be9" + integrity sha512-6QK0OpF/phMz0Q2AxILkX2mFhi7m+WMwTRg0LQKq/WBB0cDP4rYH3Wp4/d3OTXlrPLVJT/RFqj8tFeAR4nk8AA== + dependencies: + sourcemap-codec "^1.4.4" + make-dir@^1.0.0, make-dir@^1.2.0: version "1.3.0" resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-1.3.0.tgz#79c1033b80515bd6d24ec9933e860ca75ee27f0c" @@ -12736,11 +12773,6 @@ react-loadable-ssr-addon@^0.1.9: resolved "https://registry.yarnpkg.com/react-loadable-ssr-addon/-/react-loadable-ssr-addon-0.1.9.tgz#c134275fd36637a554f6438a0b78e0d1f70a8260" integrity sha512-mjk0ykDmmgPvkoFVwjbhev/VtarlpdR7B9FzuFFxtviFWVjaL8ddw4J89uFvUkC1KtFmXdQ6BF7yzUB54QqmXg== -react-loadable-visibility@^3.0.1: - version "3.0.1" - resolved "https://registry.yarnpkg.com/react-loadable-visibility/-/react-loadable-visibility-3.0.1.tgz#ab1e005ff4cf0551b28f5437d93d56d70fdfc9ef" - integrity sha512-DabYmhhu+ejoIfIOu0F5YjDgZQznBePTeIszICh6GCdfzFK6sYU9sdlxdjOlNnfxGzF4yRh/+YIl2ktJ/WB8xg== - react-loadable@^5.5.0: version "5.5.0" resolved "https://registry.yarnpkg.com/react-loadable/-/react-loadable-5.5.0.tgz#582251679d3da86c32aae2c8e689c59f1196d8c4"