webpack Packaging Optimization

Optimization

● vendor.js for the whole project dependent on the basic package, the project does not depend on frequent changes, so does not need to be reloaded every time, we need to generate a stable chunkId and moduleId, and with http response header ETag achieve negotiated cache.

● asynchronous chunk depends not packaged vendor.js, if need be will depend on the entry inlet of the import file webpack introducing (or webpack configured as follows).

  entry: {
    main: './src/index.js',
    vendor: ["moment"] //可以将异步chunk的依赖模块放到此处
  }复制代码

● asynchronous module chunk reuse extracted into use-repeat.js, to avoid duplication module chunk into a single package.

● using the online environment to achieve content-encoding compressed data transmission.

Generating a package vendor

   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)
      }
    })复制代码

In order to ensure vendor of pure, webpack runtime needs to be extracted, because:

1.webpack runtime (runtime) contains chunks ID chunkhash their corresponding object, but the runtime is integrated into vendor.js.
After 2.entry content modification, due to the dependence of the results in the construction collection rules WebPACK entry chunk ID corresponding to the generated change, webpack runtime has therefore been changed.

    new webpack.optimize.CommonsChunkPlugin({
        name: 'runtime'
    })复制代码

Generating a use-repeat packet

The asynchronous chunk, the repeated use of the module (use count> = 4) packed into use-repeat, single chunk avoid repetition frequency resources used for the same package.

    new webpack.optimizeea.CommonsChunkPlugin({
      async: 'use-repeat',
      minChunks: (module, count) => (count >=4)
    })复制代码

Fixed moduleId

In the official documentation: official documents - Cache mention, because each module.id will be incrementally based on the default resolution order (resolve order). That is, when a change in resolution order, ID will change, it needs to be fixed moduleId.

    new webpack.HashedModuleIdsPlugin({
      hashFunction: 'md5',
      hashDigest: 'hex',
      hashDigestLength: 8
    })复制代码

Gudii chunkId

Many article only describes how to generate a stable ModuleId, no mention generate stable chunkId.

webpack is incremented chunkId module according to the order, the official has to provide NamedChunksPlugin plug-in to be stable chunkId project based on the file name.
webpackJsonp There are three parameters, every time a new entry is added to increase the number of resources that illustrate the number of Chunk will follow the increase. ChunkId will increase.

    new webpack.NamedChunksPlugin((chunk) => {
      if (chunk.name) {
        return chunk.name;
      }
      return chunk.modules.map(m => path.relative(m.context, m.request)).join("_");
    })复制代码

ps: In webpack3.8.1, chunk modules are discarded.

设置content-encoding & accept-encoding

content-encoding is the page which uses compressed transmission of data to you, accept-encoding indicates to the server when you send a request, I can extract data in these formats.
Relationship between the two is that the other page will pass you to decide what format (content-encoding) according to accept-encoding you send. Not provided accept-encoding, the default value: gzip, deflate.

gzip

He expressed using the Lempel-Ziv Coding (the LZ77) compression algorithm, and encoding 32-bit CRC check. The encoding of the original UNIX platforms gzip adoption procedures. For compatibility reasons, HTTP / 1.1 standard servers that support the proposed coding scheme should be identified as the alias x-gzip command.

compress

Using the Lempel-Ziv-Welch (the LZW) compression algorithm. The name comes from UNIX systems compress program, which implements the above algorithm. Program with the same name has disappeared in most UNIX distributions, like, this content encoding has been deprecated most browsers, partly because of patent issues (the patent expired in 2003).

deflate

Using zlib structure ( RFC 1950 provisions), and deflate compression algorithm (the RFC 1951 specified in a).

identity

Used to refer to itself (for example: non-compressed and modified). Unless otherwise specified, the numerals can be accepted. brIt expressed using Brotli encoding algorithm.

Line using a content-encodeing: gzip, can effectively reduce the package size of each js about 60%, the front end of the key performance optimization, it will be wasted if not used. In addition to using the ETag, ensure vendor package can be cached.

Reproduced in: https: //juejin.im/post/5d09dde4f265da1bbf692121