mirror of
https://github.com/gregberge/loadable-components.git
synced 2026-02-01 16:41:52 +00:00
perf: optimize rollup config
Also remove warning from `load` and `preload` methods.
This commit is contained in:
Greg Bergé
Greg Bergé
parent
7ffaa4ca95
commit
c94760b080
37
package.json
37
package.json
@ -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": {
|
||||
@ -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
packages/component/.size-snapshot.json
Normal file
21
packages/component/.size-snapshot.json
Normal file
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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": {
|
||||
@ -34,6 +33,7 @@
|
||||
"react": ">=16.3.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.4.4",
|
||||
"hoist-non-react-statics": "^3.3.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 cjsConfig = Object.assign({}, esConfig, {
|
||||
output: {
|
||||
file: `${DIST_DIR}/${buildName}.cjs.js`,
|
||||
format: 'cjs',
|
||||
exports: 'named',
|
||||
},
|
||||
})
|
||||
|
||||
const globals = { react: 'React' }
|
||||
|
||||
const umdConfig = Object.assign({}, baseConfig, {
|
||||
output: {
|
||||
name: 'loadable',
|
||||
file: `${DIST_DIR}/${buildName}.js`,
|
||||
format: 'umd',
|
||||
globals,
|
||||
exports: 'named',
|
||||
sourcemap: false,
|
||||
},
|
||||
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`,
|
||||
},
|
||||
const getBabelOptions = ({ useESModules }) => ({
|
||||
exclude: '**/node_modules/**',
|
||||
runtimeHelpers: true,
|
||||
presets: [['@babel/preset-react', { useBuiltIns: true }]],
|
||||
plugins: [
|
||||
...umdConfig.plugins,
|
||||
replace({ 'process.env.NODE_ENV': JSON.stringify('production') }),
|
||||
uglify({
|
||||
compress: {
|
||||
pure_getters: true,
|
||||
unsafe: true,
|
||||
unsafe_comps: true,
|
||||
warnings: false,
|
||||
},
|
||||
}),
|
||||
'@babel/plugin-proposal-class-properties',
|
||||
'babel-plugin-annotate-pure-calls',
|
||||
['@babel/plugin-transform-runtime', { useESModules }],
|
||||
],
|
||||
})
|
||||
|
||||
let configs
|
||||
|
||||
if (process.env.WATCH_MODE) {
|
||||
configs = [esConfig]
|
||||
}
|
||||
|
||||
configs = [esConfig, cjsConfig, umdConfig, minConfig]
|
||||
|
||||
export default configs
|
||||
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') }),
|
||||
],
|
||||
},
|
||||
// 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(),
|
||||
],
|
||||
},
|
||||
// cjs
|
||||
{
|
||||
input,
|
||||
output: { file: pkg.main, format: 'cjs', exports: 'named' },
|
||||
external,
|
||||
plugins: [babel(getBabelOptions({ useESModules: false })), sizeSnapshot()],
|
||||
},
|
||||
// esm
|
||||
{
|
||||
input,
|
||||
output: { file: pkg.module, format: 'esm' },
|
||||
external,
|
||||
plugins: [babel(getBabelOptions({ useESModules: true })), sizeSnapshot()],
|
||||
},
|
||||
]
|
||||
|
||||
@ -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
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user