Minify javascript nén jss css bị lỗi web năm 2024

There are several ways you can implement this as mentioned in other answers, including allowing your CMS to handle everything (perhaps via a plugin), but in all cases:

• You have a single codebase.
• You never need to manually edit the minified files as these are generated automatically as part of a "build" process.
• How you actually link to these minified files can vary.

Example

I thought I would add a minimal (reasonably complete) example that can be implemented easily on Apache (with the help of .htaccess/mod_rewrite) without having to modify any of our existing code.

Setup...

• Your original (unminified) CSS and JS files are located in an /assets directory (part of your codebase). Perhaps /assets/css and /assets/js subdirectories respectively.
• In your HTML source you reference only the original CSS and JS files (as you are doing currently). And these are the only files you manually edit. eg.
  (We'll use Apache/mod_rewrite later to serve the minified files, without having to change the HTML source.)
• When you are ready to publish, you run a "build" script that minifies your CSS and JS assets. Your minified files are stored away from your codebase, perhaps in a /minified directory. The contents of which copies the structure of your /assets directory, and to avoid confusion, names the minified files with a min file extension. eg. /assets

  /css  
      mystyles.css  
  /js  
      myscript.jss  
  

  /minified

  /css  
      mystyles.min.css  
  /js  
      myscript.min.css  
  

  0. (NB: As noted above, these are never referenced directly by your HTML source.) (The actual method of minification (ie. the scrips to use) I'll leave for the reader to source.)
• When accessing your site on your development server, only the original (unminified) files are used. And the live site references the minified files. (Although this can be easily overridden, either to access the minified files in development or to access the unminified files on the live site.)
• Simply deleting the /minified directory will result in the orginal/unminified files being served.
• Then "the magic"... use Apache mod_rewrite (in .htaccess) to internally rewrite requests for the CSS and JS files in the /assets directory to the corresponding file in the /minified directory, but only if it exists and only on the "live site".

Determining the "live site". This can usually be detected automatically, perhaps by checking the requested hostname (eg.

/assets
    /css
        mystyles.css
    /js
        myscript.jss
/minified
    /css
        mystyles.min.css
    /js
        myscript.min.css

5 for the live site and

/assets
    /css
        mystyles.css
    /js
        myscript.jss
/minified
    /css
        mystyles.min.css
    /js
        myscript.min.css

6 for development) or perhaps using some other server trigger (eg. a defined variable in the server config on Apache). For this example, I'll assume that if the

/assets
    /css
        mystyles.css
    /js
        myscript.jss
/minified
    /css
        mystyles.min.css
    /js
        myscript.min.css

7 subdomain is requested then we are on the live site.

Minification is the process of minimizing code and markup in your web pages and script files. It’s one of the main methods used to reduce load times and bandwidth usage on websites. Minification dramatically improves site speed and accessibility, directly translating into a better user experience. It’s also beneficial to users accessing your website through a limited data plan and who would like to save on their bandwidth usage while surfing the web.

Why minify HTML, CSS, and JavaScript (JS)

When creating HTML, CSS and JavaScript (JS) files, developers tend to use spacing, comments and well-named variables to make code and markup readable for themselves. It also helps others who might later work on the assets. While this is a plus in the development phase, it becomes a negative when it comes to serving your pages. Web servers and browsers can parse file content without comments and well-structured code, both of which create additional network traffic without providing any functional benefit.

To minify JS, CSS and HTML files, comments and extra spaces need to be removed, as well as crunch variable names so as to minimize code and reduce file size. The minified file version provides the same functionality while reducing the bandwidth of network requests.

Here’s how a developer would write a JavaScript file for usage in a website:

// return random number between 1 and 6  

function dieToss() { return Math.floor(Math.random() * 6) + 1; } // function returns a promise that succeeds if a 6 is tossed function tossASix() { return new RSVP.Promise(function(fulfill, reject) {

var number = Math.floor(Math.random() * 6) + 1;  
if (number === 6) {  
  fulfill(number);  
} else {  
  reject(number);  
}  

}); } // display toss result and launch another toss function logAndTossAgain(toss) { console.log("Tossed a " + toss + ", need to try again."); return tossASix(); } function logSuccess(toss) { console.log("Yay, managed to toss a " + toss + "."); } function logFailure(toss) { console.log("Tossed a " + toss + ". Too bad, couldn't roll a six"); } // use promise paradigm to try three times to toss a 6 tossASix() .then(null, logAndTossAgain) //Roll first time .then(null, logAndTossAgain) //Roll second time .then(logSuccess, logFailure); //Roll third and last time White space is used generously and long, coherent names are used to declare variables.

When minified, the same code looks like this:

function dieToss(){return Math.floor(6*Math.random())+1}function tossASix(){return new RSVP.Promise(function(a,b){var c=Math.floor(6*Math.random())+1;6===c?a(c):b(c)})}function logAndTossAgain(a){return console.log("Tossed a "+a+", need to try again."),tossASix()}function logSuccess(a){console.log("Yay, managed to toss a "+a+".")}function logFailure(a){console.log("Tossed a "+a+". Too bad, couldn't roll a six")}tossASix().then(null,logAndTossAgain).then(null,logAndTossAgain).then(logSuccess,logFailure); The minified version of this sample code is 48% smaller. In some cases, minification can reduce file size by as much as 60%. For instance, there’s a 176 kb difference between the original and minified version of the JQuery JavaScript library.

Minification has become standard practice for page optimization. All major JavaScript library developers (bootstrap, JQuery, AngularJS, etc.) provide minified versions of their files for production deployments, usually denoted with a min.js name extension.

The CDN Perspective

Minification is a major component of front end optimization (FEO), a set of tools and techniques that reduce file sizes and the number of associated web page requests.

However, performing and managing minification can be cumbersome. Manual minification is a bad practice and becomes virtually impossible where large files are concerned. Even automated tools (of which there are many) can prove to be challenging, as you’ll be forced to keep separate development and production file versions. Keeping them in sync is often burdensome.

A content delivery network (CDN) provides automated minification, relieving you of the overhead required to minify your own files. You keep your original, uncompressed files on your main server, while the CDN automatically stores minified variants on its caching servers and PoPs—keeping them in sync with source modifications.

Imperva CDN automatically compresses HTML, CSS and JavaScript files stored on its servers to accelerate page load times. This is done without requiring any server configuration on your end, while at the same time protecting your organization—large or small—from major threats (e.g., DDoS attacks).