Skip to content

Commit 667fd33

Browse files
LekoArtsLekoArts
authored
feat: Add bundle-analyzer and lazy-load react-live (#450)
1 parent 9673c72 commit 667fd33

File tree

25 files changed

+2380
-5749
lines changed

25 files changed

+2380
-5749
lines changed

‎.eslintrc.js

+3
Original file line numberDiff line numberDiff line change
@@ -61,12 +61,15 @@ module.exports = {
6161
"@typescript-eslint/no-non-null-assertion": 0,
6262
"@typescript-eslint/ban-ts-ignore": 0,
6363
"@typescript-eslint/no-empty-function": 0,
64+
"@typescript-eslint/explicit-module-boundary-types": 0,
65+
"@typescript-eslint/ban-ts-comment": 0,
6466
"no-console": [`warn`, { allow: [`warn`] }],
6567
"spaced-comment": [2, `always`, { exceptions: [`-`, `+`], markers: [`/`] }],
6668
"no-use-before-define": 0,
6769
"linebreak-style": 0,
6870
"consistent-return": 0,
6971
import: 0,
72+
camelcase: 1,
7073
"import/no-unresolved": 0,
7174
"func-names": 0,
7275
"import/no-extraneous-dependencies": 0,

‎examples/cara/gatsby-config.js

+11-1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ require(`dotenv`).config({
22
path: `.env`,
33
})
44

5+
const shouldAnalyseBundle = process.env.ANALYSE_BUNDLE
6+
57
module.exports = {
68
siteMetadata: {
79
// You can overwrite values here that are used for the SEO component
@@ -47,5 +49,13 @@ module.exports = {
4749
},
4850
`gatsby-plugin-offline`,
4951
`gatsby-plugin-netlify`,
50-
],
52+
shouldAnalyseBundle && {
53+
resolve: `gatsby-plugin-webpack-bundle-analyser-v2`,
54+
options: {
55+
analyzerMode: `static`,
56+
reportFilename: `_bundle.html`,
57+
openAnalyzer: false,
58+
},
59+
},
60+
].filter(Boolean),
5161
}

‎examples/cara/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
"gatsby-plugin-manifest": "^2.2.6",
2323
"gatsby-plugin-netlify": "^2.1.6",
2424
"gatsby-plugin-offline": "^2.2.7",
25+
"gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.10",
2526
"react": "^16.13.1",
2627
"react-dom": "^16.13.1"
2728
},

‎examples/emilia/gatsby-config.js

+11-1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ require(`dotenv`).config({
22
path: `.env`,
33
})
44

5+
const shouldAnalyseBundle = process.env.ANALYSE_BUNDLE
6+
57
module.exports = {
68
siteMetadata: {
79
siteTitleAlt: `Emilia - Gatsby Starter Portfolio`,
@@ -45,5 +47,13 @@ module.exports = {
4547
},
4648
`gatsby-plugin-offline`,
4749
`gatsby-plugin-netlify`,
48-
],
50+
shouldAnalyseBundle && {
51+
resolve: `gatsby-plugin-webpack-bundle-analyser-v2`,
52+
options: {
53+
analyzerMode: `static`,
54+
reportFilename: `_bundle.html`,
55+
openAnalyzer: false,
56+
},
57+
},
58+
].filter(Boolean),
4959
}

‎examples/emilia/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
"gatsby-plugin-netlify": "^2.1.11",
2424
"gatsby-plugin-offline": "^3.0.1",
2525
"gatsby-plugin-sitemap": "^2.2.7",
26+
"gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.10",
2627
"react": "^16.13.1",
2728
"react-dom": "^16.13.1"
2829
},

‎examples/emma/gatsby-config.js

+11-1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ require(`dotenv`).config({
22
path: `.env`,
33
})
44

5+
const shouldAnalyseBundle = process.env.ANALYSE_BUNDLE
6+
57
module.exports = {
68
siteMetadata: {
79
siteTitleAlt: `Emma - Gatsby Starter Portfolio`,
@@ -45,5 +47,13 @@ module.exports = {
4547
},
4648
`gatsby-plugin-offline`,
4749
`gatsby-plugin-netlify`,
48-
],
50+
shouldAnalyseBundle && {
51+
resolve: `gatsby-plugin-webpack-bundle-analyser-v2`,
52+
options: {
53+
analyzerMode: `static`,
54+
reportFilename: `_bundle.html`,
55+
openAnalyzer: false,
56+
},
57+
},
58+
].filter(Boolean),
4959
}

‎examples/emma/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
"gatsby-plugin-netlify": "^2.1.6",
2424
"gatsby-plugin-offline": "^2.2.7",
2525
"gatsby-plugin-sitemap": "^2.2.7",
26+
"gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.10",
2627
"react": "^16.13.1",
2728
"react-dom": "^16.13.1"
2829
},

‎examples/graphql-playground/gatsby-config.js

+15-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
require(`dotenv`).config({
2+
path: `.env`,
3+
})
4+
5+
const shouldAnalyseBundle = process.env.ANALYSE_BUNDLE
6+
17
module.exports = {
28
plugins: [
39
{
@@ -6,5 +12,13 @@ module.exports = {
612
options: {},
713
},
814
`gatsby-plugin-netlify`,
9-
],
15+
shouldAnalyseBundle && {
16+
resolve: `gatsby-plugin-webpack-bundle-analyser-v2`,
17+
options: {
18+
analyzerMode: `static`,
19+
reportFilename: `_bundle.html`,
20+
openAnalyzer: false,
21+
},
22+
},
23+
].filter(Boolean),
1024
}

‎examples/graphql-playground/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
"@lekoarts/gatsby-theme-graphql-playground": "^1.1.11",
2020
"gatsby": "^2.20.36",
2121
"gatsby-plugin-netlify": "^2.1.23",
22+
"gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.10",
2223
"react": "^16.13.1",
2324
"react-dom": "^16.13.1"
2425
},

‎examples/minimal-blog/gatsby-config.js

+11-1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ require(`dotenv`).config({
22
path: `.env`,
33
})
44

5+
const shouldAnalyseBundle = process.env.ANALYSE_BUNDLE
6+
57
module.exports = {
68
siteMetadata: {
79
siteTitleAlt: `Minimal Blog - Gatsby Theme`,
@@ -66,5 +68,13 @@ module.exports = {
6668
},
6769
`gatsby-plugin-offline`,
6870
`gatsby-plugin-netlify`,
69-
],
71+
shouldAnalyseBundle && {
72+
resolve: `gatsby-plugin-webpack-bundle-analyser-v2`,
73+
options: {
74+
analyzerMode: `static`,
75+
reportFilename: `_bundle.html`,
76+
openAnalyzer: false,
77+
},
78+
},
79+
].filter(Boolean),
7080
}

‎examples/minimal-blog/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
"gatsby-plugin-netlify": "^2.1.3",
2424
"gatsby-plugin-offline": "^2.2.4",
2525
"gatsby-plugin-sitemap": "^2.2.19",
26+
"gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.10",
2627
"react": "^16.13.1",
2728
"react-dom": "^16.13.1"
2829
},

‎examples/specimens/gatsby-config.js

+11-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
// eslint-disable-next-line global-require
22
const remarkPlugins = [require(`remark-slug`)]
33

4+
const shouldAnalyseBundle = process.env.ANALYSE_BUNDLE
5+
46
module.exports = {
57
siteMetadata: {
68
siteTitle: `Specimens for Design Systems - @lekoarts/gatsby-theme-specimens`,
@@ -60,5 +62,13 @@ module.exports = {
6062
},
6163
`gatsby-plugin-offline`,
6264
`gatsby-plugin-netlify`,
63-
],
65+
shouldAnalyseBundle && {
66+
resolve: `gatsby-plugin-webpack-bundle-analyser-v2`,
67+
options: {
68+
analyzerMode: `static`,
69+
reportFilename: `_bundle.html`,
70+
openAnalyzer: false,
71+
},
72+
},
73+
].filter(Boolean),
6474
}

‎examples/specimens/package.json

+2
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
},
1818
"dependencies": {
1919
"@lekoarts/gatsby-theme-specimens": "^2.2.8",
20+
"@loadable/component": "^5.13.1",
2021
"@mdx-js/mdx": "^1.5.9",
2122
"@theme-ui/presets": "^0.3.0",
2223
"gatsby": "^2.20.36",
@@ -28,6 +29,7 @@
2829
"gatsby-plugin-offline": "^2.2.7",
2930
"gatsby-plugin-react-helmet": "^3.1.4",
3031
"gatsby-plugin-theme-ui": "^0.3.0",
32+
"gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.10",
3133
"gatsby-source-filesystem": "^2.1.10",
3234
"mdx-utils": "^0.2.0",
3335
"prism-react-renderer": "^1.1.0",

‎examples/specimens/src/components/code.js

+21-8
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import React from "react"
33
import Highlight, { defaultProps } from "prism-react-renderer"
44
import theme from "prism-react-renderer/themes/vsDark"
5-
import { LiveProvider, LiveEditor, LiveError, LivePreview } from "react-live"
5+
import loadable from "@loadable/component"
66
import { useMDXScope } from "gatsby-plugin-mdx/context"
77
import { useMDXComponents } from "@mdx-js/react"
88
import { css } from "@emotion/core"
@@ -19,6 +19,20 @@ const badgeStyle = {
1919
letterSpacing: `0.05em`,
2020
}
2121

22+
const LazyLiveProvider = loadable(async () => {
23+
const Module = await import(`react-live`)
24+
const { LiveProvider, LiveEditor, LiveError, LivePreview } = Module
25+
return (props) => (
26+
<LiveProvider {...props}>
27+
<div css={css(badgeStyle)}>Editor</div>
28+
<LiveEditor css={css({ marginBottom: `1rem`, borderRadius: `0.25rem` })} />
29+
<LiveError />
30+
<div css={css(badgeStyle)}>Preview</div>
31+
<LivePreview css={css({ marginBottom: `3rem` })} />
32+
</LiveProvider>
33+
)
34+
})
35+
2236
const Code = ({ codeString, language, live, noInline }) => {
2337
const imported = useMDXScope()
2438
const defined = useMDXComponents()
@@ -27,13 +41,12 @@ const Code = ({ codeString, language, live, noInline }) => {
2741

2842
if (live) {
2943
return (
30-
<LiveProvider code={codeString} theme={theme} noInline={noInline || false} scope={{ ...defined, ...imported }}>
31-
<div css={css(badgeStyle)}>Editor</div>
32-
<LiveEditor css={css({ marginBottom: `1rem`, borderRadius: `0.25rem` })} />
33-
<LiveError />
34-
<div css={css(badgeStyle)}>Preview</div>
35-
<LivePreview css={css({ marginBottom: `3rem` })} />
36-
</LiveProvider>
44+
<LazyLiveProvider
45+
code={codeString}
46+
theme={theme}
47+
noInline={noInline || false}
48+
scope={{ ...defined, ...imported }}
49+
/>
3750
)
3851
}
3952
return (

‎examples/status-dashboard/gatsby-config.js

+11-1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ require(`dotenv`).config({
22
path: `.env`,
33
})
44

5+
const shouldAnalyseBundle = process.env.ANALYSE_BUNDLE
6+
57
module.exports = {
68
siteMetadata: {
79
siteUrl: process.env.SITE_URL || `https://status.lekoarts.de`,
@@ -28,5 +30,13 @@ module.exports = {
2830
},
2931
`gatsby-plugin-offline`,
3032
`gatsby-plugin-netlify`,
31-
],
33+
shouldAnalyseBundle && {
34+
resolve: `gatsby-plugin-webpack-bundle-analyser-v2`,
35+
options: {
36+
analyzerMode: `static`,
37+
reportFilename: `_bundle.html`,
38+
openAnalyzer: false,
39+
},
40+
},
41+
].filter(Boolean),
3242
}

‎examples/status-dashboard/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
"gatsby-plugin-netlify": "^2.1.6",
2525
"gatsby-plugin-offline": "^2.2.7",
2626
"gatsby-plugin-react-helmet": "^3.1.4",
27+
"gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.10",
2728
"react": "^16.13.1",
2829
"react-dom": "^16.13.1",
2930
"react-helmet": "^5.2.1"

‎examples/styleguide/gatsby-config.js

+15-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
require(`dotenv`).config({
2+
path: `.env`,
3+
})
4+
5+
const shouldAnalyseBundle = process.env.ANALYSE_BUNDLE
6+
17
module.exports = {
28
siteMetadata: {
39
siteTitle: `Styleguide`,
@@ -19,5 +25,13 @@ module.exports = {
1925
},
2026
},
2127
`gatsby-plugin-netlify`,
22-
],
28+
shouldAnalyseBundle && {
29+
resolve: `gatsby-plugin-webpack-bundle-analyser-v2`,
30+
options: {
31+
analyzerMode: `static`,
32+
reportFilename: `_bundle.html`,
33+
openAnalyzer: false,
34+
},
35+
},
36+
].filter(Boolean),
2337
}

‎examples/styleguide/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
"gatsby-plugin-netlify": "^2.1.27",
2222
"gatsby-plugin-react-helmet": "^3.1.16",
2323
"gatsby-plugin-theme-ui": "^0.3.0",
24+
"gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.10",
2425
"react": "^16.13.1",
2526
"react-dom": "^16.13.1",
2627
"react-helmet": "^5.2.1",

‎package.json

+6-5
Original file line numberDiff line numberDiff line change
@@ -38,17 +38,18 @@
3838
"@testing-library/jest-dom": "^5.11.0",
3939
"@testing-library/react": "^10.4.5",
4040
"@types/chroma-js": "^2.0.0",
41-
"@types/jest": "^25.2.3",
42-
"@types/node": "^12.12.48",
41+
"@types/jest": "^26.0.4",
42+
"@types/loadable__component": "^5.10.0",
43+
"@types/node": "^14.0.20",
4344
"@types/react": "^16.9.41",
4445
"@types/react-dom": "^16.9.8",
45-
"@types/react-helmet": "^5.0.16",
46+
"@types/react-helmet": "^6.0.0",
4647
"@types/styled-system": "^5.1.9",
4748
"@types/testing-library__cypress": "^5.0.6",
4849
"@types/testing-library__jest-dom": "^5.9.1",
4950
"@types/theme-ui": "^0.3.4",
50-
"@typescript-eslint/eslint-plugin": "^2.34.0",
51-
"@typescript-eslint/parser": "^2.34.0",
51+
"@typescript-eslint/eslint-plugin": "^3.6.0",
52+
"@typescript-eslint/parser": "^3.6.0",
5253
"concurrently": "^5.2.0",
5354
"cross-env": "^7.0.2",
5455
"cypress": "^4.10.0",

‎renovate.json5

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
},
1818
{
1919
groupName: "types",
20-
packagePatterns: ["^@types"],
20+
packagePatterns: ["^@types/"],
2121
// only upgrade types with approval as they can break transitives
2222
masterIssueApproval: true,
2323
},

‎themes/gatsby-theme-minimal-blog/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
},
2222
"dependencies": {
2323
"@lekoarts/gatsby-theme-minimal-blog-core": "^2.3.10",
24+
"@loadable/component": "^5.13.1",
2425
"@theme-ui/color": "^0.3.1",
2526
"@theme-ui/components": "^0.3.1",
2627
"@theme-ui/presets": "^0.3.0",

0 commit comments

Comments
 (0)