feat(v2): ⚡️ faster and lighter bundle size (optimization) (#1681)

* feat(v2):⚡️  fasterr and lighter bundle size optimization

* lint

* nits

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-live": "^2.1.2"
-    "react-loadable": "^5.5.0",
-    "react-loadable-visibility": "^3.0.1"
   },
   "peerDependencies": {
     "@docusaurus/core": "^2.0.0",

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',
+          },
+        },
+      };
+    },
   };
 };

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: {

packages/docusaurus/src/webpack/base.ts

@@ -86,38 +86,16 @@ export function createBaseConfig(
           ]
         : undefined,
       splitChunks: {
-        maxInitialRequests: 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
-        maxAsyncRequests: Infinity,
+        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,
-          },
         },
       },
     },

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"