Angular4 体积优化

图书馆项目前端优化方案

1. 使用命令：ng build –prod
2. 使用gulp进行图片，css，js压缩
3. 使用nginx开启gzip压缩
4. Angular4升级到angular5进行压缩

---

1. 使用命令

1 npm install --save-dev @angular/cli@latest
2 npm install
3 ng build --prod --aot --output-path=prod --base-href ./
使用ng build --prod --aot --output-path=prod --base-href ./  进行打包，他和ng build的区别是第一个可以angular框架自动帮助我们优化，减少我们的空间

---

报错

Module not found: Error: Can’t resolve ‘./$$_gendir/app/app.module.ngfactory’ ，在使用的时候使用命令的时候会包这个错误，原因是因为我们的版本太低了，需要升级一下版本，
1. 重新安装我们的node_moduole ：npm install
报错:出现这个原因是因为我们有一个包没有下载下来，所以我们是用npm install。从国外下载就可以了~

---

体积展示

使用ng build打包发布之后运行是11秒，使用优化后的命令打包发布运行之后在3秒。
ng build的体积在14。优化后的体积是3.8

---

Gulp压缩

我们使用Gulp进行压缩，压缩的内容是js，css，HTML，image文件。下面是步骤和可能出现的问题
1全局安装gulp
cnpm install gulp -g
安装插件
cnpm install gulp-rename —重命名文件
cnpm install gulp-uglify —压缩js文件
npm install gulp-imagemin —压缩图片
cnpm install gulp-htmlmin —压缩HTML
cnpm install gulp-minify-css —压缩css

2 建立一个gulpfile.js 文件

输入以下内容

//导入工具包  require（‘node_modules里对应模块’）
var gulp = require('gulp'),     //本地安装gulp所用到的地方
    uglify = require('gulp-uglify');
    imagemin = require('gulp-imagemin');
    htmlmin = require('gulp-htmlmin');
        cssmin = require('gulp-minify-css');
//定义一个testJS任务（自定义任务名称）
gulp.task('testJS', function () {
    gulp.src('prod/*.js') //该任务针对的文件
        .pipe(uglify())//该任务调用的模块
        .pipe(gulp.dest('dist'));//输出路径
});
//定义一个testAssets任务压缩js
gulp.task('testAssets', function () {
    gulp.src('prod/assets/js/*.js') //多个文件以数组形式传入
        .pipe(uglify())
        .pipe(gulp.dest('dist/assets/js'));
});
  //定义一个testImagemin任务压缩image
  gulp.task('testImagemin', function () {
    gulp.src('prod/assets/image/*.{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/assets/image'));
});

gulp.task('testImage', function () {
    gulp.src('prod/*.{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'));
});

//定义一个testHtmlmin任务压缩html
gulp.task('testHtmlmin', function () {
    var options = {
        removeComments: true,//清除HTML注释
        collapseWhitespace: true//压缩HTML
           };
    gulp.src('prod/*.html')
        .pipe(htmlmin(options))
        .pipe(gulp.dest('dist'));
});
//定义一个testCssmin任务压缩css
gulp.task('testCssmin', function () {
    gulp.src('prod/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/assets/css'));
});

---

3执行脚本
在这个过程中我们的程序会自动生成一个dist文件，生成的原因是因为我们在gulpfile.js文件中指定了位置。
3.1 gulp testJS
3.2 gulp testAssets
3.3 gulp testImagemin
3.4 gulp testImage
3.5 gulp testHtmlmin
3.6 gulp testCssmin

---

4全局替换让prod下的.map替换到dist文件下

输入：cp -r prod\*.map dist\

---

出现问题

出现这个问题的时候就说明我们不能使用cnpm进行下载，应该使用npm下载

---

出现这个问题的原因是因为我们在安装压缩图片插件的时候使用的cnpm，我们应该使用的是npm，因为在国内没有，所以会报错

---

出现这个错是因为你node_modules中缺少包，这个时候只需要下载下来就可以，缺少什么就下什么

cnpm install --save-dev XX

---

出现这个原因的时候说明你已经不用执行这条命令，他存在了，执行下面6 下面的命令

---

成果展示

---

总结

只实现了两种以后再补充吧，嘿嘿，我的小图书管瘦了好多呢~~~