Skip to content

Commit 34f9a30

Browse files
author
Vincent
authored
Flp 4691 code splitting (#62)
* add support for loadable components * update to babel 7
1 parent 199abe0 commit 34f9a30

File tree

9 files changed

+4343
-3247
lines changed

9 files changed

+4343
-3247
lines changed

‎.circleci/config.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ jobs:
33
build:
44
working_directory: ~/react-scripts
55
docker:
6-
- image: circleci/node:6
6+
- image: circleci/node:8
77
steps:
88
- checkout
99
- restore_cache:

‎config/webpack.client.dev.js

Lines changed: 31 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,39 @@
11
const webpack = require('webpack');
22
const merge = require('webpack-merge');
33
const path = require('path');
4+
const LoadablePlugin = require('@loadable/webpack-plugin');
45
const defaults = require('./webpack.defaults');
56

6-
const config = merge.smart({
7-
module: {
8-
rules: [{
9-
test: /\.css$/,
10-
include: path.resolve('src'),
11-
use: ['style-loader'],
12-
}, {
13-
test: /\.css$/,
14-
include: path.resolve('node_modules'),
15-
use: ['style-loader'],
16-
}, {
17-
test: /\.scss$/,
18-
use: ['style-loader'],
19-
}],
7+
const config = merge.smart(
8+
{
9+
module: {
10+
rules: [
11+
{
12+
test: /\.css$/,
13+
include: path.resolve('src'),
14+
use: ['style-loader'],
15+
},
16+
{
17+
test: /\.css$/,
18+
include: path.resolve('node_modules'),
19+
use: ['style-loader'],
20+
},
21+
{
22+
test: /\.scss$/,
23+
use: ['style-loader'],
24+
},
25+
],
26+
},
2027
},
21-
}, defaults, {
22-
devtool: 'eval-source-map',
23-
entry: ['webpack-hot-middleware/client'],
24-
plugins: [new webpack.HotModuleReplacementPlugin()],
25-
});
28+
defaults,
29+
{
30+
devtool: 'eval-source-map',
31+
entry: ['webpack-hot-middleware/client'],
32+
plugins: [
33+
new LoadablePlugin({ filename: 'stats.json', writeToDisk: true }),
34+
new webpack.HotModuleReplacementPlugin(),
35+
],
36+
},
37+
);
2638

2739
module.exports = config;

‎config/webpack.client.prod.js

Lines changed: 45 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -5,40 +5,54 @@ const merge = require('webpack-merge');
55
const MiniCSSExtractPlugin = require('mini-css-extract-plugin');
66
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
77
const path = require('path');
8+
const LoadablePlugin = require('@loadable/webpack-plugin');
89
const defaults = require('./webpack.defaults');
910

10-
const config = merge.smart({
11-
module: {
12-
rules: [{
13-
test: /\.css$/,
14-
include: path.resolve('src'),
15-
use: [MiniCSSExtractPlugin.loader],
16-
}, {
17-
test: /\.css$/,
18-
include: path.resolve('node_modules'),
19-
use: [MiniCSSExtractPlugin.loader],
20-
}, {
21-
test: /\.scss$/,
22-
use: [MiniCSSExtractPlugin.loader],
23-
}],
11+
const config = merge.smart(
12+
{
13+
module: {
14+
rules: [
15+
{
16+
test: /\.css$/,
17+
include: path.resolve('src'),
18+
use: [MiniCSSExtractPlugin.loader],
19+
},
20+
{
21+
test: /\.css$/,
22+
include: path.resolve('node_modules'),
23+
use: [MiniCSSExtractPlugin.loader],
24+
},
25+
{
26+
test: /\.scss$/,
27+
use: [MiniCSSExtractPlugin.loader],
28+
},
29+
],
30+
},
2431
},
25-
}, defaults, {
26-
mode: 'production',
27-
output: {
28-
filename: '[hash].js',
32+
defaults,
33+
{
34+
mode: 'production',
35+
output: {
36+
filename: '[hash].js',
37+
},
38+
plugins: [
39+
new LoadablePlugin({ filename: 'stats.json', writeToDisk: true }),
40+
new ManifestPlugin({ fileName: 'manifest.json' }),
41+
new ManifestPlugin({ fileName: `manifest.${Date.now()}.json` }),
42+
new webpack.DefinePlugin({
43+
'process.env.NODE_ENV': '"production"',
44+
}),
45+
new ProgressBarPlugin(),
46+
new MiniCSSExtractPlugin({
47+
filename: '[contenthash].css',
48+
}),
49+
new OptimizeCSSAssetsPlugin({
50+
cssProcessorOptions: {
51+
reduceIdents: false,
52+
},
53+
}),
54+
],
2955
},
30-
plugins: [
31-
new ManifestPlugin({ fileName: 'manifest.json' }),
32-
new ManifestPlugin({ fileName: `manifest.${Date.now()}.json` }),
33-
new webpack.DefinePlugin({
34-
'process.env.NODE_ENV': '"production"',
35-
}),
36-
new ProgressBarPlugin(),
37-
new MiniCSSExtractPlugin({
38-
filename: '[contenthash].css',
39-
}),
40-
new OptimizeCSSAssetsPlugin({}),
41-
],
42-
});
56+
);
4357

4458
module.exports = config;

‎config/webpack.defaults.js

Lines changed: 30 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,17 +14,41 @@ const cssOptions = {
1414

1515
const babelOptions = {
1616
passPerPreset: true,
17-
presets: ['babel-preset-react', 'babel-preset-env', 'babel-preset-stage-0'],
18-
plugins: ['babel-plugin-transform-runtime', 'react-hot-loader/babel'],
17+
presets: ['@babel/preset-react', '@babel/preset-env'],
18+
plugins: [
19+
'@loadable/babel-plugin',
20+
[
21+
'@babel/plugin-transform-runtime',
22+
{
23+
corejs: 2,
24+
},
25+
],
26+
'react-hot-loader/babel',
27+
[
28+
'relay',
29+
{
30+
artifactDirectory: 'src/__generated__',
31+
schema: 'schema.graphql',
32+
},
33+
],
34+
'@babel/plugin-syntax-dynamic-import',
35+
'@babel/plugin-syntax-import-meta',
36+
'@babel/plugin-proposal-decorators',
37+
'@babel/plugin-proposal-class-properties',
38+
'@babel/plugin-proposal-json-strings',
39+
'@babel/plugin-proposal-function-sent',
40+
'@babel/plugin-proposal-export-namespace-from',
41+
'@babel/plugin-proposal-numeric-separator',
42+
'@babel/plugin-proposal-throw-expressions',
43+
'@babel/plugin-proposal-optional-chaining',
44+
'@babel/plugin-proposal-nullish-coalescing-operator',
45+
],
1946
};
2047

2148
module.exports = {
2249
mode: 'development',
2350
context: __dirname,
24-
entry: [
25-
'babel-polyfill',
26-
path.resolve(packageConfig.clientEntry || 'src/index.js'),
27-
],
51+
entry: [path.resolve(packageConfig.clientEntry || 'src/index.js')],
2852
output: {
2953
filename: '[name].js',
3054
path: path.resolve('build/assets'),

‎config/webpack.server.dev.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
const webpack = require('webpack');
22
const nodeExternals = require('webpack-node-externals');
3+
const LoadablePlugin = require('@loadable/webpack-plugin');
34
const StartServerPlugin = require('start-server-webpack-plugin');
45
const defaults = require('./webpack.server');
56

@@ -11,7 +12,8 @@ module.exports = Object.assign({}, defaults, {
1112
whitelist: ['webpack/hot/poll?1000', /\.css$/],
1213
})],
1314
plugins: defaults.plugins.concat(
14-
new StartServerPlugin('server.js'),
15+
new LoadablePlugin({ filename: 'stats.json', writeToDisk: true }),
1516
new webpack.HotModuleReplacementPlugin(),
17+
new StartServerPlugin('server.js'),
1618
),
1719
});

‎package.json

Lines changed: 24 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,18 +12,31 @@
1212
"yarn": "^1.6.0"
1313
},
1414
"dependencies": {
15+
"@babel/cli": "^7.0.0",
16+
"@babel/core": "^7.0.0",
17+
"@babel/plugin-proposal-class-properties": "^7.0.0",
18+
"@babel/plugin-proposal-decorators": "^7.0.0",
19+
"@babel/plugin-proposal-export-namespace-from": "^7.0.0",
20+
"@babel/plugin-proposal-function-sent": "^7.0.0",
21+
"@babel/plugin-proposal-json-strings": "^7.0.0",
22+
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.4.4",
23+
"@babel/plugin-proposal-numeric-separator": "^7.0.0",
24+
"@babel/plugin-proposal-optional-chaining": "^7.2.0",
25+
"@babel/plugin-proposal-throw-expressions": "^7.0.0",
26+
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
27+
"@babel/plugin-syntax-import-meta": "^7.0.0",
28+
"@babel/plugin-transform-runtime": "^7.0.0",
29+
"@babel/preset-env": "^7.0.0",
30+
"@babel/preset-react": "^7.0.0",
31+
"@babel/runtime-corejs2": "^7.0.0",
32+
"@loadable/babel-plugin": "^5.8.0",
33+
"@loadable/webpack-plugin": "^5.7.1",
1534
"autoprefixer": "^8",
1635
"aws-sdk": "^2.94.0",
17-
"babel-cli": "^6",
18-
"babel-core": "^6",
19-
"babel-jest": "23.0.0",
20-
"babel-loader": "^7",
21-
"babel-plugin-transform-runtime": "^6",
22-
"babel-polyfill": "^6",
23-
"babel-preset-env": "^1.6",
24-
"babel-preset-react": "^6",
25-
"babel-preset-stage-0": "^6",
26-
"babel-runtime": "^6",
36+
"babel-core": "^7.0.0-bridge.0",
37+
"babel-jest": "^23.4.2",
38+
"babel-loader": "^8.0.0",
39+
"babel-plugin-relay": "^4.0.0",
2740
"chalk": "^2",
2841
"concat-stream": "^1.6.2",
2942
"cross-spawn": "^6",
@@ -46,7 +59,7 @@
4659
"jsdom": "^11",
4760
"loader-utils": "^1",
4861
"mime": "^2.0.3",
49-
"mini-css-extract-plugin": "^0.4.0",
62+
"mini-css-extract-plugin": "^0.5.0",
5063
"node-sass": "^4.9.0",
5164
"optimize-css-assets-webpack-plugin": "^4.0.0",
5265
"postcss-calc": "^5.3.1",
@@ -79,7 +92,6 @@
7992
"source-map-support": "^0.5"
8093
},
8194
"devDependencies": {
82-
"babel-plugin-relay": "^1.4.1",
8395
"core-js": "^2.4.1",
8496
"eslint": "^4",
8597
"eslint-config-airbnb-base": "^12",

‎scripts/utils/babelTransform.js

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,24 @@ const config = require('../../config/webpack.defaults.js');
33

44
module.exports = babelJest.createTransformer({
55
passPerPreset: true,
6-
presets: ['babel-preset-react', 'babel-preset-env', 'babel-preset-stage-0'].map(require.resolve),
7-
plugins: ['babel-plugin-transform-runtime'].map(require.resolve),
6+
presets: ['@babel/preset-react', '@babel/preset-env'].map(require.resolve),
7+
plugins: [
8+
[
9+
'@babel/plugin-transform-runtime',
10+
{
11+
corejs: 2,
12+
},
13+
],
14+
'@babel/plugin-syntax-dynamic-import',
15+
'@babel/plugin-syntax-import-meta',
16+
'@babel/plugin-proposal-decorators',
17+
'@babel/plugin-proposal-class-properties',
18+
'@babel/plugin-proposal-json-strings',
19+
'@babel/plugin-proposal-function-sent',
20+
'@babel/plugin-proposal-export-namespace-from',
21+
'@babel/plugin-proposal-numeric-separator',
22+
'@babel/plugin-proposal-throw-expressions',
23+
'@babel/plugin-proposal-optional-chaining',
24+
'@babel/plugin-proposal-nullish-coalescing-operator',
25+
].map(require.resolve),
826
});

‎template/.babelrc

Lines changed: 0 additions & 5 deletions
This file was deleted.

0 commit comments

Comments
 (0)