Home > Developer > Web Develop
Webpack is a very important part of the OneAPM front-end technology stack, it is very useful, if you do not know it, it is recommended that you read this Webpack primer, in OneAPM we use it to complete the static resource packaging, ES6 code conversion, REACT components of the organization, in the following days , we will share our experience in the use of Webpack in performance through a series of articles and industry.
As the first article in a series, we'll focus on Webpack resolve.alias , which is request redirection. Note, however, that the request in Webpack is a dependency on the module, which is a require statement, not an HTTP request.
The function to be implemented is simply to display the current time in Chinese on the page and need to use the moment library, which encapsulates a number of date-related functions and comes with international support.
Create a new node. JS ProjectUse npm init initialize your project and then npm install moment -D moment rely on the developer by adding.
Create a new one entry.js as a portal file, of course you can also use app.js such names, but most of the Webpack examples are used entry.js .
var moment = require(‘moment‘);document.write(moment().locale(‘zh-cn‘).format(‘LLLL‘));
To create a new page index.html , refer to bundle.js :
<body>
The file directory looks like this at this point:
index.htmlpackage.jsonentry.jsnode_modules/moment
So far bundle.js This file does not exist, but don't worry, the next work will be given to Webpack to complete.
index.html ------------------------+ package.json | +--> <Clock App>entry.js --------+ | +-->bundle.js+--+
, Webpack will entry.js package the moment module together into a bundle.js file, and together it index.html forms our Clock App. What, have you heard the Clock App tick?
Packaging Code with WebpackExecute at the command line:
webpack --entry ./entry.js --output-path dist --output-file bundle.js
You will see output similar to the following:
Hash: bf9007fb1e0cb30e3ef7Version: webpack 1.10.0Time: 650ms Asset Size Chunks Chunk Namesbundle.js 378 kB 0 [emitted] null [0] ./entry.js 125 bytes {0} [built] + 86 hidden modules
Can see, time-consuming 650ms, so slow really let a person unexpectedly, must find a way to improve "new generation artifact" speed; On the other hand, the last line of the + hidden modules is very doubtful: clearly is a simple Clock App, how there will be so many dependencies.
How to quickly locate the cause of Webpack slow speedOnce again, at the command line, enter:
webpack --entry ./entry.js --output-path dist --output-file bundle.js --colors --profile --display-modules
However, this time the new three parameters are added, the meanings of the three parameters are:
--colorsThe output is colored, for example: It shows the long-time steps in red--profileOutput performance data, you can see the time of every step--display-modulesBy default node_modules the module will be hidden, plus this parameter can show the hidden modules
The results of this command line have been very useful and can help us to locate long-time steps
Hash:bf9007fb1e0cb30e3ef7Version:webpack 1.10.0time:650ms Asset Size Chunks Chunk namesbundle.js 37 8 KB 0 [emitted] null [0]./entry.js bytes {0} [built] factory:11ms building:8ms = 19ms [1]. /~/moment/moment.js 102 KB {0} [built] [0] 19ms-factory:7ms building:141ms = 167ms [2] (Webpack)/buildin/mod Ule.js 251 bytes {0} [built] [0] 19ms--[1] 148ms--factory:132ms building:159ms = 458ms [3]. /~/moment/locale ^\.\/.*$ 2.01 KB {0} [optional] [built] [0] 19ms--[1] 148ms--factory:6ms building:10ms de PENDENCIES:113MS = 296ms [4]. /~/moment/locale/af.js 2.57 KB {0} [optional] [built] [0] 19ms, [1] 148ms--[3] 16ms--factory:52ms Bui lding:65ms dependencies:138ms = 438ms ..... Ad split line, node. JS Engineer's CV please send [email protected] ... [85]. /~/moment/locale/zh-cn.js 4.31 KB {0} [optional] [built] [0] 22ms, [1] 162ms--[3] 18ms--factory:125m S Building:145ms dependencies:22ms = 494ms [86]. /~/moment/locale/zh-tw.js 3.07 kB {0} [optional] [built] [0] 22ms, [1] 162ms--[3] 18ms--factory:126m s building:146ms dependencies:21ms = 495ms
The results from the command line can be seen from request[4] to request[86] are all included in the parsing moment.js of a large number of localized files. So the slow problem we encounter is actually moment caused by.
If you want to know why Webpack loads so many modules, you can refer to this article why enormous Locales During Webpack Momentjs
Let's look at entry.js the first line of code, the standard CommonJS notation:
var moment = require(‘moment‘);
In other words, the source of the request is moment . In fact, the installation of NPM through the moment source code and the same time moment after the compression, the test proves that the following wording is also possible:
var moment = require(‘moment/min/moment-with-locales.min.js‘);
Only in this way, the readability will be reduced, and every use moment of the place to write. In addition, if the same problem occurs in a third-party module, it is less convenient to modify someone else's code. Let's take a look at how to solve this problem with Webpack.
Using aliases in WebpackAn alias ( resolve.alias ) is a configuration item for Webpack that redirects a user's request to another path, such as by modifying a webpack.config.js configuration file, by adding:
resolve: { alias: { moment: "moment/min/moment-with-locales.min.js" } }
In a script that is packaged in such a way that require(‘moment‘) it is actually equivalent to require(‘moment/min/moment-with-locales.min.js‘); . The use of aliases can be reduced by almost half of the time in this example.
Hash: cdea65709b783ee0741aVersion: webpack 1.10.0Time: 320ms Asset Size Chunks Chunk Namesbundle.js 148 kB 0 [emitted] main [0] ./entry.js 125 bytes {0} [built] factory:11ms building:9ms = 20ms [1] ../~/moment/min/moment-with-locales.min.js 146 kB {0} [built] [1 warning] [0] 20ms -> factory:8ms building:263ms = 291ms [2] (webpack)/buildin/module.js 251 bytes {0} [built] [0] 20ms -> [1] 271ms -> factory:3ms building:1ms = 295msWARNING in ../~/moment/min/moment-with-locales.min.jsModule not found: Error: Cannot resolve ‘file‘ or ‘directory‘ ./locale in */webpack_performance/node_modules/moment/min @ ../~/moment/min/moment-with-locales.min.js 1:2731-2753
InWebpackmodule.noParseis webpack another very useful configuration item, if you determine that there are no other new dependencies in a module that can be configured, the webpack dependencies in this file will no longer be scanned.
module: { noParse: [/moment-with-locales/] }
This modification, combined with the example of the previous renaming, is the updated process:
webpackCheck the entry.js request for the file pair moment ;- Request is redirected
alias to requestmoment/min/moment-with-locales.min.js；
noParseOne of the rules is in /moment-with-locales/ effect, so webpack it is packaged directly into the bundle.js .
Hash: 907880ed7638b4ed70b9Version: webpack 1.10.0Time: 76ms Asset Size Chunks Chunk Namesbundle.js 147 kB 0 [emitted] main [0] ./entry.js 125 bytes {0} [built] factory:13ms building:13ms = 26ms [1] ../~/moment/min/moment-with-locales.min.js 146 kB {0} [built] [0] 26ms -> factory:13ms building:5ms = 44ms
The time is further compressed, requiring only 76ms, which is 75% less than the previous step.
Using a public CDN in WebpackWebpack is so powerful that its packaged scripts can run in a variety of environments, and the WEB environment is just one of its default and most common. Given the large number of public CDN services on the Web, how do you combine Webpack with a common CDN? method is to use externals declaring an external dependency.
externals: { moment: true }
Of course, the HTML code needs to add a line
<script src="//apps.bdimg.com/libs/moment/2.8.3/moment-with-locales.min.js"></script>
This package, the result is only used in MS, almost reached the limit.
SummarizeThis article, in conjunction with the local clock example, shows the steps to locate the Webpack performance problem, as well as the required two parameters: --display-modules and --profile . Then, this paper focuses on the resolve.alias method and scene of using alias to redirect, and on this basis, the module.noParse resolution of some modules can be further accelerated. Finally, the use of a public CDN is described by externals defining an external dependency method.
AboutThis article is related to the source code: https://github.com/wyvernnot/webpack_performance/tree/master/moment-example;
——
This article is a ONEAPM engineer original article. ONEAPM is the emerging leader in China's basic software industry, helping enterprise users and developers easily implement slow program code and real-time crawling of SQL statements. To read more technical articles, please visit the ONEAPM Official technology blog.
Webpack performance Optimization (i) (redirect with aliases)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
