Merge pull request #1989 from ethereum/loadingImprove

loading performance improvement

apps/remix-ide/src/app.js

@@ -1,16 +1,6 @@
 'use strict'
 import { RunTab, makeUdapp } from './app/udapp'
-import { RemixEngine } from './remixEngine'
 import { RemixAppManager } from './remixAppManager'
-import { ThemeModule } from './app/tabs/theme-module'
-import { NetworkModule } from './app/tabs/network-module'
-import { Web3ProviderModule } from './app/tabs/web3-provider'
-import { SidePanel } from './app/components/side-panel'
-import { HiddenPanel } from './app/components/hidden-panel'
-import { VerticalIcons } from './app/components/vertical-icons'
-import { LandingPage } from './app/ui/landing-page/landing-page'
-import { MainPanel } from './app/components/main-panel'
-import { PermissionHandlerPlugin } from './app/plugins/permission-handler-plugin'
 
 import { WalkthroughService } from './walkthroughService'
 
@@ -95,7 +85,7 @@ class AppComponent {
     const pluginLoader = self.appManager.pluginLoader
     self.panels = {}
     self.workspace = pluginLoader.get()
-    self.engine = new RemixEngine()
+    self.engine = new (await import('./remixEngine')).RemixEngine
     self.engine.register(appManager)
 
     const matomoDomains = {
@@ -126,7 +116,7 @@ class AppComponent {
     // ----------------- gist service ---------------------------------
     self.gistHandler = new GistHandler()
     // ----------------- theme service ---------------------------------
-    self.themeModule = new ThemeModule()
+    self.themeModule = new (await import('./app/tabs/theme-module')).ThemeModule()
     Registry.getInstance().put({ api: self.themeModule, name: 'themeModule' })
 
     // ----------------- editor service ----------------------------
@@ -159,9 +149,9 @@ class AppComponent {
     // service which fetch contract artifacts from sourve-verify, put artifacts in remix and compile it
     const fetchAndCompile = new FetchAndCompile()
     // ----------------- network service (resolve network id / name) -----
-    const networkModule = new NetworkModule(blockchain)
+    const networkModule = new (await import('./app/tabs/network-module')).NetworkModule(blockchain)
     // ----------------- represent the current selected web3 provider ----
-    const web3Provider = new Web3ProviderModule(blockchain)
+    const web3Provider = new (await import('./app/tabs/web3-provider')).Web3ProviderModule(blockchain)
     const hardhatProvider = new HardhatProvider(blockchain)
     // ----------------- convert offset to line/column service -----------
     const offsetToLineColumnConverter = new OffsetToLineColumnConverter()
@@ -192,7 +182,7 @@ class AppComponent {
     const configPlugin = new ConfigPlugin()
     self.layout = new Layout()
     
-    const permissionHandler = new PermissionHandlerPlugin()
+    const permissionHandler = new (await import('./app/plugins/permission-handler-plugin')).PermissionHandlerPlugin()
 
     self.engine.register([
       permissionHandler,
@@ -219,22 +209,22 @@ class AppComponent {
     ])
 
     // LAYOUT & SYSTEM VIEWS
-    const appPanel = new MainPanel()
+    const appPanel = new (await import('./app/components/main-panel')).MainPanel()
     Registry.getInstance().put({ api: self.mainview, name: 'mainview' })
     const tabProxy = new TabProxy(fileManager, editor)
     self.engine.register([appPanel, tabProxy])
 
     // those views depend on app_manager
-    self.menuicons = new VerticalIcons()
-    self.sidePanel = new SidePanel()
-    self.hiddenPanel = new HiddenPanel()
+    self.menuicons = new (await import('./app/components/vertical-icons')).VerticalIcons()
+    self.sidePanel = new (await import('./app/components/side-panel')).SidePanel()
+    self.hiddenPanel = new (await import('./app/components/hidden-panel')).HiddenPanel()
 
     const pluginManagerComponent = new PluginManagerComponent(
       appManager,
       self.engine
     )
     const filePanel = new FilePanel(appManager)
-    const landingPage = new LandingPage(
+    const landingPage = new (await import('./app/ui/landing-page/landing-page')).LandingPage(
       appManager,
       self.menuicons,
       fileManager,

apps/remix-ide/src/index.tsx

@@ -1,16 +1,37 @@
 // eslint-disable-next-line no-use-before-define
 import React from 'react'
-import ReactDOM from 'react-dom'
-import AppComponent from './app'
+import { render } from 'react-dom'
 // eslint-disable-next-line no-unused-vars
 import { RemixApp } from '@remix-ui/app'
 
-const appComponent = new AppComponent()
-appComponent.run()
+(function () {
+  render(
+    <React.StrictMode>
+        <div style={{ display: 'block' }} className='centered'>
+          <svg id="Ebene_2" data-name="Ebene 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 100">
+            <path d="M91.84,35a.09.09,0,0,1-.1-.07,41,41,0,0,0-79.48,0,.09.09,0,0,1-.1.07C9.45,35,1,35.35,1,42.53c0,8.56,1,16,6,20.32,2.16,1.85,5.81,2.3,9.27,2.22a44.4,44.4,0,0,0,6.45-.68.09.09,0,0,0,.06-.15A34.81,34.81,0,0,1,17,45c0-.1,0-.21,0-.31a35,35,0,0,1,70,0c0,.1,0,.21,0,.31a34.81,34.81,0,0,1-5.78,19.24.09.09,0,0,0,.06.15,44.4,44.4,0,0,0,6.45.68c3.46.08,7.11-.37,9.27-2.22,5-4.27,6-11.76,6-20.32C103,35.35,94.55,35,91.84,35Z"/>
+            <path d="M52,74,25.4,65.13a.1.1,0,0,0-.1.17L51.93,91.93a.1.1,0,0,0,.14,0L78.7,65.3a.1.1,0,0,0-.1-.17L52,74A.06.06,0,0,1,52,74Z"/>
+            <path d="M75.68,46.9,82,45a.09.09,0,0,0,.08-.09,29.91,29.91,0,0,0-.87-6.94.11.11,0,0,0-.09-.08l-6.43-.58a.1.1,0,0,1-.06-.18l4.78-4.18a.13.13,0,0,0,0-.12,30.19,30.19,0,0,0-3.65-6.07.09.09,0,0,0-.11,0l-5.91,2a.1.1,0,0,1-.12-.14L72.19,23a.11.11,0,0,0,0-.12,29.86,29.86,0,0,0-5.84-4.13.09.09,0,0,0-.11,0l-4.47,4.13a.1.1,0,0,1-.17-.07l.09-6a.1.1,0,0,0-.07-.1,30.54,30.54,0,0,0-7-1.47.1.1,0,0,0-.1.07l-2.38,5.54a.1.1,0,0,1-.18,0l-2.37-5.54a.11.11,0,0,0-.11-.06,30,30,0,0,0-7,1.48.12.12,0,0,0-.07.1l.08,6.05a.09.09,0,0,1-.16.07L37.8,18.76a.11.11,0,0,0-.12,0,29.75,29.75,0,0,0-5.83,4.13.11.11,0,0,0,0,.12l2.59,5.6a.11.11,0,0,1-.13.14l-5.9-2a.11.11,0,0,0-.12,0,30.23,30.23,0,0,0-3.62,6.08.11.11,0,0,0,0,.12l4.79,4.19a.1.1,0,0,1-.06.17L23,37.91a.1.1,0,0,0-.09.07A29.9,29.9,0,0,0,22,44.92a.1.1,0,0,0,.07.1L28.4,47a.1.1,0,0,1,0,.18l-5.84,3.26a.16.16,0,0,0,0,.11,30.17,30.17,0,0,0,2.1,6.76c.32.71.67,1.4,1,2.08a.1.1,0,0,0,.06,0L52,68.16H52l26.34-8.78a.1.1,0,0,0,.06-.05,30.48,30.48,0,0,0,3.11-8.88.1.1,0,0,0-.05-.11l-5.83-3.26A.1.1,0,0,1,75.68,46.9Z"/>
+          </svg>
+          <div className="info-secondary splash">
+            REMIX IDE
+          </div>
+        </div>
+    </React.StrictMode>,
+    document.getElementById('root')
+  )
+})()
 
-ReactDOM.render(
-  <React.StrictMode>
-    <RemixApp app={appComponent}></RemixApp>
-  </React.StrictMode>,
-  document.getElementById('root')
-)
+import ('./app').then((AppComponent) => {
+  const appComponent = new AppComponent.default()
+  appComponent.run().then(() => {
+    render(
+      <React.StrictMode>
+          <RemixApp app={appComponent} />
+      </React.StrictMode>,
+      document.getElementById('root')
+    )
+  })
+}).catch(err => {
+  console.log('Error on loading Remix:', err)
+})

apps/remix-ide/tsconfig.json

@@ -4,10 +4,8 @@
     "jsx": "react",
     "allowJs": true,
     "esModuleInterop": true,
-    "resolveJsonModule": true,
     "allowSyntheticDefaultImports": true,
     "types": ["node", "jest"],
-    "module": "es6",
     "resolveJsonModule": true
   },
   "files": [