Client: lazy load admin area

client/config/webpack.common.js

@@ -5,6 +5,7 @@ const helpers = require('./helpers')
  */
 
 const AssetsPlugin = require('assets-webpack-plugin')
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 const NormalModuleReplacementPlugin = require('webpack/lib/NormalModuleReplacementPlugin')
 const ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin')
 const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin')
@@ -313,6 +314,30 @@ module.exports = function (options) {
         disabled: !AOT,
         tsConfig: helpers.root('tsconfig.webpack.json'),
         resourceOverride: helpers.root('config/resource-override.js')
+      }),
+
+      new BundleAnalyzerPlugin({
+        // Can be `server`, `static` or `disabled`.
+        // In `server` mode analyzer will start HTTP server to show bundle report.
+        // In `static` mode single HTML file with bundle report will be generated.
+        // In `disabled` mode you can use this plugin to just generate Webpack Stats JSON file by setting `generateStatsFile` to `true`.
+        analyzerMode: 'static',
+        // Path to bundle report file that will be generated in `static` mode.
+        // Relative to bundles output directory.
+        reportFilename: 'report.html',
+        // Automatically open report in default browser
+        openAnalyzer: false,
+        // If `true`, Webpack Stats JSON file will be generated in bundles output directory
+        generateStatsFile: true,
+        // Name of Webpack Stats JSON file that will be generated if `generateStatsFile` is `true`.
+        // Relative to bundles output directory.
+        statsFilename: 'stats.json',
+        // Options for `stats.toJson()` method.
+        // For example you can exclude sources of your modules from stats file with `source: false` option.
+        // See more options here: https://github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21
+        statsOptions: null,
+        // Log level. Can be 'info', 'warn', 'error' or 'silent'.
+        logLevel: 'info'
       })
     ],
 

client/package.json

@@ -88,6 +88,7 @@
     "add-asset-html-webpack-plugin": "^1.0.2",
     "codelyzer": "2.0.0-beta.4",
     "standard": "^8.0.0",
+    "webpack-bundle-analyzer": "^2.2.1",
     "webpack-dll-bundles-plugin": "^1.0.0-beta.5"
   }
 }

client/src/app/+admin/admin-routing.module.ts

@@ -9,7 +9,7 @@ import { VideoAbusesRoutes } from './video-abuses';
 
 const adminRoutes: Routes = [
   {
-    path: 'admin',
+    path: '',
     component: AdminComponent,
     children: [
       {

client/src/app/+admin/admin.module.ts

@@ -6,7 +6,6 @@ import { FriendsComponent, FriendAddComponent, FriendListComponent, FriendServic
 import { RequestsComponent, RequestStatsComponent, RequestService } from './requests';
 import { UsersComponent, UserAddComponent, UserListComponent, UserService } from './users';
 import { VideoAbusesComponent, VideoAbuseListComponent } from './video-abuses';
-import { MenuAdminComponent } from './menu-admin.component';
 import { SharedModule } from '../shared';
 
 @NgModule({
@@ -30,14 +29,11 @@ import { SharedModule } from '../shared';
     UserListComponent,
 
     VideoAbusesComponent,
-    VideoAbuseListComponent,
-
-    MenuAdminComponent
+    VideoAbuseListComponent
   ],
 
   exports: [
-    AdminComponent,
-    MenuAdminComponent
+    AdminComponent
   ],
 
   providers: [

client/src/app/+admin/index.ts

@@ -4,4 +4,3 @@ export * from './users';
 export * from './admin-routing.module';
 export * from './admin.module';
 export * from './admin.component';
-export * from './menu-admin.component';

client/src/app/app-routing.module.ts

@@ -6,6 +6,10 @@ const routes: Routes = [
     path: '',
     redirectTo: '/videos/list',
     pathMatch: 'full'
+  },
+  {
+    path: 'admin',
+    loadChildren: './+admin#AdminModule'
   }
 ];
 

client/src/app/app.module.ts

@@ -11,7 +11,6 @@ import { AppComponent } from './app.component';
 import { AppState } from './app.service';
 
 import { AccountModule } from './account';
-import { AdminModule } from './admin';
 import { CoreModule } from './core';
 import { LoginModule } from './login';
 import { SharedModule } from './shared';
@@ -47,7 +46,6 @@ const APP_PROVIDERS = [
     MetaModule.forRoot(metaConfig),
 
     AccountModule,
-    AdminModule,
     CoreModule,
     LoginModule,
     SharedModule,

client/src/app/core/core.module.ts

@@ -4,7 +4,7 @@ import { HttpModule } from '@angular/http';
 import { RouterModule } from '@angular/router';
 
 import { AuthService } from './auth';
-import { MenuComponent } from './menu';
+import { MenuComponent, MenuAdminComponent } from './menu';
 import { throwIfAlreadyLoaded } from './module-import-guard';
 
 @NgModule({
@@ -13,8 +13,14 @@ import { throwIfAlreadyLoaded } from './module-import-guard';
     HttpModule,
     RouterModule
   ],
-  declarations: [ MenuComponent ],
-  exports: [ MenuComponent ],
+  declarations: [
+    MenuComponent,
+    MenuAdminComponent
+  ],
+  exports: [
+    MenuComponent,
+    MenuAdminComponent
+  ],
   providers: [ AuthService ]
 })
 export class CoreModule {

client/src/app/core/menu/index.ts

@@ -1 +1,2 @@
 export * from './menu.component';
+export * from './menu-admin.component';