angular+nginx 打包部署压缩优化两步曲

  • 前言
  • angular打包瘦身优化（从根于上解决问题）
  • 前期措施
  • 后期措施
  • 使用压缩分块打包命令
  • 针对angular打包内存溢出的使用
  • 瘦身小结
  • 使用Nginx部署Angular压缩优化（进一步压缩）


前言

本文通过（angular打包瘦身优化）及（Nginx部署压缩）两个方面解决nginx部署angular访问太慢的问题，阅读时间大概20分钟。

angular打包瘦身优化（从根于上解决问题）

据不同的项目情况，此处分两种情况进行处理。

1.前期措施 是指项目框架设计搭建阶段，并没有存在业务代码开发

2.后期措施 是指已经完全开发完成！

前期措施

如果你使用TypeScript开发 请使用Tslint，它可以很好的约束和规范开发人员的一些编码习惯，遵守统一约定。提高代码可读性，可维护性和功能性错误。这个和打包优化有什么关系？ 实际开发中会遇到很多语法性错误，那webpage打包的时候就会内存溢出。导致一些官方内置的压缩策略将会失效！

根据系统业务模型，抽离出可复用的组件，模板。减少重复性的组件存在

后期措施

使用工具查看依赖树，清除多余依赖

如果你希望你的应用初次加载不影响用户体验，同时又不寄望于用户的网速时，通过分析工具对引用类库进行分析，显得尤为重要。

安装工具

第一步 安装依赖

npm install --save-dev webpack-bundle-analyzer

第二步 配置package.json

// 添加script："bundle-report": "webpack-bundle-analyzer dist/stats.json"
"scripts": {
...
  "bundle-report": "webpack-bundle-analyzer dist/stats.json",
...
},

第三步 打包 注意输出的统计信息文件名称，与第二步对应

ng build --prod --stats-json

第四步 启动

npm run bundle-report

如图所示

nginx 请求直接加载静态文件 nginx静态资源加载非常慢_bundle

使用压缩分块打包命令

针对angular6以下的版本使用此命令进行打包

ng build --prod --configuration=prod --vendorChunk=true --aot=true --commonChunk=true --optimization=true --base-href ./

针对angular打包内存溢出的使用

1.安装 increase-memory-limit 增加node内存限制工具

npm i increase-memory-limit
npm i cross-env
  1. 配置package.json
// LIMIT 是指定node 内存大小
"scripts": {
    "fix-memory-limit": "cross-env LIMIT=8000 increase-memory-limit"
  }
  1. 执行一次 (只需要执行一次即可) 然后正常编译项目即可 （使用 tslink，规范语法可以很大程度上避免此问题）
npm run fix-memory-limit

瘦身小结

常用类库的瘦身小结：

  • moment.js，注意locale文件，可以只保留zh-cn，剔除其它本土化文件；（可瘦身100-200k）
  • echarts，注意只打包只用到的图表；（视情况而定，一般可瘦身200-300k）
  • 只选择一个组件库，比如ng-zorro和ngx-bootstrap，尽量只选其一；
  • webgis应用，如果功能较简单情况，可使用轻量的类库，如leaflet；

使用Nginx部署Angular压缩优化（进一步压缩）

打开nginx配置 nginx.conf文件 一般在nginx安装目录 conf/nginx.conf

将以下配置添加到你的配置即可

http {
    gzip  on;
	gzip_min_length 1k;
	gzip_buffers 4 16k;
	gzip_http_version 1.0;
	gzip_comp_level 5;
	gzip_types text/plain application/javascript application/css  text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
	gzip_vary off;
	gzip_disable "MSIE [1-6]\.";

....
}