Talking about JS resource subcontracting in Dewu Technology

background

After the version update iteration and the new code are online, if the user needs to reload all resources (js, css) from the server, it will definitely slow down the page opening, which is actually unnecessary.

In order to optimize the user experience and increase the page opening speed, js can be split into multiple modules. Every time there is an update, the user only needs to load the updated business code, which is subcontracting.

Program

Generally speaking, no matter what the framework is, front-end projects are mostly packaged based on webpack, such as umi, next, nuxt, vue-cli, so this article only provides solutions based on webpack packaging tools.

webpack4 provides the splitChunks plug-in, which is used for code segmentation. For specific usage, check the official document at 160ba0ecc785da.

A more common subcontracting strategy is to re-divide our packages according to the size, sharing rate, and update frequency, so as to make use of the browser cache as much as possible.

According to this strategy, a general subcontracting scheme is given, and js is split into the following three modules:

1. Third-party dependencies (node_modules)
2. UI library (antd, element-ui, cube-ui)
3. Business code

Therefore, after each code release, usually only 3 needs to be updated, and 1 and 2 can be read directly from the browser cache.

Implement

Take the phoenix project as an example, the current online page packaged situation is as follows:

Look at what each module is through the analysis tool:

• umi.js: framework js
• verdors.async.js: third-party dependencies
• layouts_index.async.js and p_discountDetail_index.async.js: business code
• (Ignore bundle.min.js, this is the sentry script)

In the case of doing nothing, umi has already subcontracted by default, this is because its built-in webpack provides a default subcontracting strategy:

• Whether the new chunk is shared or is a module from node_modules
• Whether the new chunk size is greater than 30kb before compression
• The number of concurrent requests to load chunks on demand is less than or equal to 5
• The number of concurrent requests when the page is initially loaded is less than or equal to 3

Use the above scheme to optimize the default subcontracting strategy, extract the UI library, and add the custom subcontracting code to the configuration file (umirc.ts):

config.optimization.splitChunks({
  chunks: 'async',
  minSize: 30000,
  maxSize: 0,
  minChunks: 1,
  maxAsyncRequests: 5,
  maxInitialRequests: 3,
  automaticNameDelimiter: '~',
  name: true,
  cacheGroups: {
      vendors: {
        name: 'vendors',
      test: /[\\/]node_modules[\\/]/,
        priority: -10,
        },
    antdesigns: {
      name: 'antdesigns',
      test: /[\\/]node_modules[\\/]antd-mobile[\\/]/,
      priority: -9,
        }
  }
})

The meaning of each field will not be repeated here, you can check the official document. Mainly look at cacheGroups, and extract antd.

Let's look at the effect after packaging:

An additional antdesigns.js was added, and antd was successfully extracted.

Q: Actually, you can think about it. Is it appropriate to extract antd?

A: The phoenix project is a multi-page application. There are not many pages at present, and antd also supports on-demand introduction. Packing antd code into the business code or node_modules of each page will not increase much volume, and the antd code volume is not large. , After extracting it separately, one more http link is needed, which feels unnecessary. However, as the project volume becomes larger in the future, it is not necessarily the case. Therefore, each project must be subcontracted according to its own situation.

in conclusion

Subcontracting is a game process. Should a bundle be larger or b?

Is it to make the first load faster or to make the cache utilization higher?

But one thing to keep in mind is that when unpacking, don’t pursue granularity too much. Everything will be separated into a bundle, otherwise you may need to load more than a dozen js files on a page. If you are not HTTP/2, The blocking of requests is still obvious (limited by the number of concurrent browser requests).

Therefore, there is no complete solution for the resource loading strategy of the sentence, and it needs to be subcontracted according to the project's own situation.

What to do next

The next step after subcontracting is to make full use of the browser cache. First, you need to put the static resources on the CDN, and then set a reasonable caching strategy. As long as the hash of the chunk has not changed, it will be read from the browser cache.

Reference material: https://panjiachen.github.io/awesome-bookmarks/blog/webpack/webpack4-b.html

Text/Xiaochen

Pay attention to Dewu Technology, and work hand in hand to the cloud of technology