Skip to content

Commit 330d006

Browse files
levithomasonlevithomason
authored
perf(docs): improve doc bundle and load experience (#865)
* perf(webpack): remove dupe modules, use more externals * docs(index): add loading spinner
1 parent aa8d409 commit 330d006

File tree

5 files changed

+59
-16
lines changed

5 files changed

+59
-16
lines changed

‎docs/app/Components/ComponentDoc/ComponentExample.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import * as Babel from 'babel-standalone'
22
import _ from 'lodash'
33
import React, { Component, createElement, isValidElement, PropTypes } from 'react'
44
import { renderToStaticMarkup } from 'react-dom/server'
5-
import { html } from 'js-beautify'
5+
import html from 'html-beautify'
66
import copyToClipboard from 'copy-to-clipboard'
77

88
import { exampleContext, repoURL } from 'docs/app/utils'

‎docs/app/index.ejs‎

Lines changed: 49 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,12 @@
33
<head>
44
<meta charset="UTF-8">
55
<link rel="shortcut icon" type="image/x-icon" href=<%= __BASE__ + 'logo.png' %> />
6-
<script
7-
src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/<%= htmlWebpackPlugin.options.versions.babel %>/babel.min.js"
8-
data-presets="es2015,react,stage1"
9-
></script>
106
<link rel="stylesheet"
117
href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/<%= htmlWebpackPlugin.options.versions.sui %>/semantic.min.css">
12-
<script src="//cdnjs.cloudflare.com/ajax/libs/Faker/<%= htmlWebpackPlugin.options.versions.faker %>/faker.min.js"></script>
13-
<script src="//cdnjs.cloudflare.com/ajax/libs/anchor-js/3.2.1/anchor.min.js"></script>
148
<title>Semantic UI React</title>
159
<script>
1610
// Apply gh-pages SPA redirect that was applied in 404.html
11+
// ----------------------------------------
1712
(function() {
1813
var redirect = sessionStorage.redirect
1914
delete sessionStorage.redirect
@@ -23,7 +18,54 @@
2318
})()
2419
</script>
2520
</head>
26-
<body>
21+
<body class="dimmed dimmable">
22+
<div id="docs-loading-dimmer" class="ui active page dimmer">
23+
<div class="content">
24+
<div class="center">
25+
<div class="ui large text loader">
26+
<div class="ui inverted teal header">
27+
Loading docs...
28+
<div class="sub header">
29+
Semantic-UI-React
30+
v<%= htmlWebpackPlugin.options.versions.suir %>
31+
</div>
32+
</div>
33+
</div>
34+
</div>
35+
</div>
36+
</div>
37+
<script>
38+
(function() {
39+
var delay = 500
40+
var dimmer = document.querySelector('#docs-loading-dimmer')
41+
dimmer.style.pointerEvents = 'none'
42+
dimmer.style.transition = 'opacity ' + delay + 'ms linear'
43+
44+
function removeDimmer() {
45+
dimmer.style.opacity = '0'
46+
47+
setTimeout(() => {
48+
var dimmer = document.querySelector('#docs-loading-dimmer')
49+
50+
document.body.removeChild(dimmer)
51+
document.body.setAttribute("class", "")
52+
window.removeEventListener('load', removeDimmer)
53+
}, delay)
54+
}
55+
56+
window.addEventListener('load', removeDimmer)
57+
}())
58+
</script>
59+
<script src="//cdnjs.cloudflare.com/ajax/libs/anchor-js/3.2.1/anchor.min.js"></script>
60+
<script
61+
src="//cdnjs.cloudflare.com/ajax/libs/babel-standalone/<%= htmlWebpackPlugin.options.versions.babel %>/babel.min.js"
62+
data-presets="es2015,react,stage1"
63+
></script>
64+
<script src="//cdnjs.cloudflare.com/ajax/libs/Faker/<%= htmlWebpackPlugin.options.versions.faker %>/faker.min.js"></script>
65+
<script src="//cdnjs.cloudflare.com/ajax/libs/js-beautify/<%= htmlWebpackPlugin.options.versions.jsBeautify %>/beautify-html.min.js"></script>
66+
<script src="//cdnjs.cloudflare.com/ajax/libs/react/<%= htmlWebpackPlugin.options.versions.react %>/react.min.js"></script>
67+
<script src="//cdnjs.cloudflare.com/ajax/libs/react/<%= htmlWebpackPlugin.options.versions.reactDOM %>/react-dom.min.js"></script>
68+
<script src="//cdnjs.cloudflare.com/ajax/libs/react/<%= htmlWebpackPlugin.options.versions.reactDOM %>/react-dom-server.min.js"></script>
2769
<style>
2870
html, body {
2971
background: #f7f7f7;

‎package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,6 @@
5858
"babel-preset-react": "^6.5.0",
5959
"babel-preset-stage-1": "^6.5.0",
6060
"babel-standalone": "^6.18.1",
61-
"brace": "^0.9.0",
6261
"chai": "^3.5.0",
6362
"chai-enzyme": "^0.6.0",
6463
"connect-history-api-fallback": "^1.2.0",

‎webpack.config.js‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -81,8 +81,12 @@ webpackConfig.plugins = [
8181
versions: {
8282
babel: require('babel-standalone/package.json').version,
8383
sui: require('semantic-ui-css/package.json').version,
84+
suir: require('./package.json').version,
8485
faker: require('faker/package.json').version,
8586
lodash: require('lodash/package.json').version,
87+
react: require('react/package.json').version,
88+
reactDOM: require('react-dom/package.json').version,
89+
jsBeautify: require('js-beautify/package.json').version,
8690
},
8791
}),
8892
]
@@ -170,11 +174,6 @@ if (__TEST__ || argv.localModules) {
170174
},
171175
]
172176
} else {
173-
// we're not using local modules, we're loading deps via CDNs
174-
webpackConfig.entry.vendor = _.without(webpackConfig.entry.vendor, [
175-
'faker',
176-
])
177-
178177
// these are browser ready modules or aliased to empty
179178
// do not parse their source for faster builds
180179
webpackConfig.module.noParse = [
@@ -191,7 +190,11 @@ if (__TEST__ || argv.localModules) {
191190
webpackConfig.externals = {
192191
faker: 'faker',
193192
'anchor-js': 'AnchorJS',
194-
Babel: 'babel-standalone',
193+
'babel-standalone': 'Babel',
194+
react: 'React',
195+
'react-dom': 'ReactDOM',
196+
'react-dom/server': 'ReactDOMServer',
197+
'html-beautify': 'html_beautify',
195198
}
196199
}
197200

‎webpack.umd.config.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@ const webpackUMDConfig = {
2222
externals: {
2323
react: 'React',
2424
'react-dom': 'ReactDOM',
25-
Babel: 'babel-standalone',
2625
},
2726
plugins: [
2827
new webpack.optimize.OccurrenceOrderPlugin(),

0 commit comments

Comments
 (0)