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
{ {
"presets": [ "presets": [
"env", [
"env",
{
"modules": false,
"targets": {
"browsers": ["last 2 versions", "safari >= 7"]
}
}
],
"react" "react"
],
"plugins": [
"transform-object-rest-spread",
"babel-plugin-syntax-dynamic-import",
[
"import-inspector",
{
"serverSideRequirePath": true
}
]
] ]
} }
const path = require('path'); const path = require('path');
const webpack = require('webpack'); const webpack = require('webpack');
const webpackMerge = require('webpack-merge'); const webpackMerge = require('webpack-merge');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); const MinifyPlugin = require('terser-webpack-plugin');
const commonConfig = require('./webpack-base.config.js'); const commonConfig = require('./webpack-base.config.js');
// other // other
const IS_PRODUCTION = process.env.NODE_ENV === 'production'; const IS_PRODUCTION = process.env.NODE_ENV === 'production';
...@@ -58,24 +57,39 @@ module.exports = { ...@@ -58,24 +57,39 @@ module.exports = {
], ],
optimization: { optimization: {
namedModules: true,
noEmitOnErrors: 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, [ minimizer: ifThenElse(IS_PRODUCTION, [
// //
new UglifyJsPlugin({ new MinifyPlugin({
uglifyOptions: { parallel: true,
beautify: false, terserOptions: {
mangle: { ecma: undefined,
ie8: true, warnings: false,
keep_fnames: true parse: {},
}, compress: {},
compress: { mangle: false, // Note `mangle.properties` is `false` by default.
ie8: true, module: false,
warnings: false output: null,
}, toplevel: false,
comments: false nameCache: null,
} ie8: false,
}), keep_classnames: true,
keep_fnames: true,
safari10: false,
},
}),
], ],
// is not production // is not production
[] []
......
const path = require('path'); const path = require('path');
const webpack = require('webpack'); const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin');
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin'); const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
const HtmlWebpackExcludeAssetsPlugin = require('html-webpack-exclude-assets-plugin'); const HtmlWebpackExcludeAssetsPlugin = require('html-webpack-exclude-assets-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const WebpackChunkHash = require("webpack-chunk-hash"); const WebpackChunkHash = require("webpack-chunk-hash");
const ManifestPlugin = require('webpack-manifest-plugin'); const ManifestPlugin = require('webpack-manifest-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin'); const CopyWebpackPlugin = require('copy-webpack-plugin');
...@@ -106,13 +106,12 @@ module.exports = { ...@@ -106,13 +106,12 @@ module.exports = {
}, },
entry: { entry: {
vendor: ['babel-polyfill', './entrypoints/vendor.ts', 'react', 'react-dom'], genesys: [ 'babel-polyfill', './entrypoints/vendor.ts', './entrypoints/client.tsx' ]
catalog: ['./entrypoints/client.tsx']
}, },
output: { output: {
filename: '[name].[chunkhash].js', filename: '[name].[hash].js',
chunkFilename: '[name].[chunkhash].js', chunkFilename: '[name].[hash].js',
path: path.join(process.cwd(), 'target/app/assets'), path: path.join(process.cwd(), 'target/app/assets'),
publicPath: '' publicPath: ''
}, },
...@@ -123,7 +122,8 @@ module.exports = { ...@@ -123,7 +122,8 @@ module.exports = {
}, },
module: { module: {
rules: [{ rules: [
{
enforce: 'pre', enforce: 'pre',
test: /\.tsx?$/, test: /\.tsx?$/,
loader: 'tslint-loader' loader: 'tslint-loader'
...@@ -131,7 +131,7 @@ module.exports = { ...@@ -131,7 +131,7 @@ module.exports = {
// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'. // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
{ {
test: /\.tsx?$/, test: /\.tsx?$/,
use: ["awesome-typescript-loader"] use: [ "awesome-typescript-loader" ]
}, },
// { // {
// test: /\.js?$/, // test: /\.js?$/,
...@@ -148,38 +148,37 @@ module.exports = { ...@@ -148,38 +148,37 @@ module.exports = {
// }, // },
{ {
test: /\.scss$/, test: /\.scss$/,
use: ExtractTextPlugin.extract({ use: [
use: [{ MiniCssExtractPlugin.loader,
{
loader: 'css-loader', loader: 'css-loader',
options: { options: {
modules: false modules: false
}, },
}, },
'resolve-url-loader', { 'resolve-url-loader', {
loader: 'sass-loader', loader: 'sass-loader',
options: { options: {
sourceMap:true, sourceMap: true,
includePaths:['node_modules'] includePaths: ['node_modules']
} }
}
}] ]
})
}, },
{ {
test: /\.css$/, test: /\.css$/,
exclude: /node_modules\/react\-toolbox/, exclude: /node_modules\/react\-toolbox/,
use: ExtractTextPlugin.extract({ use: [
use: [{ MiniCssExtractPlugin.loader,
loader: 'css-loader', 'css-loader'
}] ]
})
}, },
{ {
test: /\.css$/, test: /\.css$/,
include: /node_modules\/react\-toolbox/, include: /node_modules\/react\-toolbox/,
use: ExtractTextPlugin.extract({ use: [
use: [{ MiniCssExtractPlugin.loader,
{
loader: 'css-loader', loader: 'css-loader',
options: { options: {
modules: true, modules: true,
...@@ -187,8 +186,8 @@ module.exports = { ...@@ -187,8 +186,8 @@ module.exports = {
sourceMap: true, sourceMap: true,
localIdentName: '[path][name]__[local]' localIdentName: '[path][name]__[local]'
} }
}, 'resolve-url-loader', 'postcss-loader'] }, 'resolve-url-loader', 'postcss-loader'
}) ]
}, },
// fonts // fonts
{ {
...@@ -236,12 +235,28 @@ module.exports = { ...@@ -236,12 +235,28 @@ module.exports = {
xhtml: true, xhtml: true,
excludeAssets: [/server(\..+)*\.js/], excludeAssets: [/server(\..+)*\.js/],
template: './entrypoints/index.html', template: './entrypoints/index.html',
chunksSortMode: sortedChunks(['vendor', 'common', 'catalog']), // chunksSortMode: sortedChunks(['vendor', 'common', 'genesys']),
chunks: ['vendor', 'common', 'catalog'], // 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', favicon: 'favicon.ico',
version: gitRevisionPlugin.version(), version: gitRevisionPlugin.version(),
commithash: gitRevisionPlugin.commithash(), commithash: gitRevisionPlugin.commithash(),
}), }),
new HtmlWebpackPlugin({ new HtmlWebpackPlugin({
title: 'Genesys', // The title to use for the generated HTML document title: 'Genesys', // The title to use for the generated HTML document
filename: 'ssr-error.html', // The file to write the HTML to filename: 'ssr-error.html', // The file to write the HTML to
...@@ -255,28 +270,17 @@ module.exports = { ...@@ -255,28 +270,17 @@ module.exports = {
// Defer/Async scripts // Defer/Async scripts
new ScriptExtHtmlWebpackPlugin({ new ScriptExtHtmlWebpackPlugin({
defaultAttribute: 'async', defaultAttribute: 'async',
// async: [ 'catalog' ], // async: [ 'genesys' ],
}), }),
// Inject scripts for SSR // Keep CSS separate
new HtmlWebpackPlugin({ new MiniCssExtractPlugin({
title: 'Genesys', // The title to use for the generated HTML document filename: "[name].[hash].css",
filename: 'ssr-compiled.html', // The file to write the HTML to chunkFilename: "[name].[hash].css"
// 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(),
}), }),
new HtmlWebpackExcludeAssetsPlugin(), new HtmlWebpackExcludeAssetsPlugin(),
// Keep CSS separate
new ExtractTextPlugin('[name].[hash].css'),
new CopyWebpackPlugin([ new CopyWebpackPlugin([
{ from: 'assets/images', to: 'images'}, { from: 'assets/images', to: 'images'},
{ from: 'assets/templates', to: 'templates'}, { from: 'assets/templates', to: 'templates'},
...@@ -285,15 +289,17 @@ module.exports = { ...@@ -285,15 +289,17 @@ module.exports = {
{ from: 'node_modules/ckeditor/', to: 'scripts/ckeditor'} { from: 'node_modules/ckeditor/', to: 'scripts/ckeditor'}
]) ])
], ],
optimization: { optimization: {
splitChunks: { splitChunks: {
chunks: 'all',
cacheGroups: { cacheGroups: {
common: { vendor: {
name: "common", test: /[\\/]node_modules[\\/]/,
chunks: "all", name: 'vendors',
minChunks: 2 chunks: 'all'
} }
} },
} },
} }
}; };
...@@ -10,7 +10,7 @@ const commonConfig = require('./webpack-base.config.js'); ...@@ -10,7 +10,7 @@ const commonConfig = require('./webpack-base.config.js');
const GitRevisionPlugin = require('git-revision-webpack-plugin'); const GitRevisionPlugin = require('git-revision-webpack-plugin');
var gitRevisionPlugin = new GitRevisionPlugin(); var gitRevisionPlugin = new GitRevisionPlugin();
module.exports = webpackMerge(commonConfig, { module.exports = webpackMerge.smart(commonConfig, {
mode: "development", mode: "development",
...@@ -18,10 +18,6 @@ module.exports = webpackMerge(commonConfig, { ...@@ -18,10 +18,6 @@ module.exports = webpackMerge(commonConfig, {
entry: {}, entry: {},
output: {
filename: '[name].[hash].js' // HMR prevents use of [chunkhash]
},
plugins: [ plugins: [
new webpack.LoaderOptionsPlugin({ new webpack.LoaderOptionsPlugin({
minimize: false, minimize: false,
...@@ -42,7 +38,4 @@ module.exports = webpackMerge(commonConfig, { ...@@ -42,7 +38,4 @@ module.exports = webpackMerge(commonConfig, {
// hot module replacement for webpack-dev-server // hot module replacement for webpack-dev-server
new webpack.HotModuleReplacementPlugin() new webpack.HotModuleReplacementPlugin()
], ],
optimization: {
namedModules: true,
}
}); });
...@@ -2,15 +2,13 @@ const path = require('path'); ...@@ -2,15 +2,13 @@ const path = require('path');
const webpack = require('webpack'); const webpack = require('webpack');
const webpackMerge = require('webpack-merge'); const webpackMerge = require('webpack-merge');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin'); const MinifyPlugin = require('terser-webpack-plugin');
const HtmlWebpackExcludeAssetsPlugin = require('html-webpack-exclude-assets-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const GitRevisionPlugin = require('git-revision-webpack-plugin'); const GitRevisionPlugin = require('git-revision-webpack-plugin');
var gitRevisionPlugin = new GitRevisionPlugin(); var gitRevisionPlugin = new GitRevisionPlugin();
const commonConfig = require('./webpack-base.config.js'); const commonConfig = require('./webpack-base.config.js');
module.exports = webpackMerge(commonConfig, { module.exports = webpackMerge.smart(commonConfig, {
mode: "production", mode: "production",
...@@ -34,35 +32,48 @@ module.exports = webpackMerge(commonConfig, { ...@@ -34,35 +32,48 @@ module.exports = webpackMerge(commonConfig, {
PROJECT_COMMITHASH: JSON.stringify(gitRevisionPlugin.commithash()), PROJECT_COMMITHASH: JSON.stringify(gitRevisionPlugin.commithash()),
} }
}), }),
// Minify CSS
new OptimizeCssAssetsPlugin({
cssProcessor: require('cssnano'),
cssProcessorOptions: {
discardComments: {
removeAll: true
}
},
canPrint: true
}),
], ],
optimization: { optimization: {
noEmitOnErrors: true, noEmitOnErrors: true,
splitChunks: {
chunks: 'all',
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all'
}
},
},
minimizer: [ minimizer: [
// //
new UglifyJsPlugin({ new MinifyPlugin({
uglifyOptions: { parallel: true,
beautify: false, terserOptions: {
mangle: { ecma: undefined,
ie8: true, warnings: false,
keep_fnames: true parse: {},
}, compress: {},
compress: { mangle: true, // Note `mangle.properties` is `false` by default.
ie8: true, module: false,
warnings: false output: null,
}, toplevel: false,
comments: 'some', 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
}), }),
] ]
} }
......
This diff is collapsed.
...@@ -30,7 +30,10 @@ ...@@ -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", "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", "run:ssr": "cd target/app/server && cross-env SSR=true node server.js",
"generateI18n": "node i18n/generateI18n.ts", "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": { "dependencies": {
"@material-ui/core": "^3.0.0", "@material-ui/core": "^3.0.0",
...@@ -68,20 +71,21 @@ ...@@ -68,20 +71,21 @@
"react": "^16.4.1", "react": "^16.4.1",
"react-autosuggest": "^9.3.4", "react-autosuggest": "^9.3.4",
"react-ckeditor-component": "^1.1.0", "react-ckeditor-component": "^1.1.0",
"react-dnd": "^6.0.0", "react-dnd": "^7.0.2",
"react-dnd-html5-backend": "^6.0.0", "react-dnd-html5-backend": "^7.0.2",
"react-dom": "^16.4.1", "react-dom": "^16.4.1",
"react-fontawesome": "^1.6.1", "react-fontawesome": "^1.6.1",
"react-google-login": "^3.2.1", "react-google-login": "^3.2.1",
"react-google-recaptcha": "^1.0.2", "react-google-recaptcha": "^1.0.2",
"react-i18next": "^7.8.1", "react-i18next": "^7.8.1",
"react-leaflet": "^2.0.1", "react-leaflet": "^2.0.1",
"react-loadable": "^5.5.0",
"react-markdown": "^4.0.3", "react-markdown": "^4.0.3",
"react-redux": "^5.0.7", "react-redux": "^5.0.7",
"react-router": "^4.3.1", "react-router": "^4.3.1",
"react-router-dom": "^4.3.1", "react-router-dom": "^4.3.1",
"react-router-redux": "^5.0.0-alpha.9", "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-virtualized": "^9.20.1",
"react-visibility-sensor": "^5.0.2", "react-visibility-sensor": "^5.0.2",
"redux": "^4.0.0", "redux": "^4.0.0",
...@@ -94,58 +98,62 @@ ...@@ -94,58 +98,62 @@
"url-template": "^2.0.8" "url-template": "^2.0.8"
}, },
"devDependencies": { "devDependencies": {
"@types/react": "^16.4.6", "@types/react": "^16.7.18",
"awesome-typescript-loader": "^5.2.0", "awesome-typescript-loader": "^5.2.1",
"babel-core": "^6.26.3", "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-react-transform": "^3.0.0",
"babel-plugin-transform-runtime": "^6.0.0", "babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-polyfill": "^6.0.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-env": "^1.7.0",
"babel-preset-react": "^6.0.0", "babel-preset-react": "^6.24.1",
"copy-webpack-plugin": "^4.5.2", "copy-webpack-plugin": "^4.6.0",
"cross-env": "^5.2.0", "cross-env": "^5.2.0",
"css-loader": "^1.0.0", "css-loader": "^2.1.0",
"cssnano": "^4.0.5",
"del": "^3.0.0", "del": "^3.0.0",
"es6-promise": "^4.0.0", "es6-promise": "^4.2.5",
"extract-text-webpack-plugin": "^4.0.0-beta.0",