1 Introduction

In this section we will talk about how to optimize the heavy problem of ASP.NET Core Web publishing package.

In ASP.NET Core Web App, we can install some JS and CSS plugins through Bower or NPM to facilitate the organization of front-end components. But this also brings me a problem, that is, the installation of the Bower package or NPM package needs to be packaged and uploaded to the server.

If you publish the
ASP.NET

Core Web App now , the files that have been included in the project under wwwroot will be published. Although we can use bundling and tiny techniques to compress js and css to reduce the size of the page to improve the loading speed. However, the size of our release package cannot be reduced.

If we have fewer front-end package files referenced in our project, there is nothing wrong with it. But when we quote more package files. Then our release package will take up a lot of space. Especially when we do CI/CD, it will take a lot of time to perform package recovery and package file upload.

2. Thinking

Let’s take the ASP.NET Core Mvc project integrated with AdminLte as an example to see how big the package size is.

ASP.NET_Core__basic_series(9)_ASP.NET_Core_Web_release_package_strip_1.png

Package file size after publishing

From the above figure, we see that the wwwroot/plugins folder takes up a large part of the space after the release. The wwwroot/plugins is the Bower package installed.

Are we using the files in these Bower packages? Obviously not. We just quoted a js and css file at most. Here, we will be clear about the idea of ​​reducing the burden. Excluding the Bower package file that is not referenced in ASP.NET Core Web, delete the files that are not referenced. !

But if you open a Bower package folder casually, you don’t want to do this, and delete one by one. And if you directly delete the useless files in the Bower package, it may affect the management of the bower package, such as the downgrade upgrade of the bower package.

Do not sell off, the idea is as follows:

  1. Create a new folder and copy the referenced files to another directory. (Keep the directory hierarchy in the original bower package)
  2. Modify the references in the project to the new folder copy path.
  3. Exclude the original wwwroot\plugins from the project (Exclude From Project)

You might say that it’s so complicated, it’s better to delete it one by one. Don’t be afraid, let’s make it all automated. And this automation tool is
Gulp.js

.

3. Action

Take our previous
Demo

as an example.

  1. Install gulp globally:
    $ npm install –global gulp
  2. As a project development dependencies (devDependencies) installation:
$ npm install --save-dev gulp
$ npm install --save-dev path
$ npm install --save-dev del

After the installation is successful, the package-lock.json file and the node_components folder will be created in the project root directory.

  1. Create a file called gulpfile.js under the project root. Paste the following code into it.
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']);

The code comments are very detailed, but I will not repeat them. One thing to explain, why do you need a full copy of bootstrap and font-awesome? Because the referenced font-awesome.min.css will refer to some font files of the package file, etc., in order to save trouble, copy the package all over again. In general, most packages are simple to copy css and js files. And when to copy files, when to folder. Very simple, the default is to copy the file, run the project, and then the browser F12, if you find an error that can not be loaded, it is.

  1. Run gulp
    right click gulpfile.js–>Task Runner Exploerer–> Double-click Gulpfile.js-Tasks-default to run. The operation diagram is as follows:

    ASP.NET_Core__basic_series(9)_ASP.NET_Core_Web_release_package_strip_2.gif

    Run gulp.gif

After running, the Bower package files and folders that need to be copied will be copied to the wwwroot\lib folder. Figure:

ASP.NET_Core__basic_series(9)_ASP.NET_Core_Web_release_package_strip_3.png

Operation result

  1. Exclude the bower package installation folder from the project.
  2. Update references to existing files in the project to the lib directory.
  3. That’s all, thank you.

4. Effect

Re-release, we can find that the size of the released package has been reduced from 40M to 8M.

ASP.NET_Core__basic_series(9)_ASP.NET_Core_Web_release_package_strip_4.png

Optimized post package size

Orignal link:https://www.jianshu.com/p/135716d05435