《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秒。
結語:
目前正在進行的是將原始碼壓縮,然後構建打包之後,打包之後檔案再壓縮。靜待花開。