这是我人生的第一篇文章，写得不好。请原谅我！

我是java web开发工程师，和angularjs4有一点接触。最近看到angular js4-angle的一个很漂亮的背景模板，所以在CSDN下载测试。点击这里下载。

模板的一些照片

相信所有有经验的人都知道，要运行，首先要安装nodejs，配置nodejs环境等。所以我就不在这里细说了。网上有很多这样的文章，我指的文章是，点击这里。

一切都完成了，然后打包部署，在服务器上播放。

以下是我的问题和解决方法：

1.ng build是打包的，加载的js文件高达8.6M

Ng build直接在本地nginx或tomcat中运行，感觉还不错。我以为搞定了，真的很开心！只需用winFcp复制到自己的阿里巴巴云，打开主页，瞬间就迷茫了。我等了2分多钟才打开这个页面。

我确信我这里有问题，因为我在角度页面上的演示看起来是这样的。看下面的图片

于是我在百度上搜索了一下，发现ng build有模式选择，包装是生产模式(-prod)

2.ng buildprod packaging，这次比js4.1m更好。

ng build-prod build-prod-aot的两个代码是一样的，我不知道在-prod开始的时候默认会打开AOT

这里，在- prod参数之后，angular-cli将删除所有未使用的包，而- AOT参数是让angular-cli启动预编译功能

在命令行中输入此代码时出现问题。错误：找不到模块：错误：无法解决。/$ $ _ gendir/app/app . module . ngfactory '

我已经找到了解决这个问题的方法

因为angular-cli的版本有点低，所以通过以下代码升级到最新版本

NPM安装-保存-开发@ angular/[电子邮件保护]最后，让我们看看它是如何工作的。

'

少是少了很多，但远远不够。有什么问题？

有什么办法吗？我只能继续百度。我找到了ng serve的代码，它是启动一个小型的web服务器来托管应用程序。

AOT惊讶地发现js文件只比官方网站好1.1M

那么问题来了。对我来说，把开发环境放在服务器上似乎不现实。

3.nginx开启gzip优化，这次js是1.2M

我又开始了我的百度之旅，发现了一个东西——gzip，就是在nginx上打开gzip，优化访问速度

所以，我把这段代码添加到了nginx中

gzip ongzip _ min _ length 1kgzip _ buffers 4 16kgzip _ comp _ level 2；gzip _ types text/plain application/JavaScript application/x-JavaScript text/CSS application/XML text/JavaScript application/x-http PD-PHP image/JPEG image/gif image/png；gzip _ vary ongzip_disable 'MSIE [1-6] '；文章没有说这个项目放在哪里，但是这里说了下面的话，就放在服务器括号里。

最终结果如下

不过这个演示和官网的演示好像还是有差距的。下面的gzip改一下可能更好。同时，我也发现了一个问题。此模板仅在加载所有内容后打开页面。其实有些东西以后可以重新加载，所以我会在模板本身进行优化。

找到更好的优化方法我会及时更新。谢谢你。如果有任何错误，请指出来

2017年9月15日晚更新

上周我优化了很多。

自从我上次写了这篇文章，我就一直在网上搜索优化方法。有一天发现一篇文章说先压缩gzip再上传到服务器会快很多。我尝试过，但没有得到这样的结论。在nginx上，可以打开缓存功能。它压缩项目的gzip，然后将其缓存在服务器上。每次打开网站，都是在gzip之后取文件，表示你压缩上传，然后配置压缩。有了VPN，我搬到了谷歌。

我找到了一个比我更努力的朋友，地址

这个好友从7.07s优化到732ms，从4.5M优化到317.5kb，测试URL是点击跳转

有些是重复的，有些是好的做法，如下所示

(1)要实现缓存，实际的操作过程是将这个项目添加到nginx中的服务器

位置~* 。(gif|jpe？g | png | ico | swf)$ { # d-days # h-hours # m-分钟过期168小时；add _ header Pragma publicadd_header Cache-Control '公共，必须-重新验证，代理-重新验证'；} #因为js和css文件需要更改，所以设置时间为5分钟。位置~ * 。(CSS | JS)$ { expire 5m；add _ header Pragma publicadd_header Cache-Control '公共，必须-重新验证，代理-重新验证'；}(2)gzip压缩参数和地址更改(可能是官网，但无论如何都做得很漂亮)，gzip压缩变成如下

gzip ongzip _ static ongzip _ comp _ level 2；gzip _ http _ version 1.0gzip _ proxied任何；gzip _ min _ length 1100gzip _ buffers 16 8kgzip _ types text/plain application/JavaScript application/x-JavaScript text/CSS application/XML text/JavaScript application/x-http PD-PHP image/JPEG image/gif image/png；#禁用IE 6，因为存在一些已知问题gzip_disable 'MSIE [1-6]。(?* SV1)'；#为下游代理添加vary头，以避免将缓存的gzip文件发送到IE6 gzip _ vary on(3)发现项目打包时有错误。我把AOT打成了AOT，符号之间的差异让script.js文件少了一半

现在网页优化比官网好。如果要做，剩下的应该是减少项目中无用的公共模块，可能会减少一半。这非常令人满意。这篇文章到此结束。主要介绍我部署的全过程。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。