• Environmental separation

    • The first scenario adds two configuration files, then twobuildThe instructions point to two configuration files as shown below
    • The second option is to use the same entry profile but configure parameters later to distinguish between production and development environments

      The advantage of this is that common configurations can be extracted into one file, and different configurations can be separated into two files as shown below:
    • Note on pitAbove we can see that the entry file we configured is"./src/test-ts/index.ts"However, the current configuration file is not in the root directory, so some people will think. /Is the current directory, which isconfigThe directory in which it is located should be configured as../src/test-ts/index.tsThis is not true because the entry file read does not depend on the directory in which the current file resides but on andcontextDoes it matter, of course how to pass without settingcontextRead from the root directory by default. Now we can try to set it upcontextThe diagram below:

  • The separation

    • Why code separation

      If, by default, all JavaScript code (business code, third-party dependencies, temporarily unused modules) is loaded on the home page, the loading speed of the home page will be affected. Code separation can split up smaller bundles and control resource loading priorities to provide code loading performance.

    • Code separation solution – multiple entry starting point

      The specific configuration is shown as follows: Note that this parameter is required if a page has multiple entriesoptimization.runtimeChunk: 'single', there are corresponding instructions on the official website

    • Code separation solution -SplitChunks

      The SplitChunksPlugin plug-in can extract a common dependency module into an existing chunk of entry or into a newly generated chunk

      The public module mentioned above is needed to configure dependencies, here we can useSplitChunksHelp us to do these work configuration as shown below:

      Generally we only need to set it up during developmentchunksOne argument will do the restwebpackDefault configuration is ok, if the project needs special configuration can also go to the official website to check the corresponding parametersSplitChunks corresponds to configuration parametersPacking results are as follows:The discovery separates the two libraries into a single file

    • Code Separation solution – Dynamic Import

      Dynamic imports are implemented using es6’s import(), and can also be implemented using webPack’s legacy require.ensure syntax, but this is no longer recommended.

      How to make full use of dynamic import in actual combat? For example, there is a piece of code that needs to meet certain conditions to be executed. At this time, we can encapsulate this piece of code independently and load it if it meets the conditions or not through dynamic import. In this way, we can ensure that some code that does not need to be executed can not be loaded.

      The specific usage is as follows:When I packed it up./test-ts/index.jsIs packaged in a separate fileAt this point, run the project and find itAfter loading, the dynamically imported file is not loaded. Click the button to find itThe dynamically imported file is loaded and the code in the file is executed.

      The file name is available after the package is completedchunkFilenameProperty, the specific configuration is as follows:But found thatidandnameIs the same, can be modified using magic commentsnameThe following figure shows how to change the value ofBut when it’s done we’ll actually find itidandnameIs the same, so we can use the first six hash values in the naming rules to name the following figure:

    • Prefetch and Preload

      In the above article, the lazy code is automatically divided into a file by dynamic import, and the corresponding code is downloaded when it needs to be loaded. Can help to do some home page load some optimization, and then the problem is that if the split file is very large, starting from a conditional load lazy load content is, just download the file takes a little time, then the presentation is a bit late. We can solve this problem by configuring Prefetch and Preload parameters

      • Prefetch

        Add Settings by magic commenttrueThe lazy code will find an idle time to load lazy content after the page is successfully loaded. The configuration is as follows:
      • Preload

        preloadDifferent from thePrefetch chunkWill be in the parentchunkWhen loading, start loading in parallel mode, the specific configuration is also added by magic commentsPrefetch) as follows:
    • optimization.runtimeChunk

      The runtime code is split into one file or multiple files by parameter configuration: that is, asynchronously loaded code