feat(app): generate and serve pre-gzipped client files

(in prod)
angular-fullstack · Jun 19, 2018 · 8f22699 · 8f22699
1 parent 9a8bb89
commit 8f22699
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 19 deletions.
diff --git a/templates/app/_package.json b/templates/app/_package.json
@@ -6,6 +6,7 @@
     "compression": "^1.7.1",
     "core-js": "^2.5.0",
     "express": "^4.13.3",
+    "express-static-gzip": "~0.3.2",
     "morgan": "^1.9.0",
     "body-parser": "^1.13.3",
     "method-override": "^2.3.10",
@@ -147,6 +148,7 @@
     "run-sequence": "^2.1.0",
     "lazypipe": "^1.0.1",
     <%# WEBPACK %>
+    "compression-webpack-plugin": "^1.1.11",
     "webpack": "^4.12.0",
     "webpack-cli": "^3.0.6",
     "webpack-dev-server": "^3.1.4",

diff --git a/templates/app/server/config/express.js b/templates/app/server/config/express.js
@@ -3,6 +3,7 @@
  */
 
 import express from 'express';
+import expressStaticGzip from 'express-static-gzip';
 import favicon from 'serve-favicon';
 import morgan from 'morgan';
 import compression from 'compression';
@@ -23,7 +24,7 @@ import sqldb from '../sqldb';
 let Store = require('connect-session-sequelize')(session.Store);<% } %>
 
 export default function(app) {
-    var env = app.get('env');
+    var env = process.env.NODE_ENV;
 
     if(env === 'development' || env === 'test') {
         app.use(express.static(path.join(config.root, '.tmp')));
@@ -36,6 +37,9 @@ export default function(app) {
 
     app.set('appPath', path.join(config.root, 'client'));
     app.use(express.static(app.get('appPath')));
+    if(env === 'production') {
+        app.use("/", expressStaticGzip(app.get('appPath')));
+    }
     app.use(morgan('dev'));
 
     app.set('views', `${config.root}/server/views`);<% if(filters.html) { %>

diff --git a/templates/app/webpack.make.js b/templates/app/webpack.make.js
@@ -1,11 +1,10 @@
 /*eslint-env node*/
 const _ = require('lodash');
-var webpack = require('webpack');
-var HtmlWebpackPlugin = require('html-webpack-plugin');
-var HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin');
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
-var fs = require('fs');
-var path = require('path');
+const CompressionPlugin = require('compression-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin');
+const path = require('path');
+const webpack = require('webpack');
 
 module.exports = function makeWebpackConfig(options) {
     /**
@@ -311,18 +310,15 @@ module.exports = function makeWebpackConfig(options) {
         })
     ];
 
-    if(!TEST) {
-        // TODO(webpack4)
-        // config.plugins.push(new CommonsChunkPlugin({
-        //     name: 'vendor',
-        //
-        //     // filename: "vendor.js"
-        //     // (Give the chunk a different name)
-        //
-        //     minChunks: Infinity
-        //     // (with more entries, this ensures that no other module
-        //     //  goes into the vendor chunk)
-        // }));
+    if(BUILD) {
+        config.plugins.push(
+            new CompressionPlugin({}),
+            // https://github.com/webpack-contrib/mini-css-extract-plugin
+            new MiniCssExtractPlugin({
+                filename: '[name].[hash].css',
+                chunkFilename: '[id].[hash].css',
+            }),
+        );
     }
 
     // Skip rendering app.html in test mode