angular2用webpack打包每次都只打包成单个mian文件,很大,例如页面中的关于我们,联系我们这样的页面,用户可能几乎不会打开,但是我们还是每次都要让用户加载,体验很不好,

这样就需要按需加载,当不长访问的页面,我们就单独打包成一个页面,当客户访问时,再去加载JS文件。

那么angular2如何进行按需加载呢?

我们使用webpack-toolkit,可以直接在git上看教程https://github.com/AngularClass/webpack-toolkit

angular2自己也支持异步加载,可以查看AsyncRoute的使用,github上查找会有很多使用例子

我写了个小demo,可以在dev分支中查看相关内容,https://github.com/lyt308012546/ng2-webpack-demo/tree/dev

// Install
npm install @angularclass/webpack-toolkit --save-dev // app/about/about.ts @Component({
selector: 'about',
template: '<h1>About</h1>'
})
export class About {} // app/app.routes.ts export const routes = [
{ path: '', component: Home },
{ path: 'about', component: 'About' }
]; // main.browser.ts import {routes} from './app/app.routes';
import { provideWebpack } from '@angularclass/webpack-toolkit';
bootstrap(App, [
provideRouter(routes),
provideWebpack({
'About': require('es6-promise!./app/about')
}) ]);
// 以下是采用AsyncRoute进行异步加载

import { Component } from '@angular/core';
import { RouteConfig, RouterOutlet ,AsyncRoute } from '@angular/router-deprecated';
import { Router } from '@angular/router-deprecated'; import { SubRouteComponent } from './subroute'; @Component({
template: `
<h2>RouteConfig Demo</h2>
<button (click)="gotoDetail()">跳转</button>
<router-outlet></router-outlet>
`,
directives: [RouterOutlet],
})
@RouteConfig([
{path: '/', name: 'SubRouteComponent', component: SubRouteComponent, useAsDefault: true},
// 异步按需加载
new AsyncRoute({ path: '/detail', loader: () => require('es6-promise!./routedetail')('RouteDetailComponent'), name: 'RouteDetailComponent' }),
])
export class RouteDemo { constructor(
private router: Router) {} gotoDetail(){
this.router.navigate(['RouteDetailComponent']);
}
}

angular2如何按需加载?的更多相关文章

  1. 按需加载.js .css文件

    首先,理解按需加载当你需要用到某个js里面的函数什么鬼,或者某个css里的样式的时候你才开始加载这个文件. 然后是怎样实现的,简单来说就是在js中动态的createElem<script> ...

  2. Angular (SPA) WebPack模块化打包、按需加载解决方案完整实现

    文艺小说-?2F,言情小说-?3F,武侠小说-?9F long long ago time-1-1:A 使用工具,long long A ago time-1-2:A 使用分类工具,long long ...

  3. angularJS 按需加载

    之前做应用的时候都会在首页就把全站的js预先加载进来... 怎么实现按需加载? 首先在$routeProvider里面加resolve属性,angular-route提供的resolve功能,也就是路 ...

  4. react-router配合webpack实现按需加载

    很久没有写博客了.一直感觉没有什么要写的,但是这个东西确实有必要的.使用react开发,不可能一直打包到一个文件.小项目肯定没有问题,但是变大一旦到几兆,这个问题就很严重.现在又Commonjs,AM ...

  5. requirejs按需加载angularjs文件

    之前分享了一篇用ocLazyLoad实现按需加载angular js文件的博客.本来当时想会使用一种方法就行了.可最近刚好有时间,在网上查找了一下requirejs实现angular js文件按需加载 ...

  6. angularjs ocLazyLoad分步加载js文件,angularjs ocLazyLoad按需加载js

    用angular有一段时间了,平日里只顾着写代码,没有注意到性能优化的问题,而今有时间,于是捋了捋,讲学习过程记录于此: 问题描述:由于采用angular做了网页的单页面应用,需要一次性在主布局中将所 ...

  7. AngularJS中的按需加载ocLazyLoad

    欢迎大家讨论与指导 : ) 初学者,有不足的地方希望各位指出 一.前言 ocLoayLoad是AngularJS的模块按需加载器.一般在小型项目里,首次加载页面就下载好所有的资源没有什么大问题.但是当 ...

  8. .Net 程序集按需加载机制

    在开始本文之前先提两个疑问: 1.一个.Net程序依赖很多的dll,那个他们是在应用程序启动的时候全部把所依赖的动态库全部都加载到应用程序域中的呢还是有选择的加载呢? 2.当应用程序已经启动后我们动态 ...

  9. webpack 代码拆分,按需加载

    转自:https://segmentfault.com/a/1190000007649417?utm_source=weekly&utm_medium=email&utm_campai ...

随机推荐

  1. C#对象先序列化然后反序列化时间丢失八小时的问题

    把对象JSON序列化,然后反序列化后发现时间少了八小时.因为在东八区,所以序列的时候按照1970-01-01:08:00:00为基数取得差值,而反序列化的时候以1970-01-01:00:00:00作 ...

  2. Javascript中的apply与call详解

    JavaScript中有一个call和apply方法,其作用基本相同,但也有略微的区别. 一.方法定义 1.call 方法 语法:call([thisObj[,arg1[, arg2[, [,.arg ...

  3. 分布式环境下限流方案的实现redis RateLimiter Guava,Token Bucket, Leaky Bucket

    业务背景介绍 对于web应用的限流,光看标题,似乎过于抽象,难以理解,那我们还是以具体的某一个应用场景来引入这个话题吧. 在日常生活中,我们肯定收到过不少不少这样的短信,“双11约吗?,千款….”,“ ...

  4. vue中将汉字按照首字母排序,也适用于其他地方,但不适用多音字

    1,.定义数组,可以是从后台传回的数据,也可以是自己写的数据(要json格式) 2.定义一个计算属性,用于将汉字排序(多音字的排序不推荐用这个) 3.在页面渲染

  5. IQKeyboardManager使用方法

    使用方法: 将IQKeyboardManager 和 IQSegmentedNextPrevious类文件加进项目中.在AppDelegate文件中写下以下一行代码: [IQKeyBoardManag ...

  6. Swift基础之两指拉动图片变大变小

    我们在使用APP的时候,有时会发现有些图片可以通过两指进行放大.缩小,今天就实现这样的一种效果,比较简单,不喜勿喷.... var imageVi:UIImageView! = nil    var ...

  7. Mysql得隔离级别

    一.首先什么是事务? 事务是应用程序中一系列严密的操作,所有操作必须成功完成,否则在每个操作中所作的所有更改都会被撤消.也就是事务具有原子性,一个事务中的一系列的操作要么全部成功,要么一个都不做. 事 ...

  8. javaWeb之使用servlet搭建服务器入门

    servlet: 百度百科说法: Servlet(Server Applet)是Java Servlet的简称,称为小服务程序或服务连接器,用Java编写的服务器端程序,主要功能在于交互式地浏览和修改 ...

  9. 100-days: twenty-three

    Title: The surprising connection between single women and gentrification connection n.连接,联系,关系:连接点; ...

  10. cf379F New Year Tree (树的直径+倍增lca)

    可以证明,如果合并两棵树,新的直径的端点一定是原来两树中直径的端点 可以把新加两个点的操作看成是把两个只有一个点的树合并到原来的树上,然后用其中的一个点去和原来树上的直径两端点更新直径就可以了 #in ...