vue-cli3 Packaging Optimization Splitchunks Detailed Explanation

vue-cli3 package optimization splitchunks

Dllplugin can extract common libraries, including libraries such as vue and vuex. However, ant design vue is loaded on demand and may introduce new components at any time, which is obviously not suitable for putting them into dlls. It will be very large if you type directly into other files, so you need to extract them separately. I decided to configure them as follows:

const IS_PROD = .NODE_ENV === 'production'
 = {
  chainWebpack(config) {
    if (IS_PROD) {
      ({
        cacheGroups: {
          common: {
            name: 'chunk-common', // Packed file name            chunks: 'initial', // 
            minChunks: 2,
            maxInitialRequests: 5,
            minSize: 0,
            priority: 1,
            reuseExistingChunk: true
          },
          vendors: {
            name: 'chunk-vendors',
            test: /[\\/]node_modules[\\/]/,
            chunks: 'initial',
            priority: 2,
            reuseExistingChunk: true,
            enforce: true
          },
          antDesignVue: {
            name: 'chunk-ant-design-vue',
            test: /[\\/]node_modules[\\/]ant-design-vue[\\/]/,
            chunks: 'initial',
            priority: 3,
            reuseExistingChunk: true,
            enforce: true
          }
        }
      })
    }
  }
}

There is still a lot of knowledge to know about splitChunks in webpack4, and the following will be briefly introduced.

splitChunks Common parameters

• name packaged chunks name
• The module trophy matched by test is added to this cache group
• chunks code block type must be selected by one of three: "initial" (initial) | "all" (default is all) | "async" (dynamic loading) Default Webpack 4 will only split the code loaded on demand. If we need to configure the initial loading code to be added to the code segmentation, it can be set to 'all'
• priority: priority of cache group packaging, priority of those with large values
• minSize (default is 30000) forms the smallest volume of a new code block
• minChunks (default is 1) Before splitting, the minimum number of times this code block should be referenced
• maxInitialRequests (default is 3) The largest number of parallel requests for an entry
• maxAsyncRequests (default is 5) The maximum number of parallel requests when loading on demand
• reuseExistingChunk If the current chunk has been released from split, the chunk will be reused directly instead of recreating a
• enforce tells webpack to ignore , , and , always create chunks for this cache group

vue cli3 installation tutorial

Vue CLI 3 is a standardized tool based on a fast-tracking project. It is very simple to install, and this article will explain how to install Vue CLI 3.

First, we need to make sure that and npm are installed. If you haven't installed it, please download and install it first, and then npm will also be installed automatically.

Next, we can install Vue CLI 3 using the following command:

npm install -g @vue/cli

This will install Vue CLI 3 globally, and you can use Vue CLI 3 anywhere to create projects later.

After the installation is complete, you can check if Vue CLI 3 is successfully installed using the following command:

vue --version

If installed successfully, you should be able to see the version number of Vue CLI 3.

Now that we have successfully installed Vue CLI 3, we can use it to create new projects. You can create a new project using the following command:

vue create my-project

This creates a new project called "my-project" and initializes all required files and dependencies in it.

The above is a simple tutorial for installing Vue CLI 3. If you want to have a deeper understanding of the detailed usage and features of Vue CLI 3, check out the official documentation for Vue CLI 3.

This is the end of this article about splitchunks for vue-cli3 packaging optimization. For more related vue-cli3 packaging optimization content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!