perf(example): Reduce bundle size (pmndrs#1096)

* build(script): add `build:analyze` script * build: bump version for package `webpack-bundle-analyzer` * build: add `@react-three/babel` * perf: render `three` objects with custom canvas * fix: resize for canvas * fix: extend `PlaneBufferGeometry` for drei's Plane * build: use prism theme from `prism-react-renderer` instead
ptzagk · Jul 18, 2022 · 785e034 · 785e034
1 parent 8284334
commit 785e034
Show file tree

Hide file tree

Showing 9 changed files with 111 additions and 359 deletions.
diff --git a/examples/config-overrides.js b/examples/config-overrides.js
@@ -1,6 +1,9 @@
-const { override } = require('customize-cra')
+const { addWebpackPlugin, override, addBabelPlugin } = require('customize-cra')
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 
-module.exports = override(
-  //addWebpackPlugin(new BundleAnalyzerPlugin())
-)
+const overrides = [
+  addBabelPlugin('module:@react-three/babel'),
+  process.env.BUNDLE_ANALYZE === 'true' ? addWebpackPlugin(new BundleAnalyzerPlugin()) : undefined,
+]
+
+module.exports = override(...overrides.filter((config) => config))
diff --git a/examples/package.json b/examples/package.json
@@ -8,7 +8,6 @@
     "@react-three/postprocessing": "^2.4.6",
     "meshline": "^2.0.4",
     "prism-react-renderer": "^1.2.1",
-    "prismjs": "1.23.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "three": "^0.141.0",
@@ -17,6 +16,7 @@
   "scripts": {
     "start": "react-app-rewired start",
     "build": "react-app-rewired build",
+    "build:analyze": "BUNDLE_ANALYZE=true yarn build",
     "test": "react-app-rewired test",
     "eject": "react-scripts eject"
   },
@@ -44,12 +44,13 @@
     "printWidth": 120
   },
   "devDependencies": {
+    "@react-three/babel": "^0.1.1",
     "@testing-library/jest-dom": "^5.11.0",
     "@testing-library/react": "^10.4.3",
     "@testing-library/user-event": "^12.0.11",
     "customize-cra": "^1.0.0",
     "react-app-rewired": "^2.2.1",
     "react-scripts": "^5.0.1",
-    "webpack-bundle-analyzer": "^3.8.0"
+    "webpack-bundle-analyzer": "^4.5.0"
   }
 }
diff --git a/examples/public/index.html b/examples/public/index.html
@@ -29,6 +29,7 @@
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
+    <canvas id="backdrop" className="canvas-container" ></canvas>
     <div id="root"></div>
     <!--
       This HTML file is a template.

diff --git a/examples/src/App.js b/examples/src/App.js
@@ -1,6 +1,5 @@
 import create from 'zustand'
 import CodePreview from './components/CodePreview'
-import Backdrop from './components/Backdrop'
 import Details from './components/Details'
 import code from './resources/code'
 
@@ -21,17 +20,14 @@ function Counter() {
 
 export default function App() {
   return (
-    <>
-      <Backdrop />
-      <div className="main">
-        <div className="code">
-          <div className="code-container">
-            <CodePreview code={code} />
-            <Counter />
-          </div>
+    <div className="main">
+      <div className="code">
+        <div className="code-container">
+          <CodePreview code={code} />
+          <Counter />
         </div>
-        <Details />
       </div>
-    </>
+      <Details />
+    </div>
   )
 }
diff --git a/examples/src/components/Backdrop.js b/examples/src/components/Backdrop.js
@@ -1,20 +1,14 @@
 import { Suspense, useRef } from 'react'
-import { Canvas } from '@react-three/fiber'
 import Effects from './Effects'
 import Scene from './Scene'
 
 export default function Backdrop() {
   const dof = useRef()
+
   return (
-    <Canvas
-      className="canvas-container"
-      orthographic
-      gl={{ powerPreference: 'high-performance', antialias: false, stencil: false, alpha: false, depth: false }}
-      camera={{ zoom: 5, position: [0, 0, 200], far: 300, near: 0 }}>
-      <Suspense fallback={null}>
-        <Scene dof={dof} />
-      </Suspense>
+    <Suspense fallback={null}>
+      <Scene dof={dof} />
       <Effects ref={dof} />
-    </Canvas>
+    </Suspense>
   )
 }
diff --git a/examples/src/components/CodePreview.js b/examples/src/components/CodePreview.js
@@ -1,12 +1,10 @@
 import Highlight, { defaultProps } from 'prism-react-renderer'
 import CopyButton from './CopyButton'
-import 'prismjs'
-import 'prismjs/components/prism-jsx.min'
-import 'prismjs/themes/prism-okaidia.css'
+import theme from 'prism-react-renderer/themes/okaidia'
 
 export default function CodePreview({ code, ...props }) {
   return (
-    <Highlight {...defaultProps} className="language-jsx" code={code} language="jsx" theme={undefined}>
+    <Highlight {...defaultProps} className="language-jsx" code={code} language="jsx" theme={theme}>
       {({ className, style, tokens, getLineProps, getTokenProps }) => (
         // define how each line is to be rendered in the code block,
         // position is set to relative so the copy button can align to bottom right

diff --git a/examples/src/components/Scene.js b/examples/src/components/Scene.js
@@ -1,7 +1,8 @@
 import * as THREE from 'three'
+import { PlaneBufferGeometry } from 'three'
 import { useRef, useState } from 'react'
 import { Plane, useAspect, useTexture } from '@react-three/drei'
-import { useFrame } from '@react-three/fiber'
+import { useFrame, extend } from '@react-three/fiber'
 import Fireflies from './Fireflies'
 import bgUrl from '../resources/bg.jpg'
 import starsUrl from '../resources/stars.png'
@@ -11,6 +12,9 @@ import leaves1Url from '../resources/leaves1.png'
 import leaves2Url from '../resources/leaves2.png'
 import '../materials/layerMaterial'
 
+// PlaneBufferGeometry is needed for Plane
+extend({ PlaneBufferGeometry })
+
 export default function Scene({ dof }) {
   const scaleN = useAspect(16, 10, 1.05)
   const scaleW = useAspect(22, 10, 1.05)

diff --git a/examples/src/index.js b/examples/src/index.js
@@ -1,7 +1,24 @@
 import { createRoot } from 'react-dom/client'
+import { createRoot as createCanvasRoot, events } from '@react-three/fiber'
 import './styles.css'
 import App from './App'
+import Backdrop from './components/Backdrop'
 
 const root = createRoot(document.getElementById('root'))
 
 root.render(<App />)
+
+const backdrop = createCanvasRoot(document.getElementById('backdrop'))
+
+backdrop
+  .configure({
+    events,
+    orthographic: true,
+    gl: { powerPreference: 'high-performance', antialias: false, stencil: false, alpha: false, depth: false },
+    camera: { zoom: 5, position: [0, 0, 200], far: 300, near: 0 },
+  })
+  .render(<Backdrop />)
+
+window.addEventListener('resize', () => {
+  backdrop.configure({ width: window.innerWidth, height: window.innerHeight })
+})