How to use uglify-js to minify in node.js and how to debug minified source
After bundling files in a node.js application, the next step would be to minify them.
Minify means to compress a file by removing superfluous line breaks, comments, and whitespace in the js.
First, install the uglify-js module that will minify the file.
npm install uglify-js -gIf you have ever seen a minified file, you know that you cannot follow the source even if you look at the contents.
However, if you specify a source map when minifying with uglify-js, you can use the browser’s source map to debug with the js source before minifying.
Use the following command to minify
uglifyjs .\dist\bundle.js -c --source-map --output .\dist\bundle.min.jsSpecify the file you want to compress next to uglifyjs and then the -c option. It did not work the other way around.
| options | meaning |
|---|---|
| -c | Compression. |
| -o(–output) | File name to output |
| –source-map | Output source map file |
A file is created with the following configuration
dist directory bundle.js bundle.min.js bundle.min.js.map
Try to read a minify (minify) file from an html file.
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>uglifyjs test</title>
</head>
<body>
<script type="text/javascript" src=".\dist\bundle.min.js"></script>
</body>
</html>When viewed in a browser, you will see that it is displayed correctly as shown below.
Debugging minified files in Chrome
In Chrome, press F12 to open the Developer Tools.
Click on the dot next to the X button (Close) in the upper right corner.
You will see “Settings.” Select it.
Check the “Enable JavaScript source maps” checkbox. This will allow debugging.
コメント