本文是按着ng2官网的高级内容“Deployment”的思路整理得出的,原文虽然在angular2的中文站下挂着,截止目前却还是英文版未翻译,笔者就在这里结合自己的理解给出原文的一点点整理。
这是原文地址:

1. 最简单的发布流程

最简单指的是开发完成好一个ng2应用后,做最少的事情让用户能在自己的浏览器内访问到此应用。从这句话出发就很容易想到,如何做到“最简单”,自然就是什么都不做,把写好的整个项目往服务器一扔搞定。
当然,即使是对项目文件什么都不做,服务器还是得做一些事情来配合ng2开发的前后端完全分离的网站:

  • a. 调整index.html中的<base />标签的值,因为在服务器中的index.html不一定就在根目录下,此时就必须指定其路径。
  • b. 调整404错误页,将所有的404错误都重定向到index.html,只有这样才能不让服务器的路由影响到我们ng2的前端路由(深层原因其实就是,我们在浏览器输入地址时,地址先被服务器认为是错误路径给返回错误了,这就得让服务器认为地址有误时将其原封不动重定向给index.html,让其成功被客户端路由识别)
  • c. 开启生产模式,ng2默认的引导都会开始开发模式,在引导的代码里执行 enableProdMode() 即可开启生产模式
  • d. 简化node_modules。 原因是开发项目时安装的那一大堆(20500+的文件以及180M+的大小)npm包,其实绝大多数在App运行于浏览器时是用不着的,发布项目时,去掉其中用不着的那一大堆文件,自然能节省很大的空间。

2. 产品级优化

接下来,为了优化我们得产品,还需要做一些事情。

  • AOT编译

    全称是 Ahead-of-Time compilation。明确点讲,就是默认情况下ng2使用的是即时编译的方式,App运行过程中需要使用到哪个模块了,就找到它然后编译它,然后才运行,别的且不说,实时编译相比预编译要多使用一个Angular Compiler,听起来就能想到这会拖慢速度,实际上拖慢了不是一点两点,是一大半甚至更多,这货体积贼大。

  • 使用webpack(包括AOT)

    webpack是用于代替默认的SystemJS的模块化工具,可以说使用SystemJS进行ng2的打包只是在试水闹着玩,如果要上升到产品级别,webpack要强大得多,包括了预编译以及代码压缩,而不是像SystemJS那样,每使用到新的模块甚至组件模板都要发起请求来获取。

  • 使用rollup消除无用代码

    这指的是摇树优化,完成的事情是自动去除掉不再使用的代码,来减小体积,不过需要我们具体去完成的事情好像没有,这个ng2自己帮我们完成了。

  • 修剪库依赖

    说的好像是可以进一步修剪使用到的库,举了个例子是RxJS,这个库在开发ng2时会使用到其中的部分功能,比如说Observable,但更多时候也只有这一个模块被用到了,所以可以只引入一个Observable。这其实是ng2自身还存在的一点点美中不足,至少笔者就感觉很怪,为什么用着@angular/xxx的包,还得引入个rxjs或者Observable,期待ng2后续的版本会给出更优雅的方式吧。

  • 性能测试优先

    讲的就是通过性能测试手段来优化产品了

3. 原文后面还分ng2端与服务端重新理了一遍上面讲到的

    • ng2端要做的事情有:

      a. <base>标签的路径配置
      b. 开启ng2的生产模式
      c. 使用模块懒加载(路由中使用loadChildren)
      原文还写了一小段来说不需要把懒加载模块import进立即加载的模块中(比如把一个懒加载模块import在了根模块里),这其实不会懒加载,模块还是跟随根模块一起被加载了。

    • 服务端要做的事情有:

      a. 错误页都要重定向到index.html(防止丢失前端路由)
      b. 跨域配置(前后端分离的应用通常要解决的问题)

 4. 自己的补充

  最后是自己对ng2这样的强大前端框架下的前后端分离应用的一点拙见。主要是针对于其前后端分离的情景,这就导致客户端变得不可信,使得认证变得困难。

  起初笔者的想法是就将前端网站当成是原生的App来看待,原生App不也是跟服务器分离的吗,那原生应用如何做到认证的,ng2的客户端也能做到不是吗。

  不过最近又有一点想通,客户端的认证,终究要依赖于一对AppId与AppSecret或是类似的东西,这种数据在原生应用里得到保护的能力终究是大于Web应用的,毕竟在web客户端来保存的话存在哪呢,所有的资源脚本,终究是透明的,那web应用何必非要向原生应用靠拢,即使是基于ng2的网站,不要觉得浪费,套个.Net MVC的壳来保护认证参数,并不是什么得不偿失的事情,笼统的来讲就是,不同的平台要发挥自己平台的优势,不是非要为了做全平台而写完全通用的代码的。

Angular2发布思路(整理官网Deployment页面)的更多相关文章

  1. 把包发布到npm官网

    一.包 包就是多模块的集合,CommonJS的包规范给程序员提供了组织模块的标准,减少沟通成本. 规范: 所有的模块放在demo文件夹下(包名)的lib文件夹里面 在lib文件夹的同级目录下新建ind ...

  2. tornado web高级开发项目之抽屉官网的页面登陆验证、form验证、点赞、评论、文章分页处理、发送邮箱验证码、登陆验证码、注册、发布文章、上传图片

    本博文将一步步带领你实现抽屉官网的各种功能:包括登陆.注册.发送邮箱验证码.登陆验证码.页面登陆验证.发布文章.上传图片.form验证.点赞.评论.文章分页处理以及基于tornado的后端和ajax的 ...

  3. nginx ----> 官网about页面(翻译)

    Nginx about链接:https://nginx.org/en/ nginx 基本的HTTP服务器功能其他HTTP服务器功能邮件代理服务器功能TCP / UDP代理服务器功能架构和可扩展性经测试 ...

  4. 【HTML响应式项目】成人教育官网前端页面(HTML+CSS+JS实现三端适应)

    这个页面是在校参赛的小组项目,除首页和所有课程页面以外由组内成员编写,发博客纯属记录. 项目源码已上传至码云仓库:https://gitee.com/ynavc/sss 项目演示地址:http://y ...

  5. mysql官网下载页面

    http://dev.mysql.com/downloads/mysql/5.6.html#downloads

  6. RavenDB官网文档翻译系列第一

    本系列文章主要翻译自RavenDB官方文档,有些地方做了删减,有些内容整合在一起.欢迎有需要的朋友阅读.毕竟还是中文读起来更亲切吗.下面进入正题. 起航 获取RavenDB RavenDB可以通过Nu ...

  7. Web程序设计基础期末大作业——模仿QQ飞车手游S联赛官网编写的网页

    QQ飞车手游是我非常喜欢的游戏,也是我现在为数不多的常在玩的游戏,刚好我Web程序设计基础的大作业是要做一套网站,我就借此机会模仿飞车S联赛官网的页面自己做了一个网页,又加了一些自己的元素,由于我做这 ...

  8. 开源Inno Setup官网下载、安装、打包教程(官网安装向导中文语言包)

    安装Inno Setup篇 1.搜索Inno Setup 2.下载Inno Setup 3.选择下载最新 innosetup-5.5.9-unicode.exe 版本(innosetup-5.5.9. ...

  9. 伪GZCC官网

    <html class="no-js"><head> <meta charset="utf-8"> <meta htt ...

随机推荐

  1. 【JAVA笔记】JAVA后端实现统一扫码支付:微信篇

    最近做完了一个项目,正好没事做,产品经理就给我安排了一个任务.   做一个像收钱吧这样可以统一扫码收钱的功能.   一开始并不知道是怎么实现的,咨询了好几个朋友,才知道大概的业务流程:先是开一个网页用 ...

  2. iOS核心笔记—MapKit框架-基础

    1.MapKit框架简介: ✨了解:MapKit框架使用须知:①.MapKit框架中所有的数据类型的前缀都是MK:②.需要导入#import <MapKit/MapKit.h>头文件:③. ...

  3. 拆开Ceph看队列和线程

    作者:吴香伟 发表于 2017/01/08 版权声明:可以任意转载,转载时务必以超链接形式标明文章原始出处和作者信息以及版权声明 我上小学时家离学校很远,家在某某山脚,学校在镇里.每周回家一趟,周五放 ...

  4. Linux的CentOS7系统下配置LNMP

    友情提示:在执行以下操作之前,请确保您已经安装了centos7,因为以下所有操作均是在centos7下操作完成的. 1.首先要停掉本机自带的防火墙,再配置iptables,开放21/22/80/808 ...

  5. html5_canvas初学

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Android apk应用程序签名

    Android apk应用程序签名 分类: Android 2012-11-25 19:33 570人阅读 评论(0) 收藏 举报 一.Android Apk签名 Apk签名首先要有一个keystor ...

  7. PowerPoint超链接字体颜色修改、怎么去掉超链接下划线

    经常在做PPT幻灯片时会遇到这样一个问题,给文字加超链接后发现链接的颜色是蓝色的,而且还带有下划线,这种效果与主题的色彩搭配简直是太影响美观效果了.有没有什么办法可以去掉PPT中的超链接下划线?再将超 ...

  8. BZOJ 3479: [Usaco2014 Mar]Watering the Fields(最小生成树)

    这个= =最近刷的都是水题啊QAQ 排除掉不可能的边然后就最小生成树就行了= = CODE: #include<cstdio>#include<iostream>#includ ...

  9. Windows内存管理简介:

    1:连续的内存空间分配: (1)单一连续分配:只能单作业,单任务运行: 分为系统和用户区:用户区是指除了系统需外左右的内存,由于单用户,单任务,要不都被占用,要不全空   (2):固定空间分配:固定分 ...

  10. Unity3d的序列帧动画

    马上这星期就要过去了,为了完成每星期写一篇博客的目标,熬夜也要写完. 最近项目中用到了很多序列帧动画,之前看教程也接触过序列帧动画,但当时没用到,就没仔细研究,这次就借着这个机会好好总结一下序列帧动画 ...