Do not load unnecessary script files (#4193)

app/javascript/mastodon/main.js

@@ -1,12 +1,6 @@
-const perf = require('./performance');
+import ready from './ready';
 
-function onDomContentLoaded(callback) {
+const perf = require('./performance');
-  if (document.readyState !== 'loading') {
-    callback();
-  } else {
-    document.addEventListener('DOMContentLoaded', callback);
-  }
-}
 
 function main() {
   perf.start('main()');
@@ -24,7 +18,7 @@ function main() {
     }
   }
 
-  onDomContentLoaded(() => {
+  ready(() => {
     const mountNode = document.getElementById('mastodon');
     const props = JSON.parse(mountNode.getAttribute('data-props'));
 

app/javascript/mastodon/ready.js

@@ -0,0 +1,7 @@
+export default function ready(loaded) {
+  if (['interactive', 'complete'].includes(document.readyState)) {
+    loaded();
+  } else {
+    document.addEventListener('DOMContentLoaded', loaded);
+  }
+}

app/javascript/packs/about.js

@@ -0,0 +1,24 @@
+import TimelineContainer from '../mastodon/containers/timeline_container';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import loadPolyfills from '../mastodon/load_polyfills';
+import ready from '../mastodon/ready';
+
+require.context('../images/', true);
+
+function loaded() {
+  const mountNode = document.getElementById('mastodon-timeline');
+
+  if (mountNode !== null) {
+    const props = JSON.parse(mountNode.getAttribute('data-props'));
+    ReactDOM.render(<TimelineContainer {...props} />, mountNode);
+  }
+}
+
+function main() {
+  ready(loaded);
+}
+
+loadPolyfills().then(main).catch(error => {
+  console.error(error);
+});

app/javascript/packs/public.js

@@ -4,9 +4,7 @@ import { delegate } from 'rails-ujs';
 import emojify from '../mastodon/emoji';
 import { getLocale } from '../mastodon/locales';
 import loadPolyfills from '../mastodon/load_polyfills';
-import TimelineContainer from '../mastodon/containers/timeline_container';
+import ready from '../mastodon/ready';
-import React from 'react';
-import ReactDOM from 'react-dom';
 
 require.context('../images/', true);
 
@@ -39,21 +37,10 @@ function loaded() {
     const datetime = new Date(content.getAttribute('datetime'));
     content.textContent = relativeFormat.format(datetime);;
   });
-
-  const mountNode = document.getElementById('mastodon-timeline');
-
-  if (mountNode !== null) {
-    const props = JSON.parse(mountNode.getAttribute('data-props'));
-    ReactDOM.render(<TimelineContainer {...props} />, mountNode);
-  }
 }
 
 function main() {
-  if (['interactive', 'complete'].includes(document.readyState)) {
+  ready(loaded);
-    loaded();
-  } else {
-    document.addEventListener('DOMContentLoaded', loaded);
-  }
 
   delegate(document, '.video-player video', 'click', ({ target }) => {
     if (target.paused) {

app/views/about/show.html.haml

@@ -1,11 +1,10 @@
-- content_for :header_tags do
-  %script#initial-state{ type: 'application/json' }!= json_escape(@initial_state_json)
-  = javascript_pack_tag 'public', integrity: true, crossorigin: 'anonymous'
-
 - content_for :page_title do
   = site_hostname
 
 - content_for :header_tags do
+  %script#initial-state{ type: 'application/json' }!= json_escape(@initial_state_json)
+  = javascript_pack_tag 'about', integrity: true, crossorigin: 'anonymous'
+
   %meta{ property: 'og:site_name', content: site_title }/
   %meta{ property: 'og:url', content: about_url }/
   %meta{ property: 'og:type', content: 'website' }/