From 0517151037816f02079bf5b0825a278f59072af8 Mon Sep 17 00:00:00 2001 From: Bryn Ryans Date: Fri, 2 Apr 2021 16:47:11 -0700 Subject: [PATCH 1/2] Kitchensink code splitting improvements and upgrade to Looker components Looker components now at 1.1.3. Kitchensink broken into its own code chunk. Initial bundle size now 300KB. Vendor bundle still large. Future PR will split vendor bundle. --- react/typescript/kitchensink/package.json | 10 +- react/typescript/kitchensink/src/App.tsx | 8 +- .../kitchensink/src/KitchenSink.async.tsx | 10 ++ .../kitchensink/src/KitchenSink.tsx | 2 + .../src/components/Sidebar/Sidebar.tsx | 33 ++++-- react/typescript/kitchensink/yarn.lock | 100 +++++++++++++----- 6 files changed, 119 insertions(+), 44 deletions(-) create mode 100644 react/typescript/kitchensink/src/KitchenSink.async.tsx diff --git a/react/typescript/kitchensink/package.json b/react/typescript/kitchensink/package.json index 30db643..b8d3052 100644 --- a/react/typescript/kitchensink/package.json +++ b/react/typescript/kitchensink/package.json @@ -1,6 +1,6 @@ { - "name": "extension-template-kitchensink", - "version": "0.10.2", + "name": "extension-kitchensink", + "version": "0.11.0", "description": "Looker Extension SDK functionality demonstration", "main": "dist/bundle.js", "scripts": { @@ -20,12 +20,16 @@ "node": ">=10" }, "dependencies": { - "@looker/components": "^0.16.0", + "@looker/components": "^1.1.3", + "@looker/icons": "1.1.3", "@looker/embed-sdk": "^1.5.1", "@looker/extension-sdk": "^21.0.9", "@looker/extension-sdk-react": "^21.0.9", "@looker/sdk": "^21.0.9", "@looker/sdk-rtl": "^21.0.9", + "@styled-icons/material": "10.28.0", + "@styled-icons/material-outlined": "10.28.0", + "@styled-icons/material-rounded": "10.28.0", "axios": "^0.21.1", "date-fns": "^2.12.0", "jsonwebtoken": "^8.5.1", diff --git a/react/typescript/kitchensink/src/App.tsx b/react/typescript/kitchensink/src/App.tsx index 5ae8d91..5d58c94 100644 --- a/react/typescript/kitchensink/src/App.tsx +++ b/react/typescript/kitchensink/src/App.tsx @@ -22,8 +22,8 @@ * THE SOFTWARE. */ -import React, { useState } from 'react' -import { KitchenSink } from './KitchenSink' +import React, { useState, Suspense } from 'react' +import { AsyncKitchenSink as KitchenSink } from './KitchenSink.async' import { ExtensionProvider2 } from '@looker/extension-sdk-react' import { hot } from 'react-hot-loader/root' import { Looker40SDK } from '@looker/sdk' @@ -39,7 +39,9 @@ export const App: React.FC<{}> = hot(() => { return ( - + }> + + ) }) diff --git a/react/typescript/kitchensink/src/KitchenSink.async.tsx b/react/typescript/kitchensink/src/KitchenSink.async.tsx new file mode 100644 index 0000000..8df2459 --- /dev/null +++ b/react/typescript/kitchensink/src/KitchenSink.async.tsx @@ -0,0 +1,10 @@ +import React, { lazy } from 'react' +import { KitchenSinkProps } from './types' + +const KitchenSink = lazy( + async () => import(/* webpackChunkName: "kitchensink" */ './KitchenSink') +) + +export const AsyncKitchenSink: React.FC = (props) => ( + +) diff --git a/react/typescript/kitchensink/src/KitchenSink.tsx b/react/typescript/kitchensink/src/KitchenSink.tsx index b8400c2..6b2d414 100644 --- a/react/typescript/kitchensink/src/KitchenSink.tsx +++ b/react/typescript/kitchensink/src/KitchenSink.tsx @@ -224,3 +224,5 @@ export const KitchenSink: React.FC = ({ ) } + +export default KitchenSink diff --git a/react/typescript/kitchensink/src/components/Sidebar/Sidebar.tsx b/react/typescript/kitchensink/src/components/Sidebar/Sidebar.tsx index 5a68b06..08b5aef 100644 --- a/react/typescript/kitchensink/src/components/Sidebar/Sidebar.tsx +++ b/react/typescript/kitchensink/src/components/Sidebar/Sidebar.tsx @@ -26,6 +26,15 @@ import { Box, MenuList, MenuItem, MenuItemProps } from '@looker/components' import * as React from 'react' import { Link as RouterLink, LinkProps } from 'react-router-dom' import styled from 'styled-components' +import { + Home as HomeIcon, + Api, + Dashboard, + Settings, + Cloud, + More, +} from '@styled-icons/material' +import { SqlRunner, Explore, AnalyticsApp } from '@looker/icons' import { SidebarProps } from './' import omit from 'lodash/omit' import { ROUTES } from '../../KitchenSink' @@ -38,13 +47,13 @@ export const Sidebar: React.FC = ({ - + } current={route === ROUTES.HOME_ROUTE}> Home {configurationData.showApiFunctions && ( - + } current={route === ROUTES.API_ROUTE}> Api Functions @@ -52,7 +61,7 @@ export const Sidebar: React.FC = ({ {configurationData.showCoreSdkFunctions && ( } current={route.startsWith(ROUTES.CORESDK_ROUTE)} > Core SDK Functions @@ -62,7 +71,7 @@ export const Sidebar: React.FC = ({ {configurationData.showEmbedDashboard && ( } current={route === ROUTES.EMBED_DASHBOARD} > Embed Dashboard @@ -71,14 +80,20 @@ export const Sidebar: React.FC = ({ )} {configurationData.showEmbedExplore && ( - + } + current={route === ROUTES.EMBED_EXPLORE} + > Embed Explore )} {configurationData.showEmbedLook && ( - + } + current={route === ROUTES.EMBED_LOOK} + > Embed Look @@ -86,7 +101,7 @@ export const Sidebar: React.FC = ({ {configurationData.showExternalApiFunctions && ( } current={route.startsWith(ROUTES.EXTERNAL_API_ROUTE)} > External Api Functions @@ -95,13 +110,13 @@ export const Sidebar: React.FC = ({ )} {configurationData.showMiscFunctions && ( - + } current={route === ROUTES.MISC_ROUTE}> Miscellaneous Functions )} - + } current={route === ROUTES.CONFIG_ROUTE}> Configure diff --git a/react/typescript/kitchensink/yarn.lock b/react/typescript/kitchensink/yarn.lock index 83ec2ea..49ffb1e 100644 --- a/react/typescript/kitchensink/yarn.lock +++ b/react/typescript/kitchensink/yarn.lock @@ -1060,7 +1060,7 @@ dependencies: regenerator-runtime "^0.13.4" -"@babel/runtime@^7.12.0", "@babel/runtime@^7.13.6": +"@babel/runtime@^7.10.5", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.13", "@babel/runtime@^7.13.6": version "7.13.10" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.13.10.tgz#47d42a57b6095f4468da440388fdbad8bebf0d7d" integrity sha512-4QPkjJq6Ns3V/RgpEahRk+AGfL0eO6RHHtTWoNNr5mO49G6B5+X6d6THgWEAvTrznU5xYpbAlVKRYcsCgh/Akw== @@ -1140,7 +1140,7 @@ lodash "^4.17.19" to-fast-properties "^2.0.0" -"@emotion/is-prop-valid@^0.8.1", "@emotion/is-prop-valid@^0.8.8": +"@emotion/is-prop-valid@^0.8.1", "@emotion/is-prop-valid@^0.8.7", "@emotion/is-prop-valid@^0.8.8": version "0.8.8" resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a" integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA== @@ -1176,32 +1176,35 @@ debug "^2.2.0" es6-promise "^4.2.8" -"@looker/components-providers@^0.16.0": - version "0.16.0" - resolved "https://registry.yarnpkg.com/@looker/components-providers/-/components-providers-0.16.0.tgz#9b2e19ddf3b1024ba12ada973fbfc98caa519efa" - integrity sha512-QlVm28oEx+siRP4yWyr/+TBB7romksYfL3plFMxaGlUq1iTZcV8GbioMXFGfyPRHlRjLft/Vc9Mar5msda0G2A== +"@looker/components-providers@^1.1.3": + version "1.1.3" + resolved "https://registry.yarnpkg.com/@looker/components-providers/-/components-providers-1.1.3.tgz#76a5b5ae0850eaffd1661f70be8fe622bc7fe0e9" + integrity sha512-EXIEZReWfQgT7CDF7svZsItK8P2GBFpZbASgcsaGr5ZGVDtI8Oey51PDcqSZNVIy6Ko2Fby8aAibngDgQ/W3TA== dependencies: - "@looker/design-tokens" "^0.16.0" + "@looker/design-tokens" "^1.1.3" i18next "19.9.1" lodash "^4.17.20" react-helmet-async "^1.0.7" react-i18next "11.8.8" - tabbable "^5.1.4" + tabbable "^5.1.6" -"@looker/components@^0.16.0": - version "0.16.0" - resolved "https://registry.yarnpkg.com/@looker/components/-/components-0.16.0.tgz#cd6c5a0e8977d6b170ed4d09b8bb97f5f1f36ac3" - integrity sha512-kDziqpxWJQYJDIGWw8WCmoRKn8FPUOv3BgXakc7NqnK5S/e/SaiRfVYjIIz9fXc4EaDmoGC0e4mvCXsMof9IZA== +"@looker/components@^1.1.3": + version "1.1.3" + resolved "https://registry.yarnpkg.com/@looker/components/-/components-1.1.3.tgz#6d7d3d18e1367d0b6d9543f6dab21c7c8e952bd0" + integrity sha512-uojW5ufnWY/zt4ick6nkE0Z2Y2SLHH6+g9txgwGkKzZuGwNM+kOZA/aPF9Bi1jbCQroPGREWdN1/4PGHzpnDSA== dependencies: - "@looker/components-providers" "^0.16.0" - "@looker/design-tokens" "^0.16.0" - "@looker/icons" "^0.16.0" + "@looker/components-providers" "^1.1.3" + "@looker/design-tokens" "^1.1.3" "@popperjs/core" "^2.6.0" + "@styled-icons/material" "^10.28.0" + "@styled-icons/material-outlined" "^10.28.0" + "@styled-icons/material-rounded" "^10.28.0" + "@styled-icons/styled-icon" "^10.6.3" d3-color "^2.0.0" d3-hsv "^0.1.0" date-fns "^2.17.0" date-fns-tz "^1.0.12" - hotkeys-js "^3.8.1" + hotkeys-js "^3.8.3" i18next "19.9.1" lodash "^4.17.20" react-day-picker "^7.4.8" @@ -1211,10 +1214,10 @@ styled-system "^5.1.5" uuid "^8.3.2" -"@looker/design-tokens@^0.16.0": - version "0.16.0" - resolved "https://registry.yarnpkg.com/@looker/design-tokens/-/design-tokens-0.16.0.tgz#e51217f91db45544e575b04e285559400b5a7683" - integrity sha512-gcNc1X288j+A8ntG7TblQRqNEcTSTRDuAAULbEHMo+5YNril6KChYvDm52aN3NcK29+X9qgFrZNQdD6DvXjQVQ== +"@looker/design-tokens@^1.1.3": + version "1.1.3" + resolved "https://registry.yarnpkg.com/@looker/design-tokens/-/design-tokens-1.1.3.tgz#620ef2be3de589b64b92e76f379f194a97a3d46f" + integrity sha512-Is9GoNsXCWSvf32AQclBh8ynVs6F+RfJ22t6jBwYAvRpnLOb8VV+wqGjY1t2lZFSTTPEnM4JOr6I9H2EPgDLBA== dependencies: "@styled-system/props" "^5.1.5" "@styled-system/should-forward-prop" "5.1.5" @@ -1259,10 +1262,12 @@ request-promise-native "^1.0.8" semver "^7.3.4" -"@looker/icons@^0.16.0": - version "0.16.0" - resolved "https://registry.yarnpkg.com/@looker/icons/-/icons-0.16.0.tgz#bd1e95d12fe4dbd7a3fa509906f21d61a626db3f" - integrity sha512-nTj7sVKQy0HXtMNaOZ4GHJpmVhlrv1J5LtUrYBmXb2dzSrvy0ZdA4WmPetwt8IAL6eMDI8CBsPIU1ulFn/P5fA== +"@looker/icons@1.1.3": + version "1.1.3" + resolved "https://registry.yarnpkg.com/@looker/icons/-/icons-1.1.3.tgz#9693c031752eb0e327a9c6e3806781a9b4dedc5b" + integrity sha512-/RamQ6ZycMfcggQ7v1Dj9jF7Y/k9yEW4GrsvM3Zch4D2qWMVE0B0LamKhnGkaUF4P06XZO5m20jKbUJjABTiSA== + dependencies: + "@styled-icons/styled-icon" "^10.6.3" "@looker/sdk-rtl@^21.0.9": version "21.0.9" @@ -1312,6 +1317,38 @@ resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.14.0.tgz#9fb3a3cf3132328151f353de4632e01e52102bea" integrity sha512-9NET910DNaIPngYnLLPeg+Ogzqsi9uM4mSboU5y6p8S5DzMTVEsJZrawi+BoDNUVBa2DhJqQYUFvMDfgU062LQ== +"@styled-icons/material-outlined@10.28.0", "@styled-icons/material-outlined@^10.28.0": + version "10.28.0" + resolved "https://registry.yarnpkg.com/@styled-icons/material-outlined/-/material-outlined-10.28.0.tgz#57d34c7a417bb79cf930bf1302aa8b463de1bcad" + integrity sha512-TXCYrBeR5YXDziNMDAO6ZpKVjWvWaWmhBvF/vTvL6sME5zazk9sToyRJ6i/+DZGNH8wD7+635e8hkZAYPp++/A== + dependencies: + "@babel/runtime" "^7.12.13" + "@styled-icons/styled-icon" "^10.6.0" + +"@styled-icons/material-rounded@10.28.0", "@styled-icons/material-rounded@^10.28.0": + version "10.28.0" + resolved "https://registry.yarnpkg.com/@styled-icons/material-rounded/-/material-rounded-10.28.0.tgz#d73fd9d2c981ca51b206e7fec7e5159486e2fbd9" + integrity sha512-qNnsrkdAwSaiakh7xPVVucP0XnDQ0UwaODpQ1cxASZ6+7XPJHsOxYd+VTTSn3h99Unzp4QJltrBaz//Ky6zSGw== + dependencies: + "@babel/runtime" "^7.12.13" + "@styled-icons/styled-icon" "^10.6.0" + +"@styled-icons/material@10.28.0", "@styled-icons/material@^10.28.0": + version "10.28.0" + resolved "https://registry.yarnpkg.com/@styled-icons/material/-/material-10.28.0.tgz#9437b6a0acffcefb578247f349c2972403334244" + integrity sha512-+401y79/qclNEMVbkAy98sJbBazeX/0k0DuPsULikAa+GDmmfzwk+xi9HloQa1Gsyc9/Zbnc5Hf7rFiJcukfbA== + dependencies: + "@babel/runtime" "^7.12.13" + "@styled-icons/styled-icon" "^10.6.0" + +"@styled-icons/styled-icon@^10.6.0", "@styled-icons/styled-icon@^10.6.3": + version "10.6.3" + resolved "https://registry.yarnpkg.com/@styled-icons/styled-icon/-/styled-icon-10.6.3.tgz#eae0e5e18fd601ac47e821bb9c2e099810e86403" + integrity sha512-/A95L3peioLoWFiy+/eKRhoQ9r/oRrN/qzbSX4hXU1nGP2rUXcX3LWUhoBNAOp9Rw38ucc/4ralY427UUNtcGQ== + dependencies: + "@babel/runtime" "^7.10.5" + "@emotion/is-prop-valid" "^0.8.7" + "@styled-system/background@^5.1.2": version "5.1.2" resolved "https://registry.yarnpkg.com/@styled-system/background/-/background-5.1.2.tgz#75c63d06b497ab372b70186c0bf608d62847a2ba" @@ -3634,11 +3671,16 @@ hosted-git-info@^2.1.4: resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.8.tgz#7539bd4bc1e0e0a895815a2e0262420b12858488" integrity sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg== -hotkeys-js@3.8.1, hotkeys-js@^3.8.1: +hotkeys-js@3.8.1: version "3.8.1" resolved "https://registry.yarnpkg.com/hotkeys-js/-/hotkeys-js-3.8.1.tgz#fa7051f73bf1dc92a8b8d580a40b247f91966376" integrity sha512-YlhVQtyG9f1b7GhtzdhR0Pl+cImD1ZrKI6zYUa7QLd0zuThiL7RzZ+ANJyy7z+kmcCpNYBf5PjBa3CjiQ5PFpw== +hotkeys-js@^3.8.3: + version "3.8.3" + resolved "https://registry.yarnpkg.com/hotkeys-js/-/hotkeys-js-3.8.3.tgz#0331c2cde770e62d51d5d023133f7c4395f59008" + integrity sha512-rUmoryG4lEAtkjF5tcYaihrVoE86Fdw1BLqO/UiBWOOF56h32a6ax8oV4urBlinVtNNtArLlBq8igGfZf2tQnw== + hpack.js@^2.1.6: version "2.1.6" resolved "https://registry.yarnpkg.com/hpack.js/-/hpack.js-2.1.6.tgz#87774c0949e513f42e84575b3c45681fade2a0b2" @@ -6296,10 +6338,10 @@ supports-color@^7.0.0, supports-color@^7.1.0: dependencies: has-flag "^4.0.0" -tabbable@^5.1.4: - version "5.1.5" - resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-5.1.5.tgz#efec48ede268d511c261e3b81facbb4782a35147" - integrity sha512-oVAPrWgLLqrbvQE8XqcU7CVBq6SQbaIbHkhOca3u7/jzuQvyZycrUKPCGr04qpEIUslmUlULbSeN+m3QrKEykA== +tabbable@^5.1.6: + version "5.1.6" + resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-5.1.6.tgz#dd495abe81d5e41e003fbfa70952e20d5e1e1e89" + integrity sha512-KSlGaSX9PbL7FHDTn2dB+zv61prkY8BeGioTsKfeN7dKhw5uz1S4U2iFaWMK4GR8oU+5OFBkFuxbMsaUxVVlrQ== table-layout@^1.0.1: version "1.0.1" From 56afc04322714ddaeec9a8a9e99ee16065bf8235 Mon Sep 17 00:00:00 2001 From: Bryn Ryans Date: Tue, 13 Apr 2021 17:26:17 -0700 Subject: [PATCH 2/2] smaller vendor bundles --- .../typescript/kitchensink/webpack.config.js | 2 +- react/typescript/kitchensink/webpack.prod.js | 19 +++++++++++++++++++ 2 files changed, 20 insertions(+), 1 deletion(-) diff --git a/react/typescript/kitchensink/webpack.config.js b/react/typescript/kitchensink/webpack.config.js index 437b5b3..8fdfca1 100644 --- a/react/typescript/kitchensink/webpack.config.js +++ b/react/typescript/kitchensink/webpack.config.js @@ -52,7 +52,7 @@ module.exports = { }, output: { path: __dirname + '/dist', - filename: 'bundle.js', + filename: '[name].bundle.js', }, module: { rules: [ diff --git a/react/typescript/kitchensink/webpack.prod.js b/react/typescript/kitchensink/webpack.prod.js index bdad53b..9e7ac07 100644 --- a/react/typescript/kitchensink/webpack.prod.js +++ b/react/typescript/kitchensink/webpack.prod.js @@ -28,5 +28,24 @@ module.exports = { ...commonConfig, optimization: { chunkIds: 'named', + splitChunks: { + cacheGroups: { + vendor: { + test: /[\\/]node_modules[\\/]/, + name(module) { + // break out vendors into their own vendor bundles. + // looker gets special treatment as combined component + // package large. + const context = module.context.includes('/@looker/') + ? module.context.replace('/@looker/', '/@looker-') + : module.context + const packageName = context.match( + /[\\/]node_modules[\\/](.*?)([\\/]|$)/ + )[1] + return `vendor.${packageName.replace('@', '')}` + }, + }, + }, + }, }, }