perf(docs): improve doc bundle and load experience (#865)

* perf(webpack): remove dupe modules, use more externals * docs(index): add loading spinner
Semantic-Org · Nov 16, 2016 · 330d006 · 330d006
1 parent aa8d409
commit 330d006
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 16 deletions.
diff --git a/docs/app/Components/ComponentDoc/ComponentExample.js b/docs/app/Components/ComponentDoc/ComponentExample.js
@@ -2,7 +2,7 @@ import * as Babel from 'babel-standalone'
 import _ from 'lodash'
 import React, { Component, createElement, isValidElement, PropTypes } from 'react'
 import { renderToStaticMarkup } from 'react-dom/server'
-import { html } from 'js-beautify'
+import html from 'html-beautify'
 import copyToClipboard from 'copy-to-clipboard'
 
 import { exampleContext, repoURL } from 'docs/app/utils'

diff --git a/docs/app/index.ejs b/docs/app/index.ejs
@@ -3,17 +3,12 @@
 <head>
   <meta charset="UTF-8">
   <link rel="shortcut icon" type="image/x-icon" href=<%= __BASE__ + 'logo.png' %> />
-  <script
-    src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/<%= htmlWebpackPlugin.options.versions.babel %>/babel.min.js"
-    data-presets="es2015,react,stage1"
-  ></script>
   <link rel="stylesheet"
         href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/<%= htmlWebpackPlugin.options.versions.sui %>/semantic.min.css">
-  <script src="//cdnjs.cloudflare.com/ajax/libs/Faker/<%= htmlWebpackPlugin.options.versions.faker %>/faker.min.js"></script>
-  <script src="//cdnjs.cloudflare.com/ajax/libs/anchor-js/3.2.1/anchor.min.js"></script>
   <title>Semantic UI React</title>
   <script>
     // Apply gh-pages SPA redirect that was applied in 404.html
+    // ----------------------------------------
     (function() {
       var redirect = sessionStorage.redirect
       delete sessionStorage.redirect
@@ -23,7 +18,54 @@
     })()
   </script>
 </head>
-<body>
+<body class="dimmed dimmable">
+  <div id="docs-loading-dimmer" class="ui active page dimmer">
+    <div class="content">
+      <div class="center">
+        <div class="ui large text loader">
+          <div class="ui inverted teal header">
+            Loading docs...
+            <div class="sub header">
+              Semantic-UI-React
+              v<%= htmlWebpackPlugin.options.versions.suir %>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script>
+    (function() {
+      var delay = 500
+      var dimmer = document.querySelector('#docs-loading-dimmer')
+      dimmer.style.pointerEvents = 'none'
+      dimmer.style.transition = 'opacity ' + delay + 'ms linear'
+
+      function removeDimmer() {
+        dimmer.style.opacity = '0'
+
+        setTimeout(() => {
+          var dimmer = document.querySelector('#docs-loading-dimmer')
+
+          document.body.removeChild(dimmer)
+          document.body.setAttribute("class", "")
+          window.removeEventListener('load', removeDimmer)
+        }, delay)
+      }
+
+      window.addEventListener('load', removeDimmer)
+    }())
+  </script>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/anchor-js/3.2.1/anchor.min.js"></script>
+  <script
+    src="//cdnjs.cloudflare.com/ajax/libs/babel-standalone/<%= htmlWebpackPlugin.options.versions.babel %>/babel.min.js"
+    data-presets="es2015,react,stage1"
+  ></script>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/Faker/<%= htmlWebpackPlugin.options.versions.faker %>/faker.min.js"></script>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/js-beautify/<%= htmlWebpackPlugin.options.versions.jsBeautify %>/beautify-html.min.js"></script>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/react/<%= htmlWebpackPlugin.options.versions.react %>/react.min.js"></script>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/react/<%= htmlWebpackPlugin.options.versions.reactDOM %>/react-dom.min.js"></script>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/react/<%= htmlWebpackPlugin.options.versions.reactDOM %>/react-dom-server.min.js"></script>
   <style>
     html, body {
       background: #f7f7f7;

diff --git a/package.json b/package.json
@@ -58,7 +58,6 @@
     "babel-preset-react": "^6.5.0",
     "babel-preset-stage-1": "^6.5.0",
     "babel-standalone": "^6.18.1",
-    "brace": "^0.9.0",
     "chai": "^3.5.0",
     "chai-enzyme": "^0.6.0",
     "connect-history-api-fallback": "^1.2.0",

diff --git a/webpack.config.js b/webpack.config.js
@@ -81,8 +81,12 @@ webpackConfig.plugins = [
     versions: {
       babel: require('babel-standalone/package.json').version,
       sui: require('semantic-ui-css/package.json').version,
+      suir: require('./package.json').version,
       faker: require('faker/package.json').version,
       lodash: require('lodash/package.json').version,
+      react: require('react/package.json').version,
+      reactDOM: require('react-dom/package.json').version,
+      jsBeautify: require('js-beautify/package.json').version,
     },
   }),
 ]
@@ -170,11 +174,6 @@ if (__TEST__ || argv.localModules) {
     },
   ]
 } else {
-  // we're not using local modules, we're loading deps via CDNs
-  webpackConfig.entry.vendor = _.without(webpackConfig.entry.vendor, [
-    'faker',
-  ])
-
   // these are browser ready modules or aliased to empty
   // do not parse their source for faster builds
   webpackConfig.module.noParse = [
@@ -191,7 +190,11 @@ if (__TEST__ || argv.localModules) {
   webpackConfig.externals = {
     faker: 'faker',
     'anchor-js': 'AnchorJS',
-    Babel: 'babel-standalone',
+    'babel-standalone': 'Babel',
+    react: 'React',
+    'react-dom': 'ReactDOM',
+    'react-dom/server': 'ReactDOMServer',
+    'html-beautify': 'html_beautify',
   }
 }
 

diff --git a/webpack.umd.config.js b/webpack.umd.config.js
@@ -22,7 +22,6 @@ const webpackUMDConfig = {
   externals: {
     react: 'React',
     'react-dom': 'ReactDOM',
-    Babel: 'babel-standalone',
   },
   plugins: [
     new webpack.optimize.OccurrenceOrderPlugin(),