Minifiera html i ASP.NET Core

I det här inlägget beskrivs ett sätt att minifiera html i ASP.NET Core som jag har använt i ett projekt. Den främsta anledningen till att minifiera html är att få en snabbare webbplats och möjligen bättre sökrankning (SEO).

Det är knepigt att minifiera html och du måste noggrant kontrollera den minifierade koden för att se till att du inte har tagit bort mer än du ville.

Du kan minifiera html i servern innan sidan skickas till användaren, eller så kan du minifiera koden i vyerna innan de laddas upp till en server. Den beskrivna metoden i det här inlägget är att minifiera koden i vyerna innan de laddas upp till en server.

Npm, Node.js och paketinstallatören

Vi kommer att använda Gulp.js för att minifiera html. Gulp är en task runner i JavaScript som baseras på Node.js och utvecklas av Fractal Innovations. Gulp.js är ett npm-paket och vi behöver Package Installer som har skapats av Mads Kristensen för att installera npm-paket till vårt projekt. Du måste också ha Node.js installerat på din dator. Vi behöver 3 npm-paket, se innehållet i filen project.json nedan.

{
  "name": "mysite",
  "version": "1.0.0",
  "devDependencies": {
    "gulp": "^4.0.0",
    "gulp-transform": "^3.0.5",
    "gulp-util": "^3.0.8"
  }
}

Gulp-uppgift

Ej minifierade vyer i vårt projekt lagras i en mapp med namnet Views, vi måste byta namn på den här mappen till ViewTemplates. Våra minifierade vyer skall lagras i en mapp med namnet Views. Lägg till gulpfile.js i roten av ditt projekt, om denna fil inte existerar redan. Lägg till följande innehåll i filen gulpfile.js.

/// <binding BeforeBuild='minify-cshtml' />
var gulp = require('gulp');
var gutil = require('gulp-util');
var transform = require('gulp-transform');

// Create a task
gulp.task('minify-cshtml', run);

// Minify cshtml
function run()
{
    // Log that work is starting
    gutil.log("Processing files!");

    // Set the source document
    return gulp.src('./ViewTemplates/**/*.cshtml')
        .pipe(transform('utf8', minify))
        .pipe(gulp.dest('./Views'));

    // Signal that the task is done
    //done();

} // End of the run method

// Minify content
function minify(content)
{
    // Html comments
    content = content.replace(/(?!<pre[^>]*?>)(<!--[\s\S]*?-->)(?![^<]*?<\/pre>)/g, '');
    //content = content.replace(/<!--[\s\S]*?-->/g, '');
    //content = content.replace(/(?!<pre[^>]*?>)(INSERT SHIT HERE)(?![^<]*?<\/pre>)/g, '');

    // Razor comments
    content = content.replace(/(?!<pre[^>]*?>)(@\*[\s\S]*?\*@)(?![^<]*?<\/pre>)/g, '');
    //content = content.replace(/@\*[\s\S]*?\*@/g, '');

    // Javascript comments
    content = content.replace(/(?!<pre[^>]*?>)((\/\*([\s\S]*?)\*\/)|(\/\/(\s.*)))(?![^<]*?<\/pre>)/g, '');
    //content = content.replace(/(\/\*([\s\S]*?)\*\/)|(\/\/(\s.*))/gm, '');

    // Html
    content = content.replace(/(?!<pre[^>]*?>)([\s]{2,}(?!@))(?![^<]*?<\/pre>)/gi, '');
    //content = content.replace(/>[\s]*\<(?!(\/pre))/gi, '><');
    //content = content.replace(/>[\s]*\</gi, '><');
    //content = content.replace(/[\s]{2,}(?!@)/gi, '');

    // Line breaks
    content = content.replace(/(?!<pre[^>]*?>)([\r\n](?!@))(?![^<]*?<\/pre>)/g, '');
    content = content.replace(/(?!<pre[^>]*?>)([\r](?!@))(?![^<]*?<\/pre>)/g, '');
    content = content.replace(/(?!<pre[^>]*?>)([\n](?!@))(?![^<]*?<\/pre>)/g, '');
    //content = content.replace(/[\r\n](?!@)/g, '');
    //content = content.replace(/[\r](?!@)/g, '');
    //content = content.replace(/[\n](?!@)/g, '');

    //gutil.log(content);

    // Return the content
    return content;

} // End of the minify method

Denna uppgift kommer att hämta varje enskild vy i mappen ViewTemplates, minifiera innehållet med en serie RegEx-kommandon och spara den minifierade filen i mappen Views.

Task Runner Explorer

Task Runner Explorer i Visual Studio hjälper dig att hitta gulp-uppgifter (minify-cshtml). Du kan använda Task Runner Explorer för att köra en uppgift, felsöka en uppgift och lägga till bindningar för när en uppgift ska köras (före kompilering till exempel).