给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包的升级降级。
不卖关子了,思路如下:
- 新建一个文件夹,将引用的文件复制到另外的目录。(保持原bower包中的目录层级)
- 修改项目中的引用到新的文件夹拷贝路径下。
- 将原来的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,那就是了。
4. 运行gulp
右键gulpfile.js-->Task Runner Exploerer-->双击Gulpfile.js-Tasks-default,即可运行。操作动图如下:
运行后,需要复制的Bower包文件和文件夹就会复制到wwwroot\lib文件夹下。如图:
5. 将bower包安装文件夹排除到项目外。
6. 更新项目中现有文件的引用到lib目录下。
7. That's all, thank you.
4. 效果
重新发布,我们可以发现发布的包大小已有40M减小到8M。
给ASP.NET Core Web发布包做减法的更多相关文章
- NET Core Web发布包
给ASP.NET Core Web发布包做减法 https://www.cnblogs.com/sheng-jie/p/9122582.html 1.引言 紧接上篇:ASP.NET Core Web ...
- ASP.NET Core Web API下事件驱动型架构的实现(一):一个简单的实现
很长一段时间以来,我都在思考如何在ASP.NET Core的框架下,实现一套完整的事件驱动型架构.这个问题看上去有点大,其实主要目标是为了实现一个基于ASP.NET Core的微服务,它能够非常简单地 ...
- 给控件做数字签名之一:将控件打包为Web发布包 [转]
微软代码签名证书使用指南 http://www.wotrust.com/support/signcode_guide.htm 签名重要性:http://www.wotrust.com/FAQ/whyS ...
- Docker容器环境下ASP.NET Core Web API应用程序的调试
本文主要介绍通过Visual Studio 2015 Tools for Docker – Preview插件,在Docker容器环境下,对ASP.NET Core Web API应用程序进行调试.在 ...
- Docker容器环境下ASP.NET Core Web API
Docker容器环境下ASP.NET Core Web API应用程序的调试 本文主要介绍通过Visual Studio 2015 Tools for Docker – Preview插件,在Dock ...
- ASP.NET Core Web服务器 Kestrel和Http.sys 特性详解
ASP.NET Core Web服务器 Kestrel和Http.sys 特性详解 1.1. 名词解释 1.2. Kestrel基本工作原理 1.2.1. Kestrel的基本架构 1.2.2. Ke ...
- 【译】使用Jwt身份认证保护 Asp.Net Core Web Api
原文出自Rui Figueiredo的博客,原文链接<Secure a Web Api in ASP.NET Core> 摘要:这边文章阐述了如何使用 Json Web Token (Jw ...
- [转帖]ASP.NET Core Web服务器 Kestrel和Http.sys 特性详解
ASP.NET Core Web服务器 Kestrel和Http.sys 特性详解 https://www.cnblogs.com/vipyoumay/p/7525478.html ASP.NET C ...
- List多个字段标识过滤 IIS发布.net core mvc web站点 ASP.NET Core 实战:构建带有版本控制的 API 接口 ASP.NET Core 实战:使用 ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目 Using AutoFac
List多个字段标识过滤 class Program{ public static void Main(string[] args) { List<T> list = new List& ...
随机推荐
- form表单老忘的
禁止拉伸 textarea{ resize:none; } 左侧 label 对齐注意事项 必须要和 label-width 共同使用,才会生效. 表单域标签的宽度,直接写入 Form, 子元素 fo ...
- 定时任务框架Quartz-(一)Quartz入门与Demo搭建
注:本文来源于:是Guava不是瓜娃 <定时任务框架Quartz-(一)Quartz入门与Demo搭建> 一.什么是Quartz 什么是Quartz? Quartz是OpenSympho ...
- Ajax原理一篇就够了
Ajax原理一篇就够了 一.什么是Ajax Ajax(Asynchronous JavaScript and XML的缩写)是一种异步请求数据的web开发技术,对于改善用户的体验和页面性能很有帮助.简 ...
- neutron--ml2 plugin
ml2 plugin 对 plugin 的功能进行抽象和封装,有 ml2 plugin ,各种 network 无需开发自己的 plugin,只需开发 ml2 plugin 相对应的 driver , ...
- git 随笔(随时更新)
w:跳到下个词前面, e:跳到下个词后面,b是跳到上一个单词前面. v:选择 ,可以批量操作 q + a: 录制宏, a 是存录制地方,q录制完毕. @a :执行录制操作. @a 前面➕数字:例如1 ...
- samba服务器一次排错
在全局配置完,可用.配置区域配置的时候,添加一个共享的文件夹时, 使用testparm 命令去检查配置.发现path路径无法正确读出.在window上去访问,显示无法正常访问. 修改path的位置,放 ...
- maven安装与环境变量配置
一.什么是maven Maven基于项目对象模型(POM Project Object Model),可以通过一小段描述信息(配置文件)来管理项目的构建.报告和文档的软件项目管理工具. 同时也是跨平台 ...
- ansible字符串处理(一)
[root@node-1 test]# ansible-playbook hba_card_check.yml PLAY [compute[0]] ************************** ...
- centos 7.5+如何格式化硬盘
[root@k8s-node2 ~]# fdisk -l Disk /dev/sdb: bytes, sectors Units = sectors of * = bytes Sector size ...
- 了解 ptyhon垃圾回收机制
Python的GC模块主要运用了“引用计数”(reference counting)来跟踪和回收垃圾.在引用计数的基础上,还可以通过“标记-清除”(mark and sweep)解决容器对象可能产生的 ...