【taro react】---- WeChat applet optimizeMainPackage optimizes the size of the main package

1. Official Documentation

mini.optimizeMainPackage ---- optimize the size of the main package

2. Optimize the size of the main package

After a simple configuration like the following, it can prevent modules not introduced by the main package from being extracted into commonChunks. This function will analyze the dependencies between modules and chunks during packaging, and filter out modules that are not referenced by the main package and extract them to the sub-components. Inside the package, the following are the extracted common modules of two types of subpackages:

2.1 Subpackage root directory/sub-vendors.(js|wxss)

If the module is only referenced by multiple pages in a single subpackage, it is extracted to the sub-vendors file in the root directory of the subpackage.

2.2 Subpackage root directory /sub-common/*.(js|wxss)

If the module is referenced by pages in multiple subpackages, it will be extracted into the public module of the main package under normal circumstances. Here, in order to ensure the optimal size of the main package, it will be extracted into a public module first, and then copied to the Under the sub-common folder corresponding to the subpackage (because the applet cannot import files across subpackages, each subpackage needs to be copied here), it should be noted that this will lead to a larger volume of the total package.

3. Example code

module.exports = {
  // ...
  mini: {
    // ...
    optimizeMainPackage: {
      enable: true,
    },
  },
}

4. Partial dependencies do not use subcontracting

If there is a module that does not want to follow the subpackage extraction rules, you can configure it in exclude, so that the module will follow the original extraction scheme and extract it into the main package, such as the following (absolute paths and functions are supported):

module.exports = {
  // ...
  mini: {
    // ...
    optimizeMainPackage: {
      enable: true,
      exclude: [path.resolve(__dirname, 'moduleName.js'), (module) => module.resource.indexOf('moduleName') >= 0],
    },
  },
}

5. Optimize the results

5.1 Before optimization

Enter a picture description

5.2 After optimization

Enter a picture description

Note: The main package is directly reduced from 1.99MB to 1.35MB, which significantly optimizes the size of the main package. But note that when the dependency is used by multiple subpackages, it is recommended to process the optimization separately. If the dependency is as small as classNames, it can be directly extracted to the main package. If it is as large as the UI dependency of im, it is recommended to extract each used subpackage middle.

6. Intelligent extraction of subpackage dependencies

Intelligent extraction of subpackage dependencies

Guess you like

Origin blog.csdn.net/m0_38082783/article/details/130741745