From 8390a1da5c827160f7783bd6d74a0427bb6f70da Mon Sep 17 00:00:00 2001
From: Steve Van Opstal <stevevanopstal@gmail.com>
Date: Wed, 24 Aug 2016 20:24:15 +0200
Subject: [PATCH] perf: css and html minification

---
 config/webpack/client/dev.js                |  3 +--
 config/webpack/client/prod.js               | 15 +++++++++++++--
 package.json                                |  3 ++-
 src/client/build/build.component.ts         |  2 +-
 src/client/champions/champions.component.ts |  2 +-
 src/client/index.html                       |  6 ++++--
 src/client/region/region.component.ts       |  2 +-
 7 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/config/webpack/client/dev.js b/config/webpack/client/dev.js
index af5c4f3..940ec8a 100644
--- a/config/webpack/client/dev.js
+++ b/config/webpack/client/dev.js
@@ -53,7 +53,7 @@ module.exports = webpackMerge(commonConfig, {
 
     loaders: [
       {test: /\.ts$/, loader: 'awesome-typescript-loader', exclude: [/\.(spec|e2e)\.ts$/]},
-      {test: /\.css|.svg$/, loader: 'raw-loader'}
+      {test: /\.svg$/, loader: 'raw'}, {test: /\.css$/, loader: 'css?minimize'}
     ]
   },
 
@@ -61,7 +61,6 @@ module.exports = webpackMerge(commonConfig, {
     new ForkCheckerPlugin(), new OccurrenceOrderPlugin(true),
     new CommonsChunkPlugin({name: ['vendor', 'polyfills']}),
     new CopyWebpackPlugin([{from: 'src/client/assets/images', to: 'images'}]),
-    new CopyWebpackPlugin([{from: 'src/client/base.css', to: 'base.css'}]),
     new HtmlWebpackPlugin({template: 'src/client/index.html', chunksSortMode: 'dependency'}),
     new DefinePlugin({'ENV': JSON.stringify(ENV)})
   ],
diff --git a/config/webpack/client/prod.js b/config/webpack/client/prod.js
index 37d9d53..898cd4b 100644
--- a/config/webpack/client/prod.js
+++ b/config/webpack/client/prod.js
@@ -50,7 +50,8 @@ module.exports = webpackMerge(commonConfig, {
         query: {'compilerOptions': {'removeComments': true}},
         exclude: [/\.(spec|e2e)\.ts$/]
       },
-      {test: /\.css|.svg$/, loader: 'raw-loader'}
+      {test: /\.svg$/, loader: 'raw'},
+      {test: /\.css$/, loader: 'css?minimize'},
     ]
   },
 
@@ -58,7 +59,17 @@ module.exports = webpackMerge(commonConfig, {
     new ForkCheckerPlugin(), new OccurrenceOrderPlugin(true),
     new CommonsChunkPlugin({name: ['vendor', 'polyfills']}), new WebpackMd5Hash(),
     new DedupePlugin(), new CopyWebpackPlugin([{from: 'src/client/assets/images', to: 'images'}]),
-    new HtmlWebpackPlugin({template: 'src/client/index.html', chunksSortMode: 'dependency'}),
+    new HtmlWebpackPlugin({
+      template: 'src/client/index.html',
+      chunksSortMode: 'dependency',
+      minify: {
+        collapseWhitespace: true,
+        removeAttributeQuotes: true,
+        removeOptionalTags: true,
+        removeScriptTypeAttributes: true,
+        removeStyleLinkTypeAttributes: true
+      }
+    }),
     new DefinePlugin({'ENV': JSON.stringify(ENV)}),
     new UglifyJsPlugin({beautify: false, mangle: {keep_fnames: true}, comments: false}),
     new CompressionPlugin(
diff --git a/package.json b/package.json
index 1aaa672..ced25c6 100644
--- a/package.json
+++ b/package.json
@@ -111,7 +111,9 @@
     "compression-webpack-plugin": "^0.3.1",
     "copy-webpack-plugin": "^3.0.0",
     "coveralls": "^2.11.9",
+    "css-loader": "^0.23.1",
     "glob": "^7.0.3",
+    "html-loader": "^0.4.3",
     "html-webpack-plugin": "^2.14.0",
     "istanbul-instrumenter-loader": "^0.2.0",
     "jasmine": "^2.4.1",
@@ -136,7 +138,6 @@
     "sauce-connect-launcher": "^0.15.1",
     "source-map-loader": "^0.1.5",
     "standard-version": "^2.2.1",
-    "style-loader": "^0.13.1",
     "tslint": "^3.15.0",
     "tslint-loader": "^2.1.3",
     "typings": "^1.3.1",
diff --git a/src/client/build/build.component.ts b/src/client/build/build.component.ts
index 444845c..9900367 100644
--- a/src/client/build/build.component.ts
+++ b/src/client/build/build.component.ts
@@ -21,7 +21,7 @@ import {ShopComponent} from './shop/shop.component';
     LoadingComponent, RetryComponent
   ],
   encapsulation: ViewEncapsulation.None,
-  styles: [require('./build.css')],
+  styles: [require('./build.css').toString()],
   template: `
     <div class="title">
       <img *ngIf="champion" [ddragon]="'champion/' + champion?.image?.full">
diff --git a/src/client/champions/champions.component.ts b/src/client/champions/champions.component.ts
index af477dc..556ff38 100644
--- a/src/client/champions/champions.component.ts
+++ b/src/client/champions/champions.component.ts
@@ -22,7 +22,7 @@ import {TagsPipe} from './pipes/tags.pipe';
     NgFor, NgIf, FiltersComponent, BarComponent, LoadingComponent, RetryComponent, DDragonDirective
   ],
   encapsulation: ViewEncapsulation.None,
-  styles: [require('./champions.css')],
+  styles: [require('./champions.css').toString()],
   template: `
     <filters [(name)]="name" [(tags)]="tags" [(sort)]="sort" (enterHit)="enterHit()"></filters>
     <div class="champion" *ngFor="let champion of champions?.data | toIterable | name:name | sort:sort | tags:tags">
diff --git a/src/client/index.html b/src/client/index.html
index 4d22b1f..91b5b37 100644
--- a/src/client/index.html
+++ b/src/client/index.html
@@ -5,15 +5,17 @@
   <title><%= webpackConfig.metadata.title %></title>
 
   <meta charset="utf-8">
-  <!--<meta http-equiv="X-UA-Compatible" content="IE=edge">-->
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="description" content="<%= webpackConfig.metadata.title %>">
 
   <link rel="shortcut icon" href="/images/favicon.ico" />
   <link href='https://fonts.googleapis.com/css?family=Roboto:400' rel='stylesheet' type='text/css'>
-  <link href='/base.css' rel='stylesheet' type='text/css'>
 
   <base href="<%= webpackConfig.metadata.baseUrl %>">
+
+  <style>
+    <%= require('./base.css') %>
+  </style>
 </head>
 
 <body>
diff --git a/src/client/region/region.component.ts b/src/client/region/region.component.ts
index 680f94c..fde2b39 100644
--- a/src/client/region/region.component.ts
+++ b/src/client/region/region.component.ts
@@ -10,7 +10,7 @@ import {LolApiService} from '../services/lolapi.service';
   directives: [NgFor],
   pipes: [ToIterablePipe],
   encapsulation: ViewEncapsulation.None,
-  styles: [require('./region.css')],
+  styles: [require('./region.css').toString()],
   template: `
   <div class="align-center">
     <h2>Select your region:</h2>