perf: pack css files in one style.css

SteveVanOpstal · Jul 11, 2016 · dfdf0b5 · dfdf0b5
1 parent cc14da2
commit dfdf0b5
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 19 deletions.
diff --git a/config/webpack/common.js b/config/webpack/common.js
@@ -2,6 +2,7 @@ const webpack = require('webpack');
 const helpers = require('../../helpers');
 
 var DefinePlugin = require('webpack/lib/DefinePlugin');
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 const METADATA = {
   title: 'Legend Builder',
@@ -20,7 +21,10 @@ module.exports = {
   module: {
     loaders: [
       {test: /\.ts$/, loader: 'awesome-typescript-loader', exclude: [/\.(spec|e2e)\.ts$/]},
-      {test: /\.json$/, loader: 'json-loader'}, {test: /\.css$/, loader: 'raw-loader'}
+      {test: /\.json$/, loader: 'json-loader'},
+      {test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader')}
     ]
-  }
+  },
+
+  plugins: [new ExtractTextPlugin('style.css')]
 };
diff --git a/package.json b/package.json
@@ -105,6 +105,7 @@
     "coveralls": "^2.11.9",
     "css-loader": "^0.23.1",
     "depcheck": "^0.6.3",
+    "extract-text-webpack-plugin": "^1.0.1",
     "glob": "^7.0.3",
     "html-webpack-plugin": "^2.14.0",
     "istanbul-instrumenter-loader": "^0.2.0",

diff --git a/src/client/build/build.component.ts b/src/client/build/build.component.ts
@@ -1,4 +1,4 @@
-import {Component, OnInit, ViewEncapsulation} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute} from '@angular/router';
 
 import {settings} from '../../../config/settings';
@@ -14,14 +14,15 @@ import {LolApiService} from '../misc/lolapi.service';
 
 import {Item} from './item';
 
+require('../../assets/css/base.css');
+require('../../assets/css/build.css');
+
 @Component({
   providers: [LolApiService],
   directives: [
     GraphComponent, ItemsComponent, MasteriesComponent, ShopComponent, DDragonDirective,
     LoadingComponent, ErrorComponent
   ],
-  styles: [require('../../assets/css/build.css')],
-  encapsulation: ViewEncapsulation.None,
   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
@@ -1,5 +1,5 @@
 import {NgFor, NgIf} from '@angular/common';
-import {Component, OnInit, ViewEncapsulation} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {Router} from '@angular/router';
 
 import {FiltersComponent} from '../champions/filters.component';
@@ -14,15 +14,16 @@ import {ToIterablePipe} from '../misc/to-iterable.pipe';
 
 import {BarComponent} from './bar.component';
 
+require('../../assets/css/base.css');
+require('../../assets/css/champions.css');
+
 @Component({
   selector: 'champions',
   pipes: [ToIterablePipe, NamePipe, SortPipe, TagsPipe],
   providers: [LolApiService],
   directives: [
     NgFor, NgIf, FiltersComponent, BarComponent, LoadingComponent, ErrorComponent, DDragonDirective
   ],
-  styles: [require('../../assets/css/champions.css')],
-  encapsulation: ViewEncapsulation.None,
   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/features/features.component.ts b/src/client/features/features.component.ts
@@ -1,13 +1,14 @@
-import {Component, OnInit, ViewEncapsulation} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 
 import {LolApiService} from '../misc/lolapi.service';
 
+require('../../assets/css/base.css');
+require('../../assets/css/summoner.css');
+
 @Component({
   directives: [],
   providers: [LolApiService],
-  styles: [require('../../assets/css/summoner.css')],
-  encapsulation: ViewEncapsulation.None,
   template: `
     <div>
       <p>

diff --git a/src/client/index.html b/src/client/index.html
@@ -2,22 +2,16 @@
 <html>
 
 <head>
-
   <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 %>">
 
-  <!-- style -->
   <link rel="shortcut icon" href="/assets/images/favicon.ico" />
-  <link rel="stylesheet" href="/assets/css/base.css" />
-
-  <!-- fonts -->
   <link href='https://fonts.googleapis.com/css?family=Roboto:400' rel='stylesheet' type='text/css'>
 
-  <!-- base url -->
   <base href="<%= webpackConfig.metadata.baseUrl %>">
 </head>
 

diff --git a/src/client/region/region.component.ts b/src/client/region/region.component.ts
@@ -4,13 +4,14 @@ import {Component, OnInit, ViewEncapsulation} from '@angular/core';
 import {LolApiService} from '../misc/lolapi.service';
 import {ToIterablePipe} from '../misc/to-iterable.pipe';
 
+require('../../assets/css/base.css');
+require('../../assets/css/region.css');
+
 @Component({
   selector: 'region',
   providers: [LolApiService],
   directives: [NgFor],
   pipes: [ToIterablePipe],
-  styles: [require('../../assets/css/region.css')],
-  encapsulation: ViewEncapsulation.None,
   template: `
   <div class="align-center">
     <h2>Select your region:</h2>