前言：

   公司新開發軟體即將投入正式使用，此次軟體開發採用前後端分離的思想，繼而前端要獨立部署，構建打包後發現體積為53MB左右，在效能方面亟待提高。究竟如何提高呢？預知後事如何，請聽小編娓娓道來。

正文：

提高效能方案：

        1.藉助nginx,使用gzip壓縮，

        2.從頻寬考量，lvs替代nginx

        3.angular4升級為5，在進行升級研究時遇到問題，繼而此方案擱置

        4.使用程式碼自動構建工具gulp,將構建包的css/html/js/images壓縮。

        5.將前端資源分別部署，減少IO頻寬，壓力分散

        6.提高區域網內的IO頻寬

        7.升級腳手架angular/cli

主角：

   以上幾種方案都可以嘗試，今天講述的主角是構建工具gulp與升級腳手架angular/cli兩種方式結合，具體做法如下：

第一步：

全域性安裝gulp:cnpm install gulp -g

第二步：

新建package.json檔案：cnpm init

備註：此檔案是基於nodejs專案必不可少的配置檔案，是存放在專案根目錄的普通JSON檔案。

{
  "name": "deploy-later",
  "version": "1.0.0",
  "description": "this is a test",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "linda",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-htmlmin": "^3.0.0",
    "gulp-imagemin": "^4.0.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-uglify": "^3.0.0"
  }
}
 

第三步：

本地安裝gulp外掛：cnpm install gulp --save-dev

第四步：

安裝相應具備壓縮功能的外掛

壓縮css外掛-gulp-minify-css

壓縮html外掛-gulp-htmlmin

壓縮image外掛-gulp-imagemin

壓縮js外掛-gulp-uglify

安裝命令：cnpm install gulp-minify-css --save-dev,其他外掛安裝命令亦是如此。

第五步：

新建gulpfile.js檔案（此檔案是gulp專案的配置檔案，是位於專案根目錄的普通JS檔案）

var gulp = require('gulp'),
    uglify = require('gulp-uglify');
    imagemin = require('gulp-imagemin');
    htmlmin = require('gulp-htmlmin');
     cssmin = require('gulp-minify-css');
 
gulp.task('testJS', function () {
    gulp.src('src/deploy-before/*.js') 
        .pipe(uglify())
        .pipe(gulp.dest('dist/deploy-later'));
});

gulp.task('testAssets', function () {
    gulp.src('src/deploy-before/assets/js/*.js') 
        .pipe(uglify())
        .pipe(gulp.dest('dist/deploy-later/assets/js'));
});
   
gulp.task('testImagemin', function () {
    gulp.src('src/deploy-before/*.{png,jpg,gif,ico}')
        .pipe(imagemin({
            optimizationLevel: 5, //型別：Number  預設：3  取值範圍：0-7（優化等級）
            progressive: true, //型別：Boolean 預設：false 無失真壓縮jpg圖片
            interlaced: true, //型別：Boolean 預設：false 隔行掃描gif進行渲染
            multipass: true //型別：Boolean 預設：false 多次優化svg直到完全優化
        }))
        .pipe(gulp.dest('dist/deploy-later'));
});
gulp.task('Imagemin', function () {
    gulp.src('src/deploy-before/assets/images/*.{png,jpg,gif,ico}')
        .pipe(imagemin({
            optimizationLevel: 5, //型別：Number  預設：3  取值範圍：0-7（優化等級）
            progressive: true, //型別：Boolean 預設：false 無失真壓縮jpg圖片
            interlaced: true, //型別：Boolean 預設：false 隔行掃描gif進行渲染
            multipass: true //型別：Boolean 預設：false 多次優化svg直到完全優化
        }))
        .pipe(gulp.dest('dist/deploy-later/assets/images'));
});
gulp.task('Image', function () {
    gulp.src('src/deploy-before/assets/images/login/*.{png,jpg,gif,ico}')
        .pipe(imagemin({
            optimizationLevel: 5, //型別：Number  預設：3  取值範圍：0-7（優化等級）
            progressive: true, //型別：Boolean 預設：false 無失真壓縮/jpg圖片
            interlaced: true, //型別：Boolean 預設：false 隔行掃描gif進行渲染
            multipass: true //型別：Boolean 預設：false 多次優化svg直到完全優化
        }))
        .pipe(gulp.dest('dist/deploy-later/assets/images/login'));
});

gulp.task('testHtmlmin', function () {
    var options = {
        removeComments: true,//清除HTML註釋
        collapseWhitespace: true//壓縮HTML
           };
    gulp.src('src/deploy-before/*.html')
        .pipe(htmlmin(options))
        .pipe(gulp.dest('dist/deploy-later'));
});
gulp.task('testCssmin', function () {
    gulp.src('src/deploy-before/assets/css/*.css')
        .pipe(cssmin({
            advanced: false,//型別：Boolean 預設：true [是否開啟高階優化（合併選擇器等）]
            compatibility: 'ie7',//保留ie7及以下相容寫法 型別：String 預設：''or'*' [啟用相容模式； 'ie7'：IE7相容模式，'ie8'：IE8相容模式，'*'：IE9+相容模式]
            keepBreaks: true,//型別：Boolean 預設：false [是否保留換行]
            keepSpecialComments: '*'
            //保留所有特殊字首 當你用autoprefixer生成的瀏覽器字首，如果不加這個引數，有可能將會刪除你的部分字首
        }))
        .pipe(gulp.dest('dist/deploy-later/assets/css'));
});
 

整體結構：

結果：

   腳手架升級之前，構建包為53MB左右，升級為1.6.1之後，構建包為35MB左右，使用gulp壓縮，構建包為23MB左右，前後對比，檔案體積縮小了將近一倍哦，根據壓測結果，在訪問速度上由12秒，減少到了3、4秒。

結語：

   目前正在進行的是將原始碼壓縮，然後構建打包之後，打包之後檔案再壓縮。靜待花開。