給ASP.NET Core Web發佈包作減法

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包的升級降級。

不賣關子了，思路以下：

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

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

3. 行動

以咱們以前的Demo爲例。

1. 全局安裝 gulp：
   $ npm install --global gulp
2. 做爲項目的開發依賴（devDependencies）安裝：

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

安裝成功後會在項目根目錄建立package-lock.json文件和node_components文件夾。

1. 在項目根目錄下建立一個名爲 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，那就是了。

1. 運行gulp
   右鍵gulpfile.js-->Task Runner Exploerer-->雙擊Gulpfile.js-Tasks-default，便可運行。操做動圖以下：
   
   運行後，須要複製的Bower包文件和文件夾就會複製到wwwroot\lib文件夾下。如圖：
   
2. 將bower包安裝文件夾排除到項目外。
3. 更新項目中現有文件的引用到lib目錄下。
4. That's all, thank you.

4. 效果

從新發布，咱們能夠發現發佈的包大小已有40M減少到8M。