云服务器Ubuntu 16.04上Angular开发加载慢的优化方案咨询

我之前也碰到过一模一样的场景——用云服务器当远程开发环境，直接跑ng serve公网访问时加载慢得离谱。既然没法用生产构建模式，咱们可以从开发服务本身和服务器配置入手，试试这些优化手段：

1. 启用AOT编译（开发模式下） #

Angular默认开发模式用JIT编译，会把模板编译工作丢给浏览器，远程访问时浏览器要处理大量编译逻辑，自然慢。加上--aot参数提前编译模板：

ng serve --host 128.199.XXX.XXX --aot

第一次启动会稍慢，但后续热更新影响不大，客户端加载时的编译压力会大幅降低，加载速度能明显提升。

2. 禁用源映射 #

开发模式默认生成的源映射文件体积超大，远程传输时会拖慢加载速度。如果你的远程编码工具能直接关联本地代码（比如VS Code的Remote-SSH），完全可以关掉源映射：

ng serve --host 128.199.XXX.XXX --source-map=false

这会让打包后的JS/CSS文件体积骤减，加载速度立竿见影，唯一的小缺点是浏览器调试时没有源映射，但远程编码时咱们更多是在本地编辑器调试，影响不大。

3. 启用模块热替换（HMR） #

默认的热更新会重新加载整个页面，传输的数据量很大。启用HMR后，只会更新修改的模块，传输内容更少：

ng serve --host 128.199.XXX.XXX --hmr

大部分Angular CLI项目直接加这个参数就能用，要是不行的话，只需要在main.ts里加几行HMR的初始化代码就行，官方文档有现成的示例。

4. 给Node.js分配更多资源 #

ng serve编译时很吃内存，要是服务器内存不足，编译过程会卡顿，导致加载慢。可以给Node.js加内存限制：

NODE_OPTIONS="--max-old-space-size=4096" ng serve --host 128.199.XXX.XXX

这里分配了4G内存，你可以根据服务器实际配置调整数值。另外，关掉服务器上其他占用CPU/内存的进程，也能让编译速度更快。

5. 用Nginx反向代理开启Gzip压缩 #

ng serve本身默认不支持Gzip压缩，用Nginx做一层反向代理，开启Gzip后传输的文件体积能缩小70%左右。具体步骤：

• 安装Nginx：sudo apt-get install nginx
• 修改Nginx配置文件（比如/etc/nginx/sites-available/default）：

server {
    listen 80;
    server_name 128.199.XXX.XXX;

    gzip on;
    gzip_types text/css application/javascript application/json text/javascript;

    location / {
        proxy_pass http://localhost:4200;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

• 重启Nginx：sudo systemctl restart nginx
  之后直接访问服务器IP的80端口就行，不用加4200，加载速度会快很多。

6. 精简项目依赖和模块 #

检查项目里有没有多余的第三方库，或者有没有全量导入的库可以改成按需引入（比如Ant Design、Element UI这类UI库）。另外，看看app.module.ts里有没有导入不必要的模块，把这些去掉能减小打包体积，间接提升加载速度。

你可以把这些方法组合起来用，比如同时加--aot和--source-map=false，再配合Nginx的Gzip，应该能解决大部分加载慢的问题。

内容的提问来源于stack exchange，提问作者Guillermo Tabligan