1.引言

緊接上篇：ASP.NET Core Web App應(yīng)用第三方Bootstrap模板。這一節(jié)我們來(lái)講講如何優(yōu)化ASP.NET Core Web發(fā)布包繁重的問(wèn)題。

在ASP.NET Core Web App中我們可以通過(guò)Bower或NPM來(lái)安裝一些JS、CSS插件，來(lái)方便我們組織前端組件。但是這也給我?guī)?lái)了一個(gè)問(wèn)題，那就是發(fā)布時(shí)需要把安裝的Bower包或NPM包都要打包上傳到服務(wù)器。

如果現(xiàn)在發(fā)布ASP.NET Core Web App，wwwroot下已包含到項(xiàng)目中的文件都會(huì)被發(fā)布。雖然我們可以使用捆綁和微小的技術(shù)對(duì)js、css進(jìn)行壓縮來(lái)減少網(wǎng)頁(yè)大小來(lái)提升加載速度。但是，我們發(fā)布包的大小卻不能減少。

如果我們項(xiàng)目中引用了較少的前端包文件，也無(wú)可厚非。但當(dāng)我們引用了較多的包文件時(shí)。那我們的發(fā)布包將會(huì)占用很大一部分空間。尤其是當(dāng)我們進(jìn)行CI/CD時(shí)，將會(huì)耗費(fèi)大量的時(shí)間來(lái)進(jìn)行包還原和包文件上傳。

2. 思路

我們就以集成AdminLte的ASP.NET Core Mvc項(xiàng)目為例，看看發(fā)布的包大小究竟有多大。

從上圖我們看到發(fā)布后wwwroot/plugins文件夾就占了很大一部分空間。而wwwroot/plugins中就是安裝的Bower包。

那這些Bower包中的文件我們都有用到嗎？顯然沒有。我們就頂多引用了個(gè)js和css文件而已。到這里，減負(fù)的思路我們就清晰了。剔除ASP.NET Core Web中未引用的Bower包文件，把沒有引用到的文件刪除不就得了？！

但是你隨便打開一個(gè)Bower包文件夾，你就不想這么做了，一個(gè)一個(gè)刪要?jiǎng)h到什么時(shí)候。而且如果直接去刪除Bower包中無(wú)用的文件，可能會(huì)影響bower包的管理，比如bower包的升級(jí)降級(jí)。

不賣關(guān)子了，思路如下：

1. 新建一個(gè)文件夾，將引用的文件復(fù)制到另外的目錄。（保持原bower包中的目錄層級(jí)）
2. 修改項(xiàng)目中的引用到新的文件夾拷貝路徑下。
3. 將原來(lái)的wwwroot\plugins 排除到項(xiàng)目外（Exclude From Project）

你可能會(huì)說(shuō)，這么復(fù)雜啊，還不如我一個(gè)一個(gè)刪除啊。別怕，我們讓這一切自動(dòng)化。而這個(gè)自動(dòng)化工具就是Gulp.js。

3. 行動(dòng)

以我們之前的Demo為例。

全局安裝 gulp：

$ npm install --global gulp

作為項(xiàng)目的開發(fā)依賴（devDependencies）安裝：

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

安裝成功后會(huì)在項(xiàng)目根目錄創(chuàng)建package-lock.json文件和node_components文件夾。

在項(xiàng)目根目錄下創(chuàng)建一個(gè)名為 gulpfile.js 的文件。將以下代碼粘貼復(fù)制進(jìn)去。

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/'
};

//定義需要完整復(fù)制的Bower文件夾
const copyFolders = [
 "bootstrap",
 "font-awesome"
];

//定義項(xiàng)目中需要引用的bower包中的js、css文件
const copyFiles = [
 "Ionicons/css/ionicons.css",
 "jquery/dist/jquery.min.js",
 "bootstrap/dist/js/bootstrap.min.js"
];

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

//復(fù)制文件
gulp.task('copy:file', () => {
 //循環(huán)遍歷文件列表
 var tasks = copyFiles.map(function (file) {
 //拼接文件完整路徑
 var scrFullPath = path.join(`${paths.src}`, file);
 //拼接完整目標(biāo)路徑
 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));

 });

});

//復(fù)制文件夾
gulp.task('copy:folder', () => {
 var tasks = copyFolders.map(function (folder) {
 //拼接完整目標(biāo)路徑
 var destFullPath = path.join(`${paths.dest}`, folder);
 return gulp.src(path.join(`${paths.src}`, folder + '/**/*'))
  .pipe(gulp.dest(destFullPath));
 });

});

//將三個(gè)任務(wù)組裝在一起
gulp.task('default', ['clean:all', 'copy:file', 'copy:folder']);

代碼注釋的很詳細(xì)，就不過(guò)多贅述了。有一點(diǎn)需要解釋下，為什么需要完整拷貝bootstrap和font-awesome呢？因?yàn)橐玫膄ont-awesome.min.css會(huì)引用包文件的一些字體文件等，為了省事，就把包全部拷貝了一遍。而一般絕大多數(shù)包都是簡(jiǎn)單拷貝css和js文件就ok了的。而至于什么時(shí)候拷貝文件，什么時(shí)候文件夾。很簡(jiǎn)單，默認(rèn)先拷貝文件，運(yùn)行項(xiàng)目，然后瀏覽器F12，如果發(fā)現(xiàn)有無(wú)法加載的error，那就是了。

運(yùn)行g(shù)ulp

右鍵gulpfile.js-->Task Runner Exploerer-->雙擊Gulpfile.js-Tasks-default，即可運(yùn)行。操作動(dòng)圖如下：

運(yùn)行后，需要復(fù)制的Bower包文件和文件夾就會(huì)復(fù)制到wwwroot\lib文件夾下。如圖：

將bower包安裝文件夾排除到項(xiàng)目外。

更新項(xiàng)目中現(xiàn)有文件的引用到lib目錄下。

That's all, thank you.

4. 效果

重新發(fā)布，我們可以發(fā)現(xiàn)發(fā)布的包大小已有40M減小到8M。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

最新評(píng)論