数码控科技猎奇Iphone动漫星座游戏电竞lolcosplay王者荣耀攻略allcnewsBLOGNEWSBLOGASKBLOGBLOGZSK全部技术问答问答技术问答it问答代码软件新闻开发博客电脑/网络手机/数码笔记本电脑互联网操作系统软件硬件编程开发360产品资源分享电脑知识文档中心IT全部全部分类全部分类技术牛文全部分类教程最新网页制作cms教程平面设计媒体动画操作系统网站运营网络安全服务器教程数据库工具网络安全软件教学vbscript正则表达式javascript批处理更多»编程更新教程更新游戏更新allitnewsJava新闻网络医疗信息化安全创业站长电商科技访谈域名会议专栏创业动态融资创投创业学院 / 产品经理创业公司人物访谈营销开发数据库服务器系统虚拟化云计算嵌入式移动开发作业作业1常见软件all电脑网络手机数码生活游戏体育运动明星影音休闲爱好文化艺术社会民生教育科学医疗健康金融管理情感社交地区其他电脑互联网软件硬件编程开发360相关产品手机平板其他电子产品摄影器材360硬件通讯智能设备购物时尚生活常识美容塑身服装服饰出行旅游交通汽车购房置业家居装修美食烹饪单机电脑游戏网页游戏电视游戏桌游棋牌游戏手机游戏小游戏掌机游戏客户端游戏集体游戏其他游戏体育赛事篮球足球其他运动球类运动赛车健身运动运动用品影视娱乐人物音乐动漫摄影摄像收藏宠物幽默搞笑起名花鸟鱼虫茶艺彩票星座占卜书画美术舞蹈小说图书器乐声乐小品相声戏剧戏曲手工艺品历史话题时事政治就业职场军事国防节日风俗法律法规宗教礼仪礼节自然灾害360维权社会人物升学入学人文社科外语资格考试公务员留学出国家庭教育学习方法语文物理生物工程学农业数学化学健康知识心理健康孕育早教内科外科妇产科儿科皮肤科五官科男科整形中医药品传染科其他疾病医院两性肿瘤科创业投资企业管理财务税务银行股票金融理财基金债券保险贸易商务文书国民经济爱情婚姻家庭烦恼北京上海重庆天津黑龙江吉林辽宁河北内蒙古山西陕西宁夏甘肃青海新疆西藏四川贵州云南河南湖北湖南山东江苏浙江安徽江西福建广东广西海南香港澳门台湾海外地区

如何给ASP.NET Core Web发布包做减法详解

来源:脚本之家  责任编辑:小易  

1.引言

紧接上篇:ASP.NET Core Web App应用第三方Bootstrap模板。这一节我们来讲讲如何优化ASP.NET Core Web发布包繁重的问题。

在ASP.NET Core Web App中我们可以通过Bower或NPM来安装一些JS、CSS插件,来方便我们组织前端组件。但是这也给我带来了一个问题,那就是发布时需要把安装的Bower包或NPM包都要打包上传到服务器。

如果现在发布ASP.NET Core Web App,wwwroot下已包含到项目中的文件都会被发布。虽然我们可以使用捆绑和微小的技术对js、css进行压缩来减少网页大小来提升加载速度。但是,我们发布包的大小却不能减少。

如果我们项目中引用了较少的前端包文件,也无可厚非。但当我们引用了较多的包文件时。那我们的发布包将会占用很大一部分空间。尤其是当我们进行CI/CD时,将会耗费大量的时间来进行包还原和包文件上传。

2. 思路

我们就以集成AdminLte的ASP.NET Core Mvc项目为例,看看发布的包大小究竟有多大。

从上图我们看到发布后wwwroot/plugins文件夹就占了很大一部分空间。而wwwroot/plugins中就是安装的Bower包。

那这些Bower包中的文件我们都有用到吗?显然没有。我们就顶多引用了个js和css文件而已。到这里,减负的思路我们就清晰了。剔除ASP.NET Core Web中未引用的Bower包文件,把没有引用到的文件删除不就得了?!

但是你随便打开一个Bower包文件夹,你就不想这么做了,一个一个删要删到什么时候。而且如果直接去删除Bower包中无用的文件,可能会影响bower包的管理,比如bower包的升级降级。

不卖关子了,思路如下:

  1. 新建一个文件夹,将引用的文件复制到另外的目录。(保持原bower包中的目录层级)
  2. 修改项目中的引用到新的文件夹拷贝路径下。
  3. 将原来的wwwroot\plugins 排除到项目外(Exclude From Project)

你可能会说,这么复杂啊,还不如我一个一个删除啊。别怕,我们让这一切自动化。而这个自动化工具就是Gulp.js

3. 行动

以我们之前的Demo为例。

全局安装 gulp:

$ npm install --global gulp

作为项目的开发依赖(devDependencies)安装:

$ npm install --save-dev gulp
$ npm install --save-dev path
$ npm install --save-dev del

安装成功后会在项目根目录创建package-lock.json文件和node_components文件夹。

在项目根目录下创建一个名为 gulpfile.js 的文件。将以下代码粘贴复制进去。

const gulp = require('gulp');//1. 引用gulp
var path = require('path');//2. 引用path
var del = require('del');//3.引用del

//定义路径
const paths = {
 src: 'wwwroot/plugins/',
 dest: 'wwwroot/lib/'
};

//定义需要完整复制的Bower文件夹
const copyFolders = [
 "bootstrap",
 "font-awesome"
];

//定义项目中需要引用的bower包中的js、css文件
const copyFiles = [
 "Ionicons/css/ionicons.css",
 "jquery/dist/jquery.min.js",
 "bootstrap/dist/js/bootstrap.min.js"
];

//在复制之前先清空生成目录
gulp.task('clean:all', function (cb) {
 del([paths.dest], cb);
});

//复制文件
gulp.task('copy:file', () => {
 //循环遍历文件列表
 var tasks = copyFiles.map(function (file) {
 //拼接文件完整路径
 var scrFullPath = path.join(`${paths.src}`, file);
 //拼接完整目标路径
 var index = file.lastIndexOf('/');
 var destPath = file.substring(0, index);
 var destFullPath=path.join(`${paths.dest}`, destPath);
 return gulp.src(scrFullPath)
  .pipe(gulp.dest(destFullPath));

 });

});

//复制文件夹
gulp.task('copy:folder', () => {
 var tasks = copyFolders.map(function (folder) {
 //拼接完整目标路径
 var destFullPath = path.join(`${paths.dest}`, folder);
 return gulp.src(path.join(`${paths.src}`, folder + '/**/*'))
  .pipe(gulp.dest(destFullPath));
 });

});

//将三个任务组装在一起
gulp.task('default', ['clean:all', 'copy:file', 'copy:folder']);

代码注释的很详细,就不过多赘述了。有一点需要解释下,为什么需要完整拷贝bootstrap和font-awesome呢?因为引用的font-awesome.min.css会引用包文件的一些字体文件等,为了省事,就把包全部拷贝了一遍。而一般绝大多数包都是简单拷贝css和js文件就ok了的。而至于什么时候拷贝文件,什么时候文件夹。很简单,默认先拷贝文件,运行项目,然后浏览器F12,如果发现有无法加载的error,那就是了。

运行gulp

右键gulpfile.js-->Task Runner Exploerer-->双击Gulpfile.js-Tasks-default,即可运行。操作动图如下:


运行后,需要复制的Bower包文件和文件夹就会复制到wwwroot\lib文件夹下。如图:


将bower包安装文件夹排除到项目外。

更新项目中现有文件的引用到lib目录下。

That's all, thank you.

4. 效果

重新发布,我们可以发现发布的包大小已有40M减小到8M。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

您可能感兴趣的文章:


  • 本文相关:
  • 详解在azure上部署asp.net core web app
  • asp.net core web app应用第三方bootstrap模板的方法教程
  • mvc后台创建json(list)前台接受并循环读取实例
  • 如何使用asp.net制作简单的验证码
  • asp.net发邮件的几种方法汇总
  • c#正则用法两例
  • 介绍几个asp.net中容易忽略但却很重要的方法函数
  • 此页的状态信息无效,可能已损坏 的处理办法及原因分析
  • 基于.net中的数字与日期格式化规则助记词的使用详解
  • asp.net中调用winrar实现压缩解压缩的代码
  • asp.net遍历文件夹下所有子文件夹并绑定到gridview上的方法
  • .net 扩展实现代码
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved