One of common concerns I faced in web/frontend development is libraries like “Angularjs, Bootstrap, JQuery… etc..” loading time, and how that affect on website performance, when you need to load several libraries to your website/page.. specially with low internet speed connections
#1: Project Folders and Namespaces
#2 Initial Configuration
#3 Bundling and Minifying CSS Files
#4 Bundling and Minifying Script Files
#5 The Structure of the _Layout File
#6 (Don’t) Use Twitter Bootstrap
#7 Keep Controllers Thin
#8 Membership and Identity
#9 Expose HTTP Endpoints
#10 Use Display Modes
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { } 
/// <reference path="../typings/es6-shim.d.ts" />
import { bootstrap } from '@angular/platform-browser-dynamic'; <script src="~/systemjs.config.js"></script>
<!-- Bundeling-->
@BundleConfig.AddStyles("~/bundles/css/",
"~/content/css/bootstrap.min.css",
"~/content/css/bootstrap-reset.css",
"~/content/css/style.css",
"~/content/css/style-responsive.css"
)
@BundleConfig.AddScripts("~/bundles/js",
"~/Scripts/jquery-1.9.1.min.js",
"~/Scripts/jquery.validate.min.js",
"~/Scripts/jquery.unobtrusive-ajax.min.js",
"~/Scripts/jquery.validate.unobtrusive.min.js",
"~/Scripts/bootstrap.min.js")
@RenderSection("JavaScript", required: false) <add namespace="TwitterBootstrapMVC" /> <add namespace="TwitterBootstrap3" />
@BundleConfig.AddStyles("~/Content/css",
"~/Content/bootstrap.css",
"~/Content/bootstrap-responsive.css",
"~/Content/Site.css"
)