How to 'Minify' JavaScript Code

Minify JS with VS code extension

I can't suggest any plugins for you. There may be a limited selection, since this isn't really the proper way to do things, but you seem to realize this.

If you insist on doing this, and can't find a plugin which fits your needs, you can always use CTRL+F with the regular expression (?: |\n):

If you use tabs instead of spaces, then you should be able to replace them with \t.

The catch is that this will obviously replace spaces within your document, but since browsers automatically remove extra spaces, this hopefully shouldn't be an issue.

I would suggest looking into vite. It's a newer and faster alternative to webpack, and I personally find it a lot easier to use and understand.

how to minify JavaScript file in Visual Studio Code

As of now, there are some available extensions: for example Minify or JS & CSS Minifier

Note: You can find extensions on the VS Code Marketplace.

Or directly from VS Code by searching from the Extensions pane, on the left side (Ctrl + Shift + X).

How to minify JS in PHP easily...Or something else

I have used a PHP implementation of JSMin by Douglas Crockford for quite some time. It can be a little risky when concatenating files, as there may be a missing semicolon on the end of a closure.

It'd be a wise idea to cache the minified output and echo what is cached so long as it's newer than the source file.

require 'jsmin.php';

if(filemtime('scripts_template.js') < filemtime('scripts_template.min.js')) {
  read_file('scripts_template.min.js');
} else {
  $output = JSMin::minify(file_get_contents('scripts_template.js'));
  file_put_contents('scripts_template.min.js', $output);
  echo $output;
}

You could also try JShrink. I haven't ever used it before, since I haven't had difficulty with JSMin before, but this code below should do the trick. I hadn't realized this, but JShrink requires PHP 5.3 and namespaces.

require 'JShrink/Minifier.php';

if(filemtime('scripts_template.js') < filemtime('scripts_template.min.js')) {
  read_file('scripts_template.min.js');
} else {
  $output = \JShrink\Minifier::minify(file_get_contents('scripts_template.js'));
  file_put_contents('scripts_template.min.js', $output);
  echo $output;
}

Minify javascript in cshtml file asp.net core

Generally, the Asp.net core application using BuildBundlerMinifier package to bundle and minify static assets (JavaScript, CSS, and images files). So, to minify the JavaScript scripts within the @section Scripts tag, you have to extract the scripts into an external script file, then using BuildBundlerMinifier to minify the JS file. More detail information about using BuildBundlerMinifier, see Bundle and minify static assets in ASP.NET Core.

Besides, you could also try to use some open source package to minify the inline JS. Such as: WebMarkupMin.

You could install this package via NuGet Package Manager (Based on your application version to select the package version):

Then, in the Startup.cs file, add app.UseWebMarkupMin(); and services.AddWebMarkupMin(); in the Configure and ConfigureServices methods, code as below:

    public void ConfigureServices(IServiceCollection services)
    {
        services.AddRazorPages();

        services.AddWebMarkupMin(
       options =>
       {
           options.AllowMinificationInDevelopmentEnvironment = true;
           options.AllowCompressionInDevelopmentEnvironment = true;
       })
       .AddHtmlMinification(
           options =>
           {
               options.MinificationSettings.RemoveRedundantAttributes = true;
               options.MinificationSettings.RemoveHttpProtocolFromAttributes = true;
               options.MinificationSettings.RemoveHttpsProtocolFromAttributes = true;
           })
       .AddHttpCompression();
    }

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        else
        {
            app.UseExceptionHandler("/Error");
            // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
            app.UseHsts();
        }

        app.UseHttpsRedirection();

        //Required using WebMarkupMin.AspNetCore5;
        app.UseWebMarkupMin();

        app.UseStaticFiles();

        app.UseRouting();
        app.UseAuthorization();
        app.UseEndpoints(endpoints =>
        {
            endpoints.MapRazorPages();
        });
    }

After that the JavaScript script has been minified. The screenshot as below:

Before:

After:

JavaScript minification and compression

Since minification makes the code difficult to debug, is it possible
to do on-demand de-minification on client-side to cover-up for cases
where you actually need to debug and investigate something on the
website?

Sort of. Minified javascript has the same structure, it just does things like delete extra spaces and shorten variable names. So you can easily make the code readable again, either manually or with a script, but you can't recover variable names, so the code will still be harder to work with. So, if you have the original code, definitely don't get rid of it. Save the minified code separately.

I remember reading somewhere that one can enable compression of all
resources (like images, css, javascript etc.) by setting some options
in the Apache Web Server.

Yes, it's called gzip compression. It's not unique to apache, but you would need to configure your server to enable it.

Is there any difference in the javascript compression done at Apache
level and, the one done using tools like YUI Compressor?

Yes. YUI compressor is a minifier - the output is valid javascript. Server-side compression is more analogous to zipping a file - the browser must decode it before it can be used. Using the two together would yield the smallest filesize.

---

Related Topics