Skip to content

Commit

Permalink
perf: optimize rollup config
Browse files Browse the repository at this point in the history
Also remove warning from `load` and `preload` methods.
  • Loading branch information
gregberge committed May 13, 2019
1 parent 7ffaa4c commit c94760b
Show file tree
Hide file tree
Showing 6 changed files with 1,811 additions and 880 deletions.
37 changes: 22 additions & 15 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,11 @@
"bundlesize": [
{
"path": "./packages/component/dist/loadable.min.js",
"maxSize": "3.2 kB"
"maxSize": "2 kB"
},
{
"path": "./packages/component/dist/loadable.esm.js",
"maxSize": "3 kB"
}
],
"scripts": {
Expand All @@ -19,38 +23,41 @@
"test": "jest"
},
"devDependencies": {
"@babel/cli": "^7.4.3",
"@babel/core": "^7.4.3",
"@babel/cli": "^7.4.4",
"@babel/core": "^7.4.4",
"@babel/node": "^7.2.2",
"@babel/plugin-proposal-class-properties": "^7.4.0",
"@babel/preset-env": "^7.4.3",
"@babel/plugin-proposal-class-properties": "^7.4.4",
"@babel/plugin-transform-runtime": "^7.4.4",
"@babel/preset-env": "^7.4.4",
"@babel/preset-react": "^7.0.0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^24.7.1",
"babel-jest": "^24.8.0",
"babel-plugin-annotate-pure-calls": "^0.4.0",
"bundlesize": "^0.17.1",
"conventional-github-releaser": "^3.1.2",
"cross-env": "^5.2.0",
"eslint": "^5.16.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-config-prettier": "^4.1.0",
"eslint-plugin-import": "^2.16.0",
"eslint-config-prettier": "^4.2.0",
"eslint-plugin-import": "^2.17.2",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-react": "^7.12.4",
"jest": "^24.7.1",
"eslint-plugin-react": "^7.13.0",
"jest": "^24.8.0",
"jest-dom": "^3.2.2",
"lerna": "^3.13.2",
"prettier": "^1.16.4",
"lerna": "^3.13.4",
"prettier": "^1.17.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-testing-library": "^7.0.0",
"regenerator-runtime": "^0.13.2",
"rollup": "^1.9.3",
"rollup": "^1.11.3",
"rollup-plugin-babel": "^4.3.2",
"rollup-plugin-commonjs": "^9.3.4",
"rollup-plugin-node-resolve": "^4.2.2",
"rollup-plugin-node-resolve": "^4.2.4",
"rollup-plugin-replace": "^2.2.0",
"rollup-plugin-uglify": "^6.0.2",
"rollup-plugin-size-snapshot": "^0.8.0",
"rollup-plugin-terser": "^4.0.4",
"shx": "^0.3.2"
}
}
21 changes: 21 additions & 0 deletions packages/component/.size-snapshot.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
{
"dist/loadable.cjs.js": {
"bundled": 10177,
"minified": 5008,
"gzipped": 1931
},
"dist/loadable.esm.js": {
"bundled": 9858,
"minified": 4743,
"gzipped": 1857,
"treeshaked": {
"rollup": {
"code": 3158,
"import_statements": 60
},
"webpack": {
"code": 4211
}
}
}
}
4 changes: 2 additions & 2 deletions packages/component/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,7 @@
"description": "React code splitting made easy.",
"version": "5.9.0",
"main": "dist/loadable.cjs.js",
"module": "dist/loadable.es.js",
"jsnext:main": "dist/loadable.es.js",
"module": "dist/loadable.esm.js",
"repository": "git@github.com:smooth-code/loadable-components.git",
"author": "Greg Bergé <berge.greg@gmail.com>",
"publishConfig": {
Expand Down Expand Up @@ -34,6 +33,7 @@
"react": ">=16.3.0"
},
"dependencies": {
"@babel/runtime": "^7.4.4",
"hoist-non-react-statics": "^3.3.0"
}
}
140 changes: 71 additions & 69 deletions packages/component/rollup.config.js
Original file line number Diff line number Diff line change
@@ -1,82 +1,84 @@
/* eslint-disable import/no-extraneous-dependencies, import/no-mutable-exports */
import path from 'path'
import resolve from 'rollup-plugin-node-resolve'
/* eslint-disable import/no-extraneous-dependencies */
import nodeResolve from 'rollup-plugin-node-resolve'
import babel from 'rollup-plugin-babel'
import replace from 'rollup-plugin-replace'
import commonjs from 'rollup-plugin-commonjs'
import { uglify } from 'rollup-plugin-uglify'
import { terser } from 'rollup-plugin-terser'
import { sizeSnapshot } from 'rollup-plugin-size-snapshot'
import pkg from './package.json'

// eslint-disable-next-line
const babelConfig = require('../../babel.config.js')
const SOURCE_DIR = path.resolve(__dirname, 'src')
const DIST_DIR = path.resolve(__dirname, 'dist')
const buildName = 'loadable'

const baseConfig = {
input: `${SOURCE_DIR}/index.js`,
plugins: [babel({ exclude: '**/node_modules/**', ...babelConfig })],
const input = 'src/index.js'
const name = 'loadable'
const globals = {
react: 'React',
'hoist-non-react-statics': 'hoistNonReactStatics',
}

const esConfig = Object.assign({}, baseConfig, {
output: {
file: `${DIST_DIR}/${buildName}.es.js`,
format: 'es',
},
external: [
...Object.keys(pkg.peerDependencies),
...Object.keys(pkg.dependencies),
const external = id => !id.startsWith('.') && !id.startsWith('/')

const getBabelOptions = ({ useESModules }) => ({
exclude: '**/node_modules/**',
runtimeHelpers: true,
presets: [['@babel/preset-react', { useBuiltIns: true }]],
plugins: [
'@babel/plugin-proposal-class-properties',
'babel-plugin-annotate-pure-calls',
['@babel/plugin-transform-runtime', { useESModules }],
],
})

const cjsConfig = Object.assign({}, esConfig, {
output: {
file: `${DIST_DIR}/${buildName}.cjs.js`,
format: 'cjs',
exports: 'named',
export default [
// umd
{
input,
output: {
file: `dist/loadable.js`,
format: 'umd',
name,
globals,
exports: 'named',
sourcemap: false,
},
external: Object.keys(globals),
plugins: [
babel(getBabelOptions({ useESModules: true })),
nodeResolve(),
commonjs(),
replace({ 'process.env.NODE_ENV': JSON.stringify('development') }),
],
},
})

const globals = { react: 'React' }

const umdConfig = Object.assign({}, baseConfig, {
output: {
name: 'loadable',
file: `${DIST_DIR}/${buildName}.js`,
format: 'umd',
globals,
exports: 'named',
sourcemap: false,
// min
{
input,
output: {
file: 'dist/loadable.min.js',
format: 'umd',
name,
globals,
exports: 'named',
sourcemap: false,
},
external: Object.keys(globals),
plugins: [
babel(getBabelOptions({ useESModules: true })),
nodeResolve(),
commonjs(),
replace({ 'process.env.NODE_ENV': JSON.stringify('production') }),
terser(),
],
},
external: Object.keys(globals),
plugins: [...baseConfig.plugins, resolve({ browser: true }), commonjs()],
})

const minConfig = Object.assign({}, umdConfig, {
output: {
...umdConfig.output,
file: `${DIST_DIR}/${buildName}.min.js`,
// cjs
{
input,
output: { file: pkg.main, format: 'cjs', exports: 'named' },
external,
plugins: [babel(getBabelOptions({ useESModules: false })), sizeSnapshot()],
},
plugins: [
...umdConfig.plugins,
replace({ 'process.env.NODE_ENV': JSON.stringify('production') }),
uglify({
compress: {
pure_getters: true,
unsafe: true,
unsafe_comps: true,
warnings: false,
},
}),
],
})

let configs

if (process.env.WATCH_MODE) {
configs = [esConfig]
}

configs = [esConfig, cjsConfig, umdConfig, minConfig]

export default configs
// esm
{
input,
output: { file: pkg.module, format: 'esm' },
external,
plugins: [babel(getBabelOptions({ useESModules: true })), sizeSnapshot()],
},
]
11 changes: 2 additions & 9 deletions packages/component/src/createLoadable.js
Original file line number Diff line number Diff line change
Expand Up @@ -218,19 +218,12 @@ function createLoadable({ resolve = identity, render, onLoad }) {
<EnhancedInnerLoadable forwardedRef={ref} {...props} />
))

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

Loadable.load = props => {
if (typeof window === 'undefined') {
throw new Error('`load` cannot be called server-side')
}
return ctor.requireAsync(props)
}
Loadable.load = props => ctor.requireAsync(props)

return Loadable
}
Expand Down
Loading

0 comments on commit c94760b

Please sign in to comment.