介绍
小编给大家分享一下怎么给ASP。净核心Web发布包做减法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
<强> 1。引言
紧接上篇:ASP。网络核心Web应用程序应用第三方引导模板。这一节我们来讲讲如何优化ASP。网络核心Web发布包繁重的问题。
在ASP。网络核心Web应用程序中我们可以通过鲍尔或NPM来安装一些JS, CSS插件,来方便我们组织前端组件。但是这也给我带来了一个问题,那就是发布时需要把安装的鲍尔包或NPM包都要打包上传到服务器。
如果现在发布ASP。网络核心Web应用程序,wwwroot下已包含到项目中的文件都会被发布。虽然我们可以使用捆绑和微小的技术对js, css进行压缩来减少网页大小来提升加载速度。但是,我们发布包的大小却不能减少。
如果我们项目中引用了较少的前端包文件,也无可厚非,但当我们引用了较多的包文件时。那我们的发布包将会占用很大一部分空间,尤其是当我们进行CI/CD时,将会耗费大量的时间来进行包还原和包文件上传。
<强> 2。思路
我们就以集成AdminLte的ASP。净Mvc核心项目为例,看看发布的包大小究竟有多大。
从上图我们看到发布后wwwroot/插件文件夹就占了很大一部分空间。而wwwroot/插件中就是安装包的凉亭。
那这些鲍尔包中的文件我们都有用到吗?显然没有。我们就顶多引用了个js和css文件而已。到这里,减负的思路我们就清晰了。剔除ASP。净核心网络中未引用的鲍尔包文件,把没有引用到的文件删除不就得了? !
但是你随便打开一个凉亭包文件夹,你就不想这么做了,一个一个删要删到什么时候。而且如果直接去删除鲍尔包中无用的文件,可能会影响鲍尔包的管理,比如鲍尔包的升级降级。
不卖关子了,思路如下:
<李> 新建一个文件夹,将引用的文件复制到另外的目录。(保持原鲍尔包中的目录层级)
<李> 修改项目中的引用到新的文件夹拷贝路径下。
<李> 将原来的wwwroot \ plugins排除到项目外(从项目排除)
你可能会说,这么复杂啊,还不如我一个一个删除啊。别怕,我们让这一切自动化。而这个自动化工具就是Gulp.js。
<强> 3。行动
以我们之前的演示为例。
全局安装杯:
,美元npm install ——global 吞咽 作为项目的开发依赖(devDependencies)安装:
,美元npm install ——save-dev 饮而尽
美元,npm install ——save-dev 路径
美元,npm install ——save-dev 德尔 安装成功后会在项目根目录创建package-lock。json文件和node_components文件夹。
在项目根目录下创建一个名为gulpfile。js的文件。将以下代码粘贴复制进去。
const gulp =,要求(& # 39;杯# 39;);//1只引用饮而尽
var path =,要求(& # 39;path & # 39;);//2只引用路径
var del =,要求(& # 39;德尔# 39;);//3。引用德尔//定义路径
const paths =, {
,src: & # 39; wwwroot/插件/& # 39;
,桌子:& # 39;wwwroot/lib/& # 39;
};//定义需要完整复制的鲍尔文件夹
const copyFolders =, (
,“bootstrap",
,“font-awesome"
];//定义项目中需要引用的鲍尔包中的js, css文件
const copyFiles =, (
,“Ionicons/css/ionicons.css"
,“jquery/dist/jquery.min.js"
,“引导/dist/js/bootstrap.min.js"
];//在复制之前先清空生成目录
gulp.task(& # 39;清洁:所有# 39;,,function (cb), {
,德尔([paths.dest],, cb);
});//复制文件
gulp.task(& # 39;复制:文件# 39;,,(),=祝辞,{
,//循环遍历文件列表
,var tasks =, copyFiles.map (function (文件),{
,//拼接文件完整路径
,var scrFullPath =, path.join ($ {paths.src},,文件);
,//拼接完整目标路径
,var index =, file.lastIndexOf (& # 39;/& # 39;);
,var destPath =, file.substring(0,指数);
,var destFullPath=path.join ($ {paths.dest},, destPath);
,return gulp.src (scrFullPath)
.pipe才能(gulp.dest (destFullPath));
,});
});//复制文件夹
gulp.task(& # 39;复制:文件夹# 39;,,(),=祝辞,{
,var tasks =, copyFolders.map (function (文件夹),{
,//拼接完整目标路径
,var destFullPath =, path.join (“$ {paths.dest}”,文件夹);
,return gulp.src (path.join ($ {paths.src},, folder +, & # 39;/* */* & # 39;))
.pipe才能(gulp.dest (destFullPath));
,});
});//将三个任务组装在一起
gulp.task(& # 39;默认# 39;,,(& # 39;清洁:所有# 39;,,& # 39;复制:文件# 39;,,& # 39;复制:文件夹# 39;]);
