fix: optimize bundle size (#281)

* install webpack-bundle-analyzer

* optimize PlayerStatsComponent

* optimize QueueSlotItemComponent

* optimize QueueContainerComponent

* optimize GameTeamPlayerListComponent

* optimize GameTeamHeaderComponent

* optimize SettingsComponent

package.json

@@ -5,6 +5,8 @@
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
+    "build:stats": "ng build --stats-json",
+    "analyze": "webpack-bundle-analyzer dist/tf2pickuppl/stats-es2015.json",
     "build:tf2pickup.pl": "ng build --configuration=production,tf2pickup.pl --output-path=dist/tf2pickup.pl",
     "build:hl.tf2pickup.pl": "ng build --configuration=production,hl.tf2pickup.pl --output-path=dist/hl.tf2pickup.pl",
     "build:tf2pickup.es": "ng build --configuration=production,tf2pickup.es --output-path=dist/tf2pickup.es",
@@ -72,6 +74,7 @@
     "protractor": "7.0.0",
     "ts-node": "8.10.1",
     "tslint": "6.1.2",
-    "typescript": "3.8.3"
+    "typescript": "3.8.3",
+    "webpack-bundle-analyzer": "^3.8.0"
   }
 }

src/app/games/game-team-header/game-team-header.component.scss

@@ -1,4 +1,5 @@
-@import "~bootstrap/scss/bootstrap";
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
 
 .team-header {
   color: theme-color("light");

src/app/games/game-team-player-list/game-team-player-list.component.scss

@@ -1,4 +1,5 @@
-@import "~bootstrap/scss/bootstrap";
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
 
 .player-item {
   display: flex;

src/app/players/player-stats/player-stats.component.scss

@@ -1,4 +1,5 @@
-@import "~bootstrap/scss/bootstrap";
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
 
 .col.narrow {
   display: flex;

src/app/profile/settings/settings.component.scss

@@ -1,5 +1,3 @@
-@import "~bootstrap/scss/bootstrap";
-
 $twitch: #9146ff;
 
 .bg-twitch {

src/app/queue/queue-container/queue-container.component.scss

@@ -1,4 +1,6 @@
-@import "~bootstrap/scss/bootstrap";
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/mixins/breakpoints";
 
 .column-sidebar {
   display: none;

src/app/queue/queue-slot-item/queue-slot-item.component.scss

@@ -1,4 +1,6 @@
-@import "~bootstrap/scss/bootstrap";
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/utilities/borders";
 
 .queue-slot-item {
   @extend .border;