⭐️ more front-end technology and knowledge, search subscription number JS bacteria subscription

Split code file

Before doing this, you need to know the difference between filename and chunkFilename in the output that is often configured. In simple terms, the entry file defined in entry is the filename configuration item. In the entry file, it is usually chunk, and chunkFilename is used

So most of the time, separating code files is to separate different chunks, which is good for browser caching and speed up secondary access in a production environment

When splitting code, splitChunks configured in Optimization are async by default and separate asynchronous code by default. So it is usually possible to use asynchronous import; Combination of preloading and prefetching results in good fetching effect

Difference between filename and chunkFilename

output: {
  filename: '[name].js'.chunkFilename: '[name].chunk.js'
Copy the code

For example

If the entry file is main.js

The resulting file is main.js

If other modules are introduced in main.js, such as Lodash, a file named lodash.chunk.js might be generated

Now that the basic concepts are understood, it is time to separate the JS and CSS files:

Js code separation

Js code separation operation, the first thing to consider is the separation of asynchronous code. DynamicImport is used here


You can use magic comment to modify the chunkname exported from dynamic import. The syntax is as follows:

import('/* webpackChunkName: "lodash" */' 'lodash').then(//...)

If you need to use this annotation, you should install the @babel/plugin-syntax-dynamic-import module and introduce the plugin in babelrc. It is easy to use this method, which is not described here


SplitChunk configuration parameters

It is recommended that publicly used third-party class libraries be explicitly configured as public parts, rather than webPack’s discretion

  • chunks: indicates the range of blocks to display. There are three optional values: initial(initial block), async(loading blocks on demand), and all(all blocks). The default value is all.
  • minSize: indicates the minimum module size before compression. The default value is 0.
  • minChunks: indicates the number of times to be referenced. The default value is 1.
  • maxAsyncRequests: Maximum load times on demand (asynchronous). Default is 1.
  • maxInitialRequests: Maximum number of initial loading times, default is 1.
  • name: Chunk Names. By default, Chunk Names and hash values are automatically generated.
  • cacheGroups: Cache group.

There are several other parameters in the cache group:

  • priority: indicates the cache priority.
  • testThe value can be function, Boolean, string, or RegExp. The default value is null.
  • reuseExistingChunk: indicates that an existing block can be used. That is, if a block that meets the condition already exists, the existing block is used instead of creating a new block.

Webpack4 – SplitChunksPlugin Usage Guide

module.exports = {
  entry: {
    vendor: ["react"."lodash"."angular". ] .// Specify a third-party library for public use
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          chunks: "initial".test: "vendor".name: "vendor".// Use the vendor entry as the public part
          enforce: true,},},},},/ /... Other configuration
Copy the code


optimization: {
    splitChunks: {
      name: true.// Automatically process file names
      chunks: 'all'.minChunks: 1.// If you import at least once, you need to package it
      automaticNameDelimiter: The '-'.cacheGroups: {
        vendors: {
          test: /axios|lodash/.// Extract and package the two third-party modules separately
          chunks: 'initial',}}}},Copy the code


Chunks of configuration

Note ⚠ ️

If it is a dynamic import, import(‘/* webpackChunkName: “lodash” */ “lodash”).then() then splitChunks will be set to async and code separation will work.

If import is loaded synchronously, import _ from ‘lodash’ splitChunks set to async will not work, if it is set to all, then cacheGroups will also need to be configured

CacheGroups configuration

The vendors cache group is configured to detect whether third-party modules are in node_modules, and if so, the splitChunks will take effect and will be separated to VENDORS ~… In a file like this

If filename is specified, a file named [filename] is packaged

The role of runtimeChunk

This runtimeChunk is essentially a manifest that links the relationship between business logic and third-party class libraries. It needs to be extracted, otherwise using contenthash may result in inconsistent packaging of contenthash multiple times without changing the contents of the module (in fact, the manifest in the business logic and the module has changed).

Webpack v4 does not need to be configured, but it is best to extract it as well
optimization: {
  runtimeChunk: {
    name: 'runtime'}}Copy the code

If a module uses B, b module uses A; A is packaged into common.js, and b is packaged using a in the already packaged common.js. This is where UseExistingChunk comes in:

default: {
  reuseExistingChunk: true.filename: 'common.js'
Copy the code

What he means is that as soon as one module uses import $from ‘jquery’, the other files can use the $variable directly, and Webpack will automatically import the module during the packaging process

CSS code separation

Extract -text-webpack-plugin can be used to separate CSS code files directly

A JS file. Although only one JS file needs to be loaded when loading a page, once the code changes, the user needs to reload a new JS file when accessing a new page. In some cases, we just changed the style individually, which also made it uneconomical to reload the JS files of the entire application.

Multiple components share a common style, and if separated, the second page has a cache of CSS files, which naturally speeds up access


New versions of Webpack use this plug-in

Note that when importing the style file import ‘./style.css’, if treeshaking is configured, it should be configured in package.json:

"sideEffects": [
Copy the code

⚠️ Note that you also need to add *. Vue configuration items in sideEffects if there is a style tag in vue. Don’t worry about script parts of vue being dropped by treeShaking.

Configuration of plug-ins

Filename refers to the configuration of filename if the CSS file is inserted directly into HTML

plugins: [
  new MiniCssExtractPlugin({
    filename: '[name].css'.chunkFilename: '[name].chunk.css'})]Copy the code

If there is separation, there is merging, and CSS code merging is mentioned here in passing

If you have multiple entries and want to pack all the style files introduced by multiple entries into one place, you can use the splitChunks of the Optimization configuration item, so this configuration item applies not only to JS, but also to CSS:

optimization: {
  splitChuns: {
    cacheGroups: {
      styles: {
        name: 'style'.// Merge all the style files in multiple entry files
        test: /\.css$/.chunks: 'all'.enforce: true}}}}Copy the code

The CSS code is packaged separately by entry

Still can respectively according to different entry, the packaging of CSS files, documents already speak very detailed, this section is simple can directly webpack.js.org/plugins/min document…

Please pay attention to my subscription number, push technical articles about JS irregularly, only talk about technology not gossip 😊