Shulou(Shulou.com)06/03 Report--

Today, I will talk to you about the tools and methods of analyzing JavaScript packaged products, which may not be well understood by many people. in order to make you understand better, the editor has summarized the following contents for you. I hope you can get something according to this article.

Analyzing the size of JavaScript Bundles in your page and limiting the number of JavaScript in your page can reduce the time browsers spend parsing, compiling, and executing JavaScript. This can speed up the speed at which browsers can begin to respond to user interaction, thereby improving several important performance metrics such as First Input Delay, Largest Contentful Paint, and so on.

View the JavaScript file

Using Network Kanban in Chrome Devtools is the easiest way to view all JavaScript downloads on the page.

Press Ctrl+Shift+J or Command+Options+J on Mac to open Devtools:

Then open Network Kanban, refresh the page while Kanban is open, and click the JS filter to filter out all JavaScript files.

As you can see, this is a very simple web page, and the code execution logic in it is also very simple, but if it is a JS file that packages all the dependencies and code logic together, it will not be so easy to analyze, the logic inside will be very confusing, and it will be difficult for you to see the code logic inside.

Here is a site that packages many third-party libraries with the js modules of its own site:

Let's take a look at how to analyze this code:

Show Coverage

Press Ctrl+Shift+P or Command+Options+PP on Mac to open the command menu, search for Coverage, and select the Show Coverage command:

Then reload the page and select JavaScript from the drop-down menu:

In the table, we can clearly see how many unused JavaScript there are in each file, and you can click any URL to view the analysis line by line.

Webpack

Although the above method allows us to see how many unused JavaScript there are, it is still not easy to analyze the modules that make up Bundles.

If you have already packaged JS on your website, you must have used module balers such as webpack, rpllup, etc. Many of these tools provide us with a very good way to analyze modules.

Let's look at an example. If you are using Webpack, you can generate a stats.json file that contains statistics for all packaging modules.

Although you can see which modules are available by looking directly at this file, some tools in the community can help us better visually analyze the module information:

Webpack-bundle-analyzer, for example, analyzes the packaged product of Webpack, maps it to the module name of stats.json, and then creates an interactive tree visualization of the packaged product. Shows the size of each module, the Gzip parsing size, and their relationship to each other.

SourceMap

These balers provide great visualization tools, but they are baler-specific tools, and for any website, regardless of using any Packer, you can use SourceMap to restore the packaged code to the original code. This is very useful because it allows our code that has been confused and transformed during the build process to still be restored.

In the compressed or packaged JavaScript file, point to the location of the SourceMap file through comments.

All newer browsers support source mapping, and with Chrome, you can enable it in Devtools:

When Chrome detects an available SourceMap, you can restore the source code:

Source-map-expoler

Source-map-expoler can generate tree visualization relationships of packaged products through SourceMap. By looking at these module relationships, we can find some problems:

For example, the above two libraries moment, lodash, account for a very large proportion of the entire file, their size is far beyond their value, we can convert them into ES modules, then they can become smaller and more optimized.

Lighthouse

With Lighthouse, we can also use SourceMap to analyze unused JavaScript code in our packaged products.

There is also a feature being explored that uses SourceMap to analyze polifill code that is not needed in the new browser in the packaged product.

After reading the above, do you have any further understanding of the tools and methods for analyzing JavaScript packaged products? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.