Skip to content

Commit c94760b

Browse files
gregbergegregberge
committed
perf: optimize rollup config
Also remove warning from `load` and `preload` methods.
1 parent 7ffaa4c commit c94760b

File tree

6 files changed

+1811
-880
lines changed

6 files changed

+1811
-880
lines changed

‎package.json

Lines changed: 22 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,11 @@
66
"bundlesize": [
77
{
88
"path": "./packages/component/dist/loadable.min.js",
9-
"maxSize": "3.2 kB"
9+
"maxSize": "2 kB"
10+
},
11+
{
12+
"path": "./packages/component/dist/loadable.esm.js",
13+
"maxSize": "3 kB"
1014
}
1115
],
1216
"scripts": {
@@ -19,38 +23,41 @@
1923
"test": "jest"
2024
},
2125
"devDependencies": {
22-
"@babel/cli": "^7.4.3",
23-
"@babel/core": "^7.4.3",
26+
"@babel/cli": "^7.4.4",
27+
"@babel/core": "^7.4.4",
2428
"@babel/node": "^7.2.2",
25-
"@babel/plugin-proposal-class-properties": "^7.4.0",
26-
"@babel/preset-env": "^7.4.3",
29+
"@babel/plugin-proposal-class-properties": "^7.4.4",
30+
"@babel/plugin-transform-runtime": "^7.4.4",
31+
"@babel/preset-env": "^7.4.4",
2732
"@babel/preset-react": "^7.0.0",
2833
"babel-core": "^7.0.0-bridge.0",
2934
"babel-eslint": "^10.0.1",
30-
"babel-jest": "^24.7.1",
35+
"babel-jest": "^24.8.0",
36+
"babel-plugin-annotate-pure-calls": "^0.4.0",
3137
"bundlesize": "^0.17.1",
3238
"conventional-github-releaser": "^3.1.2",
3339
"cross-env": "^5.2.0",
3440
"eslint": "^5.16.0",
3541
"eslint-config-airbnb": "^17.1.0",
36-
"eslint-config-prettier": "^4.1.0",
37-
"eslint-plugin-import": "^2.16.0",
42+
"eslint-config-prettier": "^4.2.0",
43+
"eslint-plugin-import": "^2.17.2",
3844
"eslint-plugin-jsx-a11y": "^6.2.1",
39-
"eslint-plugin-react": "^7.12.4",
40-
"jest": "^24.7.1",
45+
"eslint-plugin-react": "^7.13.0",
46+
"jest": "^24.8.0",
4147
"jest-dom": "^3.2.2",
42-
"lerna": "^3.13.2",
43-
"prettier": "^1.16.4",
48+
"lerna": "^3.13.4",
49+
"prettier": "^1.17.0",
4450
"react": "^16.8.6",
4551
"react-dom": "^16.8.6",
4652
"react-testing-library": "^7.0.0",
4753
"regenerator-runtime": "^0.13.2",
48-
"rollup": "^1.9.3",
54+
"rollup": "^1.11.3",
4955
"rollup-plugin-babel": "^4.3.2",
5056
"rollup-plugin-commonjs": "^9.3.4",
51-
"rollup-plugin-node-resolve": "^4.2.2",
57+
"rollup-plugin-node-resolve": "^4.2.4",
5258
"rollup-plugin-replace": "^2.2.0",
53-
"rollup-plugin-uglify": "^6.0.2",
59+
"rollup-plugin-size-snapshot": "^0.8.0",
60+
"rollup-plugin-terser": "^4.0.4",
5461
"shx": "^0.3.2"
5562
}
5663
}

‎packages/component/.size-snapshot.json

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"dist/loadable.cjs.js": {
3+
"bundled": 10177,
4+
"minified": 5008,
5+
"gzipped": 1931
6+
},
7+
"dist/loadable.esm.js": {
8+
"bundled": 9858,
9+
"minified": 4743,
10+
"gzipped": 1857,
11+
"treeshaked": {
12+
"rollup": {
13+
"code": 3158,
14+
"import_statements": 60
15+
},
16+
"webpack": {
17+
"code": 4211
18+
}
19+
}
20+
}
21+
}

‎packages/component/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,7 @@
33
"description": "React code splitting made easy.",
44
"version": "5.9.0",
55
"main": "dist/loadable.cjs.js",
6-
"module": "dist/loadable.es.js",
7-
"jsnext:main": "dist/loadable.es.js",
6+
"module": "dist/loadable.esm.js",
87
"repository": "git@github.com:smooth-code/loadable-components.git",
98
"author": "Greg Bergé <berge.greg@gmail.com>",
109
"publishConfig": {
@@ -34,6 +33,7 @@
3433
"react": ">=16.3.0"
3534
},
3635
"dependencies": {
36+
"@babel/runtime": "^7.4.4",
3737
"hoist-non-react-statics": "^3.3.0"
3838
}
3939
}

‎packages/component/rollup.config.js

Lines changed: 71 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,84 @@
1-
/* eslint-disable import/no-extraneous-dependencies, import/no-mutable-exports */
2-
import path from 'path'
3-
import resolve from 'rollup-plugin-node-resolve'
1+
/* eslint-disable import/no-extraneous-dependencies */
2+
import nodeResolve from 'rollup-plugin-node-resolve'
43
import babel from 'rollup-plugin-babel'
54
import replace from 'rollup-plugin-replace'
65
import commonjs from 'rollup-plugin-commonjs'
7-
import { uglify } from 'rollup-plugin-uglify'
6+
import { terser } from 'rollup-plugin-terser'
7+
import { sizeSnapshot } from 'rollup-plugin-size-snapshot'
88
import pkg from './package.json'
99

10-
// eslint-disable-next-line
11-
const babelConfig = require('../../babel.config.js')
12-
const SOURCE_DIR = path.resolve(__dirname, 'src')
13-
const DIST_DIR = path.resolve(__dirname, 'dist')
14-
const buildName = 'loadable'
15-
16-
const baseConfig = {
17-
input: `${SOURCE_DIR}/index.js`,
18-
plugins: [babel({ exclude: '**/node_modules/**', ...babelConfig })],
10+
const input = 'src/index.js'
11+
const name = 'loadable'
12+
const globals = {
13+
react: 'React',
14+
'hoist-non-react-statics': 'hoistNonReactStatics',
1915
}
2016

21-
const esConfig = Object.assign({}, baseConfig, {
22-
output: {
23-
file: `${DIST_DIR}/${buildName}.es.js`,
24-
format: 'es',
25-
},
26-
external: [
27-
...Object.keys(pkg.peerDependencies),
28-
...Object.keys(pkg.dependencies),
17+
const external = id => !id.startsWith('.') && !id.startsWith('/')
18+
19+
const getBabelOptions = ({ useESModules }) => ({
20+
exclude: '**/node_modules/**',
21+
runtimeHelpers: true,
22+
presets: [['@babel/preset-react', { useBuiltIns: true }]],
23+
plugins: [
24+
'@babel/plugin-proposal-class-properties',
25+
'babel-plugin-annotate-pure-calls',
26+
['@babel/plugin-transform-runtime', { useESModules }],
2927
],
3028
})
3129

32-
const cjsConfig = Object.assign({}, esConfig, {
33-
output: {
34-
file: `${DIST_DIR}/${buildName}.cjs.js`,
35-
format: 'cjs',
36-
exports: 'named',
30+
export default [
31+
// umd
32+
{
33+
input,
34+
output: {
35+
file: `dist/loadable.js`,
36+
format: 'umd',
37+
name,
38+
globals,
39+
exports: 'named',
40+
sourcemap: false,
41+
},
42+
external: Object.keys(globals),
43+
plugins: [
44+
babel(getBabelOptions({ useESModules: true })),
45+
nodeResolve(),
46+
commonjs(),
47+
replace({ 'process.env.NODE_ENV': JSON.stringify('development') }),
48+
],
3749
},
38-
})
39-
40-
const globals = { react: 'React' }
41-
42-
const umdConfig = Object.assign({}, baseConfig, {
43-
output: {
44-
name: 'loadable',
45-
file: `${DIST_DIR}/${buildName}.js`,
46-
format: 'umd',
47-
globals,
48-
exports: 'named',
49-
sourcemap: false,
50+
// min
51+
{
52+
input,
53+
output: {
54+
file: 'dist/loadable.min.js',
55+
format: 'umd',
56+
name,
57+
globals,
58+
exports: 'named',
59+
sourcemap: false,
60+
},
61+
external: Object.keys(globals),
62+
plugins: [
63+
babel(getBabelOptions({ useESModules: true })),
64+
nodeResolve(),
65+
commonjs(),
66+
replace({ 'process.env.NODE_ENV': JSON.stringify('production') }),
67+
terser(),
68+
],
5069
},
51-
external: Object.keys(globals),
52-
plugins: [...baseConfig.plugins, resolve({ browser: true }), commonjs()],
53-
})
54-
55-
const minConfig = Object.assign({}, umdConfig, {
56-
output: {
57-
...umdConfig.output,
58-
file: `${DIST_DIR}/${buildName}.min.js`,
70+
// cjs
71+
{
72+
input,
73+
output: { file: pkg.main, format: 'cjs', exports: 'named' },
74+
external,
75+
plugins: [babel(getBabelOptions({ useESModules: false })), sizeSnapshot()],
5976
},
60-
plugins: [
61-
...umdConfig.plugins,
62-
replace({ 'process.env.NODE_ENV': JSON.stringify('production') }),
63-
uglify({
64-
compress: {
65-
pure_getters: true,
66-
unsafe: true,
67-
unsafe_comps: true,
68-
warnings: false,
69-
},
70-
}),
71-
],
72-
})
73-
74-
let configs
75-
76-
if (process.env.WATCH_MODE) {
77-
configs = [esConfig]
78-
}
79-
80-
configs = [esConfig, cjsConfig, umdConfig, minConfig]
81-
82-
export default configs
77+
// esm
78+
{
79+
input,
80+
output: { file: pkg.module, format: 'esm' },
81+
external,
82+
plugins: [babel(getBabelOptions({ useESModules: true })), sizeSnapshot()],
83+
},
84+
]

‎packages/component/src/createLoadable.js

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -218,19 +218,12 @@ function createLoadable({ resolve = identity, render, onLoad }) {
218218
<EnhancedInnerLoadable forwardedRef={ref} {...props} />
219219
))
220220

221+
// In future, preload could use `<link rel="preload">`
221222
Loadable.preload = props => {
222-
if (typeof window === 'undefined') {
223-
throw new Error('`preload` cannot be called server-side')
224-
}
225223
ctor.requireAsync(props)
226224
}
227225

228-
Loadable.load = props => {
229-
if (typeof window === 'undefined') {
230-
throw new Error('`load` cannot be called server-side')
231-
}
232-
return ctor.requireAsync(props)
233-
}
226+
Loadable.load = props => ctor.requireAsync(props)
234227

235228
return Loadable
236229
}

0 commit comments

Comments
 (0)