How to use uglify-js to minify in node.js and how to debug minified source

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 -g

If 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.js

Specify the file you want to compress next to uglifyjs and then the -c option. It did not work the other way around.

optionsmeaning
-cCompression.
-o(–output)File name to output
–source-mapOutput 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.

node.jsでminify(ミニファイ)するuglify-jsの使い方とminify(ミニファイ)されたソースのデバッグ方法

Reference Site

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.

node.jsでminify(ミニファイ)するuglify-jsの使い方とminify(ミニファイ)されたソースのデバッグ方法

You will see “Settings.” Select it.

node.jsでminify(ミニファイ)するuglify-jsの使い方とminify(ミニファイ)されたソースのデバッグ方法

Check the “Enable JavaScript source maps” checkbox. This will allow debugging.

コメント

タイトルとURLをコピーしました