《Angular4之解决构建包过大问题》

前言：

   公司新开发软件即将投入正式使用，此次软件开发采用前后端分离的思想，继而前端要独立部署，构建打包后发现体积为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秒。

结语：

   目前正在进行的是将源码压缩，然后构建打包之后，打包之后文件再压缩。静待花开。