Webpack batch packaging, on-demand download

Previously maintained an ad JS, I use Webpack as a module management, because of this commonjs pre-compiled packaging mode, I have all the modules encapsulated into a JS inside, the request is less, the file is big. Fortunately, most of the functional modules I wrote manually, the reference to the three-party library is not many, the file size is still controllable. But with the need of business development, advertising display effect more and more rich, simply rely on "build wheel", it is difficult to high efficiency, high quality to complete the demand. I began to consider using some of the three-party JS plugin to complete some specific functions, for many of the special effects, their program is very mature, stable, high reusability. Another aspect, eliminating the cost of their own development, can be more rapid completion of development.

The use of three-way JS plug-in this is a very normal thing, but I am struggling with what? This has to be related to my own architecture, I use Webpack to pack all the modules together, but the three-party JS plug-in corresponding to the requirements of the page is not every time to show, but rely on the data request return results, in other words, my JS is not often dependent on this plugin, and the plug-in is a kind of demand (not a) solution, the volume is not too small, I use the three-way plug-in as an example of 77kb and my code itself before compression is 127kb. Mixing plug-ins will inevitably result in file size increase, loading time is longer, ad rendering delay and some other column problems. Besides, with the development of business, I will refer to more than one of the three-party plug-ins. In the accident I thought of once occasionally see Webpack solution--code splitting.

Simply put on demand (download), if it is the Requirejs corresponding AMD scenario this is in normal. But the idea of all in one is strange in webpack, but Webpack is not rigid (like the implementation of a rival faction in a well-known AMD and CMD Module manager). I consulted a lot of documents and forums, and finally found the webpack in the support for on-demand download (here want to spit Groove Webpack official documents), a lot of forum articles mentioned the use of require.ensure but it is very brief, direct use of the discovery does not work, feel less what, For example, the following wording:

1 function (Require) {2     require (' module required for dynamic loading '); 3 }); 4 //webpack will automatically generate dynamic loading code, and the result is the same as ensure.

I'll make a detailed arrangement here, how to use this usage. What the corresponding configuration and release process is.

The overall style of webpack is that all in one is to package all the referenced modules from the portal file to a JS file (including CSS, images, JS only). In the packaging process there will be a series of name replacement, attentive friends will find our module is named more simple, space-saving numbers. Unlike the way Requirejs can directly require online files. Webpack recommends packaging all files (modules) that may be used. However, this is only suitable for small-volume modules with higher usage rates. For the size of the module is not commonly used, but it does not seem appropriate. If you have tried to require the online URL directly in the Webpack project. Runtime throws an exception-cannot find the module, because the default in the packaged JS is to find the module in this package, or the Webpack project in the Require function by default in the package (file) to find, at the same time there is no intention to initiate an HTTP request. So do not want to directly require the URL on the line.

Get the Webpack project can only be packaged together, make a huge file, the page stuck? Webpack official gave the solution--code splitting. This approach does not mean that Webpack intends to turn to AMD, but instead makes up for its own short board. To put it simply, all in one is packaged as a package, or a module is found inside the package, except that the package does not necessarily have a single file. We literally literal code splitting as "split", that is, we can understand that the package in one is split into multiple packages, when reference is required to download, load, but this load is implemented through the Webpack internal mechanism to initiate an HTTP request. We will touch a non-trivial bulk module from the package to separate out, when the package inside the statement referenced to the module, Webpack will determine that the module is separated, should initiate HTTP request pull. It is not impossible to pull up the module, just pull and own the source module.

So how did Webpack know that the module was separated? This drops to the above mentioned require.ensure, through a different API is equivalent to a tag, in the packaging time out, the reference when the request dynamic loading. In fact, we are most concerned about how to use? For example: I would like to refer to a, B, C, D four plug-ins, a, C may often be used together, B, D may often be used together. I need to generate 3 files after Webpack Packaging: JS (a large number of common modules) containing the main file, a separate package with a and C, and a detach package containing B and D.

1 /*other things xxxx*/2 if(BIsAC = = =true ){3Require.ensure (["A", "C"],function(require) {4     varA = require (' a ');5         varc = require ("C");6         varAC = a +C;7     /*a whole bunch of business logic*/8     }); 9 Ten}Else{ OneRequire.ensure (["B", "D"],function(require) { A     varb = require (' B '); -         varD = require ("D"); -         varBD = B +D; the     /*a whole bunch of business logic*/ -     });  - } - /*other things xxxx*/

When compiling Webpack, 3 files are generated. If you define the output in the Webpack.config.js file as Bundle.js, you will also generate two files 1.bundle.js and 2.bundle.js, and put them in the same level directory download on our experiment page to find the page loaded bundle.js first. The 1.bundle.js or 2.bundle.js are then loaded according to the conditions. In order to see the phenomenon more intuitively I removed the If judgment to load 3 files ().

The question is: Two separate module files must be placed on the same level of the page? Of course, it can be customized. In one detail, we have not set a statement that references 1.bundle.js and 2.bundle.js's online URL, and it seems that it must have a default setting. If you know a friend of Webpack will think of webpack.config.js file. is the root path of the two detached files:

It will directly affect the post-compilation__webpack_require__.p = "http://yoururl.com/";进而影响下面的路径：

This allows the webpack to be packaged and downloaded on demand using Code splitting .

　　

　　

Webpack batch packaging, on-demand download