解脱美眉内衣小游戏,神经算法,媚骨销魂免费阅读
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包的升级降级。
不卖关子了，思路如下：
你可能会说，这么复杂啊，还不如我一个一个删除啊。别怕，我们让这一切自动化。而这个自动化工具就是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。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对移动技术网的支持。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
Net Core Web Api项目与在NginX下发布的方法
asp.net core3.1 引用的元包dll版本兼容性问题解决方案
IdentityServer4实现.Net Core API接口权限认证(快速入门)
ASP.NET Core MVC通过IViewLocationExpander扩展视图搜索路径的实现
网友评论