如何为ASP.NET核心网发布包做减法

1.介绍

紧接着上一章：ASP.NET核心网应用第三方引导模板。在本节中，我们将讨论如何优化ASP.NET核心网发布包的繁琐问题。

在ASP.NET核心Web App中，我们可以通过Bower或者NPM安装一些JS和CSS插件，方便我们对前端组件的组织。但是这也给我带来了一个问题，就是发布的时候，需要将安装好的Bower包或者NPM包打包上传到服务器。

如果ASP.NET核心网络应用现在发布，wwwroot下的项目中包含的所有文件都将被发布。虽然我们可以通过使用绑定和微小技术来压缩js和css，以减少网页的大小和提高加载速度。然而，我们的配送包裹的大小不能减少。

如果我们的项目中引用的前端包文件很少，这是可以理解的。但是当我们参考更多的包文件时。那么我们的配送包将占据很大一部分空间。尤其是我们做CI/CD的时候，恢复包和上传包文件会花费很多时间。

2.思考

让我们以集成了AdminLte的ASP.NET的Core MVC项目为例，看看发布的包有多大。

从上图中，我们可以看到wwwroot/plugins文件夹在发布后占据了很大一部分空间。Wwwroot/plugins是已安装的Bower软件包。

我们使用这些凉亭包里的所有文件吗？显然不是。我们最多只是引用了一个js和css文件。在这里，我们有一个明确的减轻负担的想法。删除ASP.NET coreweb中未引用的Bower包文件，并删除未引用的文件。

但是如果你随意打开一个Bower包文件夹，你就不想做了。什么时候一个一个删除？此外，如果直接删除bower包中的无用文件，可能会影响bower包的管理，如Bower包的升级和降级。

毫无悬念，思路如下：

创建一个新文件夹，并将引用的文件复制到另一个目录。(保留原始bower包中的目录级别)修改项目中对新文件夹复制路径的引用。把原来的wwwroot\plugins排除在项目之外，你可能会说，太复杂了，不如我一个一个删除。别害怕，我们会自动完成这一切。这个自动化工具是Glow . js

3.行动

以我们之前的演示为例。

全球安装大口：

$ npminstall-全局安装作为项目的开发依赖项：

$ npminstall-save-dev glow $ npminstall-save-dev path $ npminstall-save-dev del将在成功安装后在项目根目录中创建package-lock.json文件和node_components文件夹。

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

const大口=require('大口')；//1.reference gulf var path=require(' path ')；//2.引用path var del=require(' del ')；//3.Reference del//定义路径const path={ src : ' wwwroot/plugins/'，dest 3360 ' wwwroot/lib/' }；//定义需要完全复制的Bower文件夹。Const Copy Folders=['bootstrap '，' font-真棒']；//在bower包中定义js和css文件，以便在项目中引用。const Copy Files=[' ion cons/CSS/ion cons . CSS '，' jquery/dist/jquery.min.js '，' bootstrap/dist/js/bootstrap . min . js ']；//复制前清除生成的目录gout . task(' clean : all '，function(CB){ del([path . dest]，CB)；});//复制文件gout . task(' copy : file '，()={//遍历文件列表vartasks=copy files . map(function(file){//拼接文件完整路径varscrfullpath=path . join(` $ { path . src } `，file)；//拼接完整的目标路径var index=file . last indexoff('/')；var destPath=file.substring(0，索引)；var destFullPath=path . join(`$ { path . dest } `，destPath)；返回大口。src(scrFullPath)。pipe(grave . dest(destFullPath))；});});//复制文件夹gout . task(' copy : folder '，()={ vartasks=copy folders . map(function(folder){//拼接完整的目标路径vardest full path=path . join(`$ { path . dest } `，folder)；return glugh . src(path . join(` $ { path . src } `，folder '/**/*))。pipe(grave . dest(destFullPath))；});});//将三个任务组合在一起grave . task(' default '，['clean:all '，' copy:file '，' copy : folder '])；代码注释非常详细，我就不赘述了。有一点需要说明。为什么需要完全复制bootstrap和font-awesome？因为引用的font-awesome.min.css会引用包文件的一些字体文件等。为了省事，所有的包都复制了一遍。一般来说，大多数包都可以简单地复制css和js文件。至于什么时候复制文件，什么时候折叠。很简单。默认情况下，首先复制文件，运行项目，然后浏览F12。如果有无法加载的错误，那就是了。

大口跑

右键单击gulf file . js-task runner expander-双击Gulf file . js-Tasks-默认运行。操作示意图如下：

运行后，要复制的Bower包文件和文件夹将被复制到wwwroot\lib文件夹。如图所示：

从项目中排除bower包安装文件夹。

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

就这些，谢谢。

4.影响

重新发布后，我们可以发现发布的包大小已经从40M减少到8M。

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。有问题可以留言交流。谢谢你的支持。