Skip to content

GitLab

Commit 514ff33e authored by Matija Obreza's avatar Matija Obreza
Browse files

Merge branch '149-code-splitting' into 'master' 

Resolve "Code splitting"

Closes #149

See merge request genesys-pgr/genesys-ui!173
parents 0d148b49 bf2895b6
Expand all Hide whitespace changes
Inline Side-by-side
.babelrc
View file @ 514ff33e
{
"presets": [
"env",
[
"env",
{
"modules": false,
"targets": {
"browsers": ["last 2 versions", "safari >= 7"]
}
}
],
"react"
],
"plugins": [
"transform-object-rest-spread",
"babel-plugin-syntax-dynamic-import",
[
"import-inspector",
{
"serverSideRequirePath": true
}
]
]
}
config/server.config.js
View file @ 514ff33e
const path = require('path');
const webpack = require('webpack');
const webpackMerge = require('webpack-merge');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const MinifyPlugin = require('terser-webpack-plugin');
const commonConfig = require('./webpack-base.config.js');
// other
const IS_PRODUCTION = process.env.NODE_ENV === 'production';
......@@ -58,24 +57,39 @@ module.exports = {
],
optimization: {
namedModules: true,
noEmitOnErrors: true,
namedModules: ifThenElse(IS_PRODUCTION, false, true),
// NOTE: Don't use splitChunks for server code
// splitChunks: {
// chunks: 'all',
// cacheGroups: {
// vendor: {
// test: /[\\/]node_modules[\\/]/,
// name: 'vendors',
// chunks: 'all'
// }
// },
// },
minimizer: ifThenElse(IS_PRODUCTION, [
//
new UglifyJsPlugin({
uglifyOptions: {
beautify: false,
mangle: {
ie8: true,
keep_fnames: true
},
compress: {
ie8: true,
warnings: false
},
comments: false
}
}),
new MinifyPlugin({
parallel: true,
terserOptions: {
ecma: undefined,
warnings: false,
parse: {},
compress: {},
mangle: false, // Note `mangle.properties` is `false` by default.
module: false,
output: null,
toplevel: false,
nameCache: null,
ie8: false,
keep_classnames: true,
keep_fnames: true,
safari10: false,
},
}),
],
// is not production
[]
......
config/webpack-base.config.js
View file @ 514ff33e
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
const HtmlWebpackExcludeAssetsPlugin = require('html-webpack-exclude-assets-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const WebpackChunkHash = require("webpack-chunk-hash");
const ManifestPlugin = require('webpack-manifest-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
......@@ -106,13 +106,12 @@ module.exports = {
},
entry: {
vendor: ['babel-polyfill', './entrypoints/vendor.ts', 'react', 'react-dom'],
catalog: ['./entrypoints/client.tsx']
genesys: [ 'babel-polyfill', './entrypoints/vendor.ts', './entrypoints/client.tsx' ]
},
output: {
filename: '[name].[chunkhash].js',
chunkFilename: '[name].[chunkhash].js',
filename: '[name].[hash].js',
chunkFilename: '[name].[hash].js',
path: path.join(process.cwd(), 'target/app/assets'),
publicPath: ''
},
......@@ -123,7 +122,8 @@ module.exports = {
},
module: {
rules: [{
rules: [
{
enforce: 'pre',
test: /\.tsx?$/,
loader: 'tslint-loader'
......@@ -131,7 +131,7 @@ module.exports = {
// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
{
test: /\.tsx?$/,
use: ["awesome-typescript-loader"]
use: [ "awesome-typescript-loader" ]
},
// {
// test: /\.js?$/,
......@@ -148,38 +148,37 @@ module.exports = {
// },
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
use: [{
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
modules: false
},
},
'resolve-url-loader', {
'resolve-url-loader', {
loader: 'sass-loader',
options: {
sourceMap:true,
includePaths:['node_modules']
sourceMap: true,
includePaths: ['node_modules']
}
}]
})
}
]
},
{
test: /\.css$/,
exclude: /node_modules\/react\-toolbox/,
use: ExtractTextPlugin.extract({
use: [{
loader: 'css-loader',
}]
})
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
},
{
test: /\.css$/,
include: /node_modules\/react\-toolbox/,
use: ExtractTextPlugin.extract({
use: [{
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
modules: true,
......@@ -187,8 +186,8 @@ module.exports = {
sourceMap: true,
localIdentName: '[path][name]__[local]'
}
}, 'resolve-url-loader', 'postcss-loader']
})
}, 'resolve-url-loader', 'postcss-loader'
]
},
// fonts
{
......@@ -236,12 +235,28 @@ module.exports = {
xhtml: true,
excludeAssets: [/server(\..+)*\.js/],
template: './entrypoints/index.html',
chunksSortMode: sortedChunks(['vendor', 'common', 'catalog']),
chunks: ['vendor', 'common', 'catalog'],
// chunksSortMode: sortedChunks(['vendor', 'common', 'genesys']),
// chunks: ['vendor', 'common', 'genesys'],
favicon: 'favicon.ico',
version: gitRevisionPlugin.version(),
commithash: gitRevisionPlugin.commithash(),
}),
// Inject scripts for SSR
new HtmlWebpackPlugin({
title: 'Genesys', // The title to use for the generated HTML document
filename: 'ssr-compiled.html', // The file to write the HTML to
// minify: {...}, // Pass a html-minifier options object to minify the output
xhtml: true,
excludeAssets: [/server(\..+)*\.js/],
template: './server/ssr-template.html',
// chunksSortMode: sortedChunks(['vendor', 'common', 'genesys']),
// chunks: ['vendor', 'common', 'genesys'],
favicon: 'favicon.ico',
version: gitRevisionPlugin.version(),
commithash: gitRevisionPlugin.commithash(),
}),
new HtmlWebpackPlugin({
title: 'Genesys', // The title to use for the generated HTML document
filename: 'ssr-error.html', // The file to write the HTML to
......@@ -255,28 +270,17 @@ module.exports = {
// Defer/Async scripts
new ScriptExtHtmlWebpackPlugin({
defaultAttribute: 'async',
// async: [ 'catalog' ],
// async: [ 'genesys' ],
}),
// Inject scripts for SSR
new HtmlWebpackPlugin({
title: 'Genesys', // The title to use for the generated HTML document
filename: 'ssr-compiled.html', // The file to write the HTML to
// minify: {...}, // Pass a html-minifier options object to minify the output
xhtml: true,
excludeAssets: [/server(\..+)*\.js/],
template: './server/ssr-template.html',
chunksSortMode: sortedChunks(['vendor', 'common', 'catalog']),
chunks: ['vendor', 'common', 'catalog'],
favicon: 'favicon.ico',
version: gitRevisionPlugin.version(),
commithash: gitRevisionPlugin.commithash(),
// Keep CSS separate
new MiniCssExtractPlugin({
filename: "[name].[hash].css",
chunkFilename: "[name].[hash].css"
}),
new HtmlWebpackExcludeAssetsPlugin(),
// Keep CSS separate
new ExtractTextPlugin('[name].[hash].css'),
new CopyWebpackPlugin([
{ from: 'assets/images', to: 'images'},
{ from: 'assets/templates', to: 'templates'},
......@@ -285,15 +289,17 @@ module.exports = {
{ from: 'node_modules/ckeditor/', to: 'scripts/ckeditor'}
])
],
optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
common: {
name: "common",
chunks: "all",
minChunks: 2
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all'
}
}
}
},
},
}
};
config/webpack-development.config.js
View file @ 514ff33e
......@@ -10,7 +10,7 @@ const commonConfig = require('./webpack-base.config.js');
const GitRevisionPlugin = require('git-revision-webpack-plugin');
var gitRevisionPlugin = new GitRevisionPlugin();
module.exports = webpackMerge(commonConfig, {
module.exports = webpackMerge.smart(commonConfig, {
mode: "development",
......@@ -18,10 +18,6 @@ module.exports = webpackMerge(commonConfig, {
entry: {},
output: {
filename: '[name].[hash].js' // HMR prevents use of [chunkhash]
},
plugins: [
new webpack.LoaderOptionsPlugin({
minimize: false,
......@@ -42,7 +38,4 @@ module.exports = webpackMerge(commonConfig, {
// hot module replacement for webpack-dev-server
new webpack.HotModuleReplacementPlugin()
],
optimization: {
namedModules: true,
}
});
config/webpack-production.config.js
View file @ 514ff33e
......@@ -2,15 +2,13 @@ const path = require('path');
const webpack = require('webpack');
const webpackMerge = require('webpack-merge');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackExcludeAssetsPlugin = require('html-webpack-exclude-assets-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const MinifyPlugin = require('terser-webpack-plugin');
const GitRevisionPlugin = require('git-revision-webpack-plugin');
var gitRevisionPlugin = new GitRevisionPlugin();
const commonConfig = require('./webpack-base.config.js');
module.exports = webpackMerge(commonConfig, {
module.exports = webpackMerge.smart(commonConfig, {
mode: "production",
......@@ -34,35 +32,48 @@ module.exports = webpackMerge(commonConfig, {
PROJECT_COMMITHASH: JSON.stringify(gitRevisionPlugin.commithash()),
}
}),
// Minify CSS
new OptimizeCssAssetsPlugin({
cssProcessor: require('cssnano'),
cssProcessorOptions: {
discardComments: {
removeAll: true
}
},
canPrint: true
}),
],
optimization: {
noEmitOnErrors: true,
splitChunks: {
chunks: 'all',
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all'
}
},
},
minimizer: [
//
new UglifyJsPlugin({
uglifyOptions: {
beautify: false,
mangle: {
ie8: true,
keep_fnames: true
},
compress: {
ie8: true,
warnings: false
},
comments: 'some',
}
new MinifyPlugin({
parallel: true,
terserOptions: {
ecma: undefined,
warnings: false,
parse: {},
compress: {},
mangle: true, // Note `mangle.properties` is `false` by default.
module: false,
output: null,
toplevel: false,
nameCache: null,
ie8: false,
keep_classnames: undefined,
keep_fnames: false,
safari10: false,
},
}),
// Minify CSS
new OptimizeCssAssetsPlugin({
// cssProcessor: require('cssnano'),
// cssProcessorOptions: {
// discardComments: {
// removeAll: true
// }
// },
// canPrint: true
}),
]
}
......
package-lock.json
View file @ 514ff33e
This diff is collapsed.
package.json
View file @ 514ff33e
......@@ -30,7 +30,10 @@
"debug:ssr2": "cross-env SSR=true webpack --config config/server.config.js && cd target/app/server && cross-env SSR=true node server.js",
"run:ssr": "cd target/app/server && cross-env SSR=true node server.js",
"generateI18n": "node i18n/generateI18n.ts",
"i18nscan": "i18next-scanner --config i18next-scanner.config.js 'src/**/*.tsx'"
"i18nscan": "i18next-scanner --config i18next-scanner.config.js 'src/**/*.tsx'",
"bundle:stats": "webpack --config config/webpack-development.config.js --profile --json",
"bundle:stats2": "webpack --config config/webpack-production.config.js --profile --json",
"bundle:stats3": "webpack --config config/server.config.js --profile --json"
},
"dependencies": {
"@material-ui/core": "^3.0.0",
......@@ -68,20 +71,21 @@
"react": "^16.4.1",
"react-autosuggest": "^9.3.4",
"react-ckeditor-component": "^1.1.0",
"react-dnd": "^6.0.0",
"react-dnd-html5-backend": "^6.0.0",
"react-dnd": "^7.0.2",
"react-dnd-html5-backend": "^7.0.2",
"react-dom": "^16.4.1",
"react-fontawesome": "^1.6.1",
"react-google-login": "^3.2.1",
"react-google-recaptcha": "^1.0.2",
"react-i18next": "^7.8.1",
"react-leaflet": "^2.0.1",
"react-loadable": "^5.5.0",
"react-markdown": "^4.0.3",
"react-redux": "^5.0.7",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-router-redux": "^5.0.0-alpha.9",
"react-time-ago": "^3.0.2",
"react-time-ago": "^4.0.1",
"react-virtualized": "^9.20.1",
"react-visibility-sensor": "^5.0.2",
"redux": "^4.0.0",
......@@ -94,58 +98,62 @@
"url-template": "^2.0.8"
},
"devDependencies": {
"@types/react": "^16.4.6",
"awesome-typescript-loader": "^5.2.0",
"@types/react": "^16.7.18",
"awesome-typescript-loader": "^5.2.1",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.4",
"babel-loader": "^8.0.5",
"babel-plugin-import-inspector": "^2.0.0",
"babel-plugin-react-transform": "^3.0.0",
"babel-plugin-transform-runtime": "^6.0.0",
"babel-polyfill": "^6.0.0",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.0.0",
"copy-webpack-plugin": "^4.5.2",
"babel-preset-react": "^6.24.1",
"copy-webpack-plugin": "^4.6.0",
"cross-env": "^5.2.0",
"css-loader": "^1.0.0",
"cssnano": "^4.0.5",
"css-loader": "^2.1.0",
"del": "^3.0.0",
"es6-promise": "^4.0.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^2.0.0",
"es6-promise": "^4.2.5",
"file-loader": "^3.0.1",
"git-revision-webpack-plugin": "^3.0.3",
"html-webpack-exclude-assets-plugin": "0.0.7",
"html-webpack-plugin": "^3.2.0",
"i18next-scanner": "^2.6.3",
"immutable": "^3.0.0",
"isomorphic-fetch": "^2.0.0",
"node-sass": "^4.9.2",
"object-assign": "^4.0.0",
"optimize-css-assets-webpack-plugin": "^5.0.0",
"i18next-scanner": "^2.9.1",
"immutable": "^4.0.0-rc.12",
"import-inspector": "^2.0.0",
"isomorphic-fetch": "^2.2.1",
"mini-css-extract-plugin": "^0.5.0",
"node-sass": "^4.11.0",
"object-assign": "^4.1.1",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"postcss-assets": "^5.0.0",
"postcss-cssnext": "^3.1.0",
"postcss-each": "^0.10.0",
"postcss-import": "^12.0.0",
"postcss-import": "^12.0.1",
"postcss-loader": "^3.0.0",
"postcss-mixins": "^6.0.0",
"precss": "^3.1.2",
"react-hot-loader": "^4.3.3",
"postcss-mixins": "^6.2.1",
"precss": "^4.0.0",
"react-hot-loader": "^4.6.3",
"react-jss": "^8.6.1",
"resolve-url-loader": "^3.0.0",
"sass-loader": "^7.1.0",
"script-ext-html-webpack-plugin": "^2.0.1",
"source-map-loader": "^0.2.0",
"script-ext-html-webpack-plugin": "^2.1.3",
"source-map-loader": "^0.2.4",
"style-loader": "^0.23.1",
"stylelint": "^9.5.0",
"tslint": "^5.10.0",
"stylelint": "^9.9.0",
"terser-webpack-plugin": "^1.2.1",
"tslint": "^5.12.1",
"tslint-loader": "^3.6.0",
"tslint-react": "^3.6.0",
"typescript": "^3.0.1",
"url-loader": "^1.1.1",
"webpack": "^4.16.1",
"typescript": "^3.2.2",
"url-loader": "^1.1.2",
"webpack": "^4.28.4",
"webpack-chunk-hash": "^0.6.0",
"webpack-cli": "^3.0.8",
"webpack-cli": "^3.2.1",
"webpack-dev-server": "^3.1.14",
"webpack-hot-middleware": "^2.22.3",
"webpack-manifest-plugin": "^2.0.3",
"webpack-merge": "^4.1.3"
"webpack-hot-middleware": "^2.24.3",
"webpack-manifest-plugin": "^2.0.4",
"webpack-merge": "^4.2.1"
}
}
src/accessions/routes.ts
View file @ 514ff33e
import AccessionBrowsePage from 'accessions/ui/BrowsePage';
import MapBrowsePage from 'accessions/ui/MapPage';
import AccessionDisplayPage from 'accessions/ui/DisplayPage';
import AccessionOverviewPage from 'accessions/ui/OverviewPage';
import Loading from 'ui/common/Loading';
import * as Loadable from 'react-loadable';
const publicRoutes = [
{
path: '/a/:filterCode(v.+)?',
component: AccessionBrowsePage,
component: Loadable({
loader: () => import(/* webpackMode:"lazy", webpackChunkName: "accessions" */'accessions/ui/BrowsePage'),
loading: Loading,
}),
exact: true,
},
{
path: '/a/overview/:filterCode(v.+)?',
component: AccessionOverviewPage,
component: Loadable({
loader: () => import(/* webpackMode:"lazy", webpackChunkName: "accessions" */'accessions/ui/OverviewPage'),
loading: Loading,
}),
exact: true,
},
{
path: '/a/map/:filterCode(v.+)?',
component: MapBrowsePage,
component: Loadable({
loader: () => import(/* webpackMode:"lazy", webpackChunkName: "accessions" */'accessions/ui/MapPage'),
loading: Loading,
}),
exact: true,
},
{
path: '/a/:uuid([a-z\\-0-9]+)',
component: AccessionDisplayPage,
component: Loadable({
loader: () => import(/* webpackMode:"lazy", webpackChunkName: "accessions" */'accessions/ui/DisplayPage'),
loading: Loading,
}),
exact: true,
},
{
// We need to take out the '10.' prefix for matching to work
path: '/10.:doi(\\d+\/.+)',
component: AccessionDisplayPage,
component: Loadable({
loader: () => import(/* webpackMode:"lazy", webpackChunkName: "accessions" */'accessions/ui/DisplayPage'),
loading: Loading,
}),
exact: true,
},
];
......