webpack2+angular2 按需加载，优化首屏速度

1.Angular2的按需加载及延迟加载

1.1 根模块AppModule

假设按需加载的模块为LazyModule，首页模块为LoginModule，根模块为AppModule。首先在AppModule.ts中去掉LazyModule的引入。

import { NgModule } from '@angular/core';import { BrowserModule }  from '@angular/platform-browser';import { HttpModule} from '@angular/http';import {RouterModule} from '@angular/router';//import { LazyModule} from './lazy/lazy.module';import { LoginModule} from './login/login.module';import {AppRoutes} from './app.routes';@NgModule({  imports: [    BrowserModule,    HttpModule,    RouterModule.forRoot(AppRoutes)    //LazyModule,  //去掉按需加载模块        LoginModule,  ],  declarations: [    AppComponent  ],  providers:[HttpService],  bootstrap: [ AppComponent ]})export class AppModule { }

1.2 惰性路由

在根路由文件AppRoutes.ts文件中加入Lazy模块

import {Route} from '@angular/router';import {LoginRoutes} from './login/login.routes';//去掉Lazy模块的路由引用//import {LazyRoutes} from './home/home.routes';export const AppRoutes: Route[] = [    {        path:'login',        component:LoginRoutes    },    {        path:'homepage',        //注意：此处算是按需加载路由的关键点之一        loadChildren: 'app/lazy/lazy.module#LazyModule'    },    {        path:'**',        redirectTo: 'login'    }];

Lazy模块路由文件（LazyRoutes.ts）

import {Route} from '@angular/router';import {LazyComponent} from './home.component'; export const LazyRoutes: Route[] = [    {        //注意：此处不能写成path:'lazy'        path:'',        component: LazyComponent    }];

Lazy模块路由引入

import { NgModule } from '@angular/core';import { RouterModule } from '@angular/router';import { LazyComponent } from './home.component';import { LazyRoutes } from './home.routes';@NgModule({  imports: [    CommonModule,    //路由模块引入    RouterModule.forChild(LazyRoutes)  ],  declarations: [LazyComponent],  exports: [LazyComponent]})export class LazyModule { }

以上就实现了angular2的按需加载，也称惰性加载。

1.3 预加载

项目在按需加载后，有些模块在后期必然会被访问到，于是可以设置延时加载。系统在优先显示首页后，在后台默默加载设置了预加载的模块。在这里简单设置为所有模块都预加载。

RouterModule.forRoot(      AppRoutes,      {preloadingStrategy:PreloadAllModules}),//预加载

注意：路由从之前的编写方式改为按需加载模式时，切记要在子路由里删掉原路由（当初探索时在这个坑里爬了好久）。

2.webpack使用

   webpack基本使用此处跳过，Angular2官网上有demo可以参考。  地址：https://v2.angular.cn/docs/ts/latest/guide/webpack.html  注意：要添加用于按需加载的angular2-router-loader

/**             * awesome-typescript-loader 用来配合tsconfig编译typescript             * angular2-template-loader 用来把模块的样式和html打到component中， inlines all html and style's in angular2 components             * angular2-router-loader lazy-load 跟之前的懒加载类似，从而写法上简单很多             */            {                test: /\.ts$/,                loaders: [                    'awesome-typescript-loader',                    'angular2-template-loader',                    'angular2-router-loader'],//关键的loader                exclude: [/\.(spec|e2e)\.ts$/]            },

3.公共模块jquery引用方式

许多npm包都是基于jquery的，所以jquery的引入极为重要，需要全局引入。在webpack配置文件中插件 里引入，方法如下：

plugins: [      //全局挂载jquery，并且要在tsconfig.json中配置jquery     new webpack.ProvidePlugin({      $:"jquery",      jQuery:"jquery",      "window.jQuery":"jquery"    }),    ...]

同时需要在tsconfig.json配置文件中注明jquery—–此处很关键

"type":[      "jquery"    ]

OK，经以上改造后，首屏速度从原来的3~5分钟，提示到5~7秒，而且首页在用户输入用户名密码的过程中，其他页也已经神不知鬼不觉滴加载完毕~~