Skip to content

GitLab

Commit 6cf66437 authored by Matija Obreza's avatar Matija Obreza
Browse files

Support for code-splitting 

- removed unused dependencies
parent cdd8974f
Hide whitespace changes
Inline Side-by-side
Showing with 150 additions and 274 deletions
.babelrc
View file @ 6cf66437
{
"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 @ 6cf66437
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 @ 6cf66437
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 @ 6cf66437
......@@ -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 @ 6cf66437
......@@ -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 @ 6cf66437
......@@ -4709,60 +4709,6 @@
}
}
},
"extract-text-webpack-plugin": {
"version": "4.0.0-beta.0",
"resolved": "https://registry.npmjs.org/extract-text-webpack-plugin/-/extract-text-webpack-plugin-4.0.0-beta.0.tgz",
"integrity": "sha512-Hypkn9jUTnFr0DpekNam53X47tXn3ucY08BQumv7kdGgeVUBLq3DJHJTi6HNxv4jl9W+Skxjz9+RnK0sJyqqjA==",
"dev": true,
"requires": {
"async": "^2.4.1",
"loader-utils": "^1.1.0",
"schema-utils": "^0.4.5",
"webpack-sources": "^1.1.0"
},
"dependencies": {
"ajv": {
"version": "6.5.2",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.5.2.tgz",
"integrity": "sha512-hOs7GfvI6tUI1LfZddH82ky6mOMyTuY0mk7kE2pWpmhhUSkumzaTO5vbVwij39MdwPQWCV4Zv57Eo06NtL/GVA==",
"dev": true,
"requires": {
"fast-deep-equal": "^2.0.1",
"fast-json-stable-stringify": "^2.0.0",
"json-schema-traverse": "^0.4.1",
"uri-js": "^4.2.1"
}
},
"ajv-keywords": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.2.0.tgz",
"integrity": "sha1-6GuBnGAs+IIa1jdBNpjx3sAhhHo=",
"dev": true
},
"fast-deep-equal": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
"integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=",
"dev": true
},
"json-schema-traverse": {
"version": "0.4.1",
"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
"integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
"dev": true
},
"schema-utils": {
"version": "0.4.5",
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.4.5.tgz",
"integrity": "sha512-yYrjb9TX2k/J1Y5UNy3KYdZq10xhYcF8nMpAW6o3hy6Q8WSIEf9lJHG/ePnOBfziPM3fvQwfOwa13U/Fh8qTfA==",
"dev": true,
"requires": {
"ajv": "^6.1.0",
"ajv-keywords": "^3.1.0"
}
}
}
},
"extsprintf": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
......@@ -16574,116 +16520,6 @@
}
}
},
"uglifyjs-webpack-plugin": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-2.1.1.tgz",
"integrity": "sha512-TQEcyMNkObX/H+FfcKjiDgs5RcXX8vW2UUUrDTOfQgg3lrafztfeM5WAwXo+AzqozJK6NP9w98xNpG/dutzSsg==",
"dev": true,
"requires": {
"cacache": "^11.2.0",
"find-cache-dir": "^2.0.0",
"schema-utils": "^1.0.0",
"serialize-javascript": "^1.4.0",
"source-map": "^0.6.1",
"uglify-js": "^3.0.0",
"webpack-sources": "^1.1.0",
"worker-farm": "^1.5.2"
},
"dependencies": {
"bluebird": {
"version": "3.5.3",
"resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.3.tgz",
"integrity": "sha512-/qKPUQlaW1OyR51WeCPBvRnAlnZFUJkCSG5HzGnuIqhgyJtF+T94lFnn33eiazjRm2LAHVy2guNnaq48X9SJuw==",
"dev": true
},
"cacache": {
"version": "11.3.2",
"resolved": "https://registry.npmjs.org/cacache/-/cacache-11.3.2.tgz",
"integrity": "sha512-E0zP4EPGDOaT2chM08Als91eYnf8Z+eH1awwwVsngUmgppfM5jjJ8l3z5vO5p5w/I3LsiXawb1sW0VY65pQABg==",
"dev": true,
"requires": {
"bluebird": "^3.5.3",
"chownr": "^1.1.1",
"figgy-pudding": "^3.5.1",
"glob": "^7.1.3",
"graceful-fs": "^4.1.15",
"lru-cache": "^5.1.1",
"mississippi": "^3.0.0",
"mkdirp": "^0.5.1",
"move-concurrently": "^1.0.1",
"promise-inflight": "^1.0.1",
"rimraf": "^2.6.2",
"ssri": "^6.0.1",
"unique-filename": "^1.1.1",
"y18n": "^4.0.0"
}
},
"graceful-fs": {
"version": "4.1.15",
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.15.tgz",
"integrity": "sha512-6uHUhOPEBgQ24HM+r6b/QwWfZq+yiFcipKFrOFiBEnWdy5sdzYoi+pJeQaPI5qOLRFqWmAXUPQNsielzdLoecA==",
"dev": true
},
"lru-cache": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
"integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
"dev": true,
"requires": {
"yallist": "^3.0.2"
}
},
"mississippi": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/mississippi/-/mississippi-3.0.0.tgz",
"integrity": "sha512-x471SsVjUtBRtcvd4BzKE9kFC+/2TeWgKCgw0bZcw1b9l2X3QX5vCWgF+KaZaYm87Ss//rHnWryupDrgLvmSkA==",
"dev": true,
"requires": {
"concat-stream": "^1.5.0",
"duplexify": "^3.4.2",
"end-of-stream": "^1.1.0",
"flush-write-stream": "^1.0.0",
"from2": "^2.1.0",
"parallel-transform": "^1.1.0",
"pump": "^3.0.0",
"pumpify": "^1.3.3",
"stream-each": "^1.1.0",
"through2": "^2.0.0"
}
},
"pump": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
"integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
"dev": true,
"requires": {
"end-of-stream": "^1.1.0",
"once": "^1.3.1"
}
},
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
"dev": true
},
"ssri": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.1.tgz",
"integrity": "sha512-3Wge10hNcT1Kur4PDFwEieXSCMCJs/7WvSACcrMYrNp+b8kDL1/0wJch5Ni2WrtwEa2IO8OsVfeKIciKCDx/QA==",
"dev": true,
"requires": {
"figgy-pudding": "^3.5.1"
}
},
"yallist": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.3.tgz",
"integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==",
"dev": true
}
}
},
"unc-path-regex": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/unc-path-regex/-/unc-path-regex-0.1.2.tgz",
......
tsconfig.json
View file @ 6cf66437
......@@ -8,8 +8,8 @@
]
},
"outDir": "target/tstemp",
"module": "commonjs",
"target": "es6",
"module": "esnext",
"target": "esnext",
"sourceMap": true,
"inlineSourceMap": false,
"inlineSources": false,
......@@ -17,7 +17,8 @@
"noUnusedParameters": false,
"noUnusedLocals": true,
"jsx": "react",
"moduleResolution": "node"
"moduleResolution": "node",
"importHelpers": true
},
"exclude": [
"node_modules",
......