图书馆项目前端优化方案
- 使用命令:ng build –prod
- 使用gulp进行图片,css,js压缩
- 使用nginx开启gzip压缩
- 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 下面的命令
成果展示
总结
只实现了两种以后再补充吧,嘿嘿,我的小图书管瘦了好多呢~~~