Webpack loads packaged chunk names on demand

Recently, I encountered complex H5 page development. In order to optimize the loading speed of h5 first screen, I thought of using on-demand loading method to reduce the volume of JavaScript files loaded for the first time. Therefore, THE processing process is recorded here, which mainly involves the following three points:

• How do you do on-demand loading with Webpack
• Difference between filename and chunkFilename
• How to name the chunk (webpackChunkName)

1 How to do on-demand loading with Webpack

We all know that Webpack is a popular front-end packaging and compilation tool that bundles code together through dependencies between modules. Webpack is now available in V4.x. Different versions support different ways of loading on demand. There are two main ways:

• Require.ensure () is provided in Webpack1.x
• Import () is provided in Webpack2.x

require.ensure()

/ / for
require.ensure([], function(require){
    require('b');
});
Copy the code

Webpack, at compile time, statically parses require.ensure() in the code while adding [module B] to a separate chunk. This new chunk is loaded on demand by WebPack via JSONP.

When it comes to static analysis, see the require.ensure syntax below, where the second parameter callback is a callback function. One thing to note is that the callback function has an argument require, which allows you to introduce additional modules as needed within the callback function. == It is worth noting that although this require is the callback function parameter “module”, which could theoretically be called otherwise, it cannot be called in practice, otherwise WebPack would not be able to handle it during static analysis. = =

require.ensure(
    dependencies: String[].callback: function(require){
        require('module');
    }, 
    errorCallback: function(error){}, 
    chunkName: String
)
Copy the code

import()

Note that the import() function is different from the import command, which is the syntax of the ECMAScript 6 Module and is statically executed.

import(specifier)
Copy the code

In the above code, the import function parameter specifier specifies the location of the module to load, and ==specifier can be a method that dynamically generates the module path ==. The import() function accepts whatever arguments the import command accepts, the main difference being that the latter is dynamically loaded.

The import() function is the syntax for the draft phase of ECMAScript Stage 3; Used to accomplish dynamic loading which is run time loading and can be used anywhere. The import() function returns a Promise. Similar to CommonJs require(), the main difference is that the former is asynchronous loading, the latter is synchronous loading.

Import can be used in one of three scenarios (see Getting Started with ECMAScript 6):

1. Load on demand. Import () lets you load a module as needed
2. Conditional loading. Import () can be placed in an if code block and loaded with different modules depending on the situation.
3. Dynamic module path. Import () allows module paths to be generated dynamically.

Usage is roughly as follows:

import('./myModule.js')
    .then(myModule= > {
        console.log(myModule.default);
    });
Copy the code

summary

At present, we use more import to do on-demand loading, module path can be dynamically generated, more suitable for the current application scenario.

Difference between filename and chunkFilename

Once packaged, we find that the paths and names of the packaged chunks are extremely simple: 1,2,3… A number like this would refer to filename and chunkFilename if we wanted to customize the path and name.

• Filename determines the name of the bundle for each entry output.
• Output.chunkfilename determines the name of the non-entry chunk file.

Common Webpack configurations are as follows

module.exports = {
    / /...
    output: {
        filename: '[name].[hash].bundle.js'.chunkFilename: '[name].[hash].chunk.js',}};Copy the code

The result corresponding to filename and chunkFilename can be concatenated or returned with the following parameters:

The difference is that chunkFilename can’t be defined in entry like name in filename. For chunkFilename, the default [id] and [name] are the same.

How do you name the chunk

/* webpackChunkName: “” */ Magic Comments

Webpack tells the runtime how to behave by adding inline comments. By adding comments to import, we can do things like name chunks or select different schemas.

/* webpackChunkName: “hello” */, meaning that [name] equals Hello.

So the above code will follow the ways below to write, pack out the chunk files will appear in the plugins folder, name is myModule. A2d1d5d8e7d5d4d4d4se. The chunk. Js.

import(/* webpackChunkName: "plugins/myModule" */
    './myModule.js')
    .then(myModule= > {
        console.log(myModule.default);
    });
Copy the code

For more magic notes, please refer to the official Webpack documentation.

The end of the

At this point, we’ve been able to package the code into multiple files, and each chunk can be named independently, yes.