Optimization scheme

● Vendor.js is the base package for the entire project dependencies. The project dependencies do not change often, so it does not need to be reloaded every time. It needs to generate stable chunkId and moduleId, and implement negotiation cache with HTTP response header ETag.

● Asynchronous chunk dependencies are not packaged into Vendor.js, but can be imported as an import in the Webpack entry file if necessary (or webPack configuration as shown below).

  entry: {
    main: './src/index.js',
    vendor: ["moment"] // You can put the asynchronous chunk dependency module here}Copy the code

● Repeatedly used modules in asynchronous chunk are extracted to use-repeat. Js to avoid the repeated modules being dumped into a single chunk package.

● The online environment uses Content-Encoding for compressed data transfer.

Generate the vendor package

   new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: function (module, count) {
        // any required modules inside node_modules are extracted to vendor
        return (module.resource && /\.js$/.test(module.resource) && module.resource.indexOf(path.join(__dirname, '.. /node_modules') === 0)}})Copy the code

To ensure vendor purity, the WebPack Runtime needs to be extracted because:

1. The WebPack Runtime (runtime) contains chunks AND their corresponding chunkhash objects, but the Runtime is integrated into Vendor.js.


2. After the entry content is modified, the ID of the entry chunk generated by the construction changes due to webPack’s collection rules. As a result, webPack Runtime is also changed. 

    new webpack.optimize.CommonsChunkPlugin({
        name: 'runtime'
    })Copy the code

To generate the use – repeat package

In asynchronous chunks, modules that are repeatedly used (times >= 4) are packaged to use-repeat to avoid repeating the same resources that are frequently used by a single chunk.

    new webpack.optimizeea.CommonsChunkPlugin({
      async: 'use-repeat',
      minChunks: (module, count) => (count >=4)
    })Copy the code

Fixed moduleId

In official documents:
Official documents – cacheMention, because each
module.idThe increment is based on the default resolve order. That is, when the resolution order changes, the ID also changes, so the moduleId needs to be fixed. 

    new webpack.HashedModuleIdsPlugin({
      hashFunction: 'md5'.hashDigest: 'hex'.hashDigestLength: 8
    })Copy the code

Fixed chunkId

Many articles only describe how to generate a stable ModuleId, not a stable chunkId.

Webpack increments chunkId according to the order of modules
NamedChunksPluginPlugin to stabilize the chunkId of the project based on the filename.



webpackJsonpThere are three parameters. Each time a new entry is added, the number of resources increases and the number of chunks also increases. ChunkId is also incremented. 

    new webpack.NamedChunksPlugin((chunk) => {
      if (chunk.name) {
        return chunk.name;
      }
      return chunk.modules.map(m => path.relative(m.context, m.request)).join("_");
    })Copy the code

Ps: in webpack3.8.1, chunk modules were deprecated.

Set content-encoding & accept-encoding

Content-encoding means which compression method the web page uses to send data to you, and accept-encoding means that when you send a request, you tell the server that I can unzip the data in these formats.


The relationship is that the other side’s web page determines what content-encoding to send to you based on the accept-encoding you send. Accept-encoding is not set. The default values are gzip, deflate.

gzip

Represents the lempel-Ziv Coding (LZ77) compression algorithm and 32-bit CRC check encoding mode. This encoding was originally adopted by the Gzip program on UNIX platforms. For compatibility reasons, the HTTP/1.1 standard recommends that servers that support this encoding should recognize the X-gzip directive as an alias.

compress

The lempel-Ziv-Welch (LZW) compression algorithm was used. The name comes from the UNIX compress program, which implements the algorithm. Like its namesake program, which has disappeared from most UNIX distributions, this method of content encoding has been deprecated by most browsers, in part because of patent issues (the patent expired in 2003).

deflate

Uses the Zlib structure (specified in RFC 1950), and the Deflate compression algorithm (specified in RFC 1951).

identity

Used to refer to itself (e.g., uncompressed and modified). This flag is always acceptable unless specified otherwise. Br indicates the Brotli algorithm encoding mode.

Using Content-Encodeing: gzip online can effectively reduce the size of each JS package by about 60%, which is the key to front-end performance optimization. Otherwise, all previous efforts will be abandoned. In addition, ETag is used to ensure that vendor packages are cached.