本文是按着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. GCD简介

    什么是GCD 全称是Grand Central Dispatch,可译为"牛逼的中枢调度器" 纯C语言,提供了非常多强大的函数   GCD的优势 GCD是苹果公司为多核的并行运算提 ...

  2. ZLG_GUI和3D显示的移植

    最近学习NRF51822,想在OLED上移植个强大的GUI ,本来想学习emWIN的,甚至想直接学习自带GUI的嵌入式操作系统RTThread,但是......哎,太懒了.....现在觉得ZLG_GU ...

  3. JavaScript 语法

    一.JavaScript简介 1.JavaScript是个什么东西? 它是个脚本语言,需要有宿主文件,它的宿主文件是HTML文件. 2.它与Java什么关系? 没有什么直接的联系,Java是Sun公司 ...

  4. Android MemInfo

    Note that memory usage on modern operating systems like Linux is an extremely complicated and diffic ...

  5. Python实现多线程HTTP下载器

    本文将介绍使用Python编写多线程HTTP下载器,并生成.exe可执行文件. 环境:windows/Linux + Python2.7.x 单线程 在介绍多线程之前首先介绍单线程.编写单线程的思路为 ...

  6. 复制vmware虚拟机后,eth0无法显示问题

    1. rm /etc/udev/rules.d/70-persistent-net.rules 2. 删除 /etc/sysconfig/network-scripts/ifcfg-eth0下的UUI ...

  7. Python 最大公约数的欧几里得算法及Stein算法

    greatest common divisor(最大公约数) 1.欧几里得算法 欧几里德算法又称辗转相除法,用于计算两个正整数a,b的最大公约数. 其计算原理依赖于下面的定理: 两个整数的最大公约数等 ...

  8. Java中显示图片的方法

    最近在做一个swing小项目,其中需要把存储在硬盘中的图片文件显示出来,总结了如下方法: 1. Graphics g = getGraphics();String name = "E:/Ca ...

  9. Giraph入门

    概要 这是一个Giraph的入门教程,主要用来运行少量输入的Giraph程序,并不能用于生产环境. 在这个教程中,我们将会在一个物理机器行部署一个单节点,伪分布的Hadoop集群.这个节点既是mast ...

  10. javah的使用

    2.我们要开始写javah的命令,以便生成对应的C语言头文件 D:\我的文档\workspace\PrepareForExam\src>javah -classpath D:\我的文档\work ...