1.引言

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

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

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

如果我們項目中引用了較少的前端包文件，也無可厚非。但當我們引用了較多的包文件時。那我們的發(fā)布包將會占用很大一部分空間。尤其是當我們進行CI/CD時，將會耗費大量的時間來進行包還原和包文件上傳。

2. 思路

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

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

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

但是你隨便打開一個Bower包文件夾，你就不想這么做了，一個一個刪要刪到什么時候。而且如果直接去刪除Bower包中無用的文件，可能會影響bower包的管理，比如bower包的升級降級。

不賣關子了，思路如下：

1. 新建一個文件夾，將引用的文件復制到另外的目錄。（保持原bower包中的目錄層級）
2. 修改項目中的引用到新的文件夾拷貝路徑下。
3. 將原來的wwwroot\plugins 排除到項目外（Exclude From Project）

你可能會說，這么復雜啊，還不如我一個一個刪除啊。別怕，我們讓這一切自動化。而這個自動化工具就是Gulp.js。

3. 行動

以我們之前的Demo為例。

全局安裝 gulp：

$ npm install --global gulp

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

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

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

在項目根目錄下創(chuàng)建一個名為 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', () => {
 //循環(huán)遍歷文件列表
 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，如果發(fā)現有無法加載的error，那就是了。

運行gulp

右鍵gulpfile.js-->Task Runner Exploerer-->雙擊Gulpfile.js-Tasks-default，即可運行。操作動圖如下：

運行后，需要復制的Bower包文件和文件夾就會復制到wwwroot\lib文件夾下。如圖：

將bower包安裝文件夾排除到項目外。

更新項目中現有文件的引用到lib目錄下。

That's all, thank you.

4. 效果

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

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

最新評論