For project performance optimization, split Chunks for chunk-vendors.js in the dist folder to reduce the loading time of the first screen

Problem Description

After our project is completed and the acceptance is passed, it needs to be packaged and released online. So we execute the command: npm run build make the dist package, and the screenshot is as follows after packaging:

The directly packaged chunk-vendors.js is too big

chunk-vendors.js file is too big, so we need to optimize it and split it

What is chunk-vendors.js

chunk-vendors.js ， chunk(块/包) - vendors(供应商) ，即为：不是自己写的模块包，也就是/node_modules项目目录的所有模块包. So the reason for this chunk-vendors.js file is actually that we packaged all the third-party packages in this one file, and they are all mixed together.

Use optimization.splitChunks for subcontracting

Let's first look at the size of the js file in the packaged dist folder after the subpackage is split.

Rendering after subcontracting

In this case, we will split the chunk-vendors.js file from, the original 824kB into package files of dozens of KB, so that when the production environment is loaded, it will be faster

splitChunks subpackage code

Let's take vue as an example and add the following code to the vue.config.js file. The code can be used directly by copying and pasting, and it is also used by the author in the production environment.

 configureWebpack: config => {
        if (process.env.NODE_ENV !== 'production') return
        return {
            plugins: [
               // ......
            ],
            // 看这里：把chunk-vendors.js进行分包，提升资源加载速度，很有必要
            optimization: {
                /**
                 * runtimeChunk可选值有：true或'multiple'或'single'
                 * true或'multiple'会有每个入口对应的chunk。不过一般情况下
                 * 考虑到要模块初始化，设置为single就够多数情况下使用啦。
                 * 详情见官网：https://webpack.docschina.org/configuration/optimization/#optimizationruntimechunk
                 * */
                runtimeChunk: 'single',
                /**
                 * 以前是CommonsChunkPlugin，现在换成optimization.splitChunks。普通项目下方的配置就足够用啦
                 * 详情见官网：https://webpack.docschina.org/configuration/optimization/#optimizationsplitchunks
                 * */
                splitChunks: {
                    chunks: 'all', // 可选值：all，async 和 initial。all功能最强大，所以咱们就使用all
                    maxInitialRequests: Infinity, // 最大并行请求数，为了以防万一，设置无穷大即可
                    minSize: 20000, // 引入的模块大于20kb才做代码分割，官方默认20000，这里不用修改了
                    maxSize: 60000, // 若引入的模块大于60kb，则告诉webpack尝试再进行拆分
                    cacheGroups: {
                        vendors: {
                            test: /[\\/]node_modules[\\/]/, // 使用正则匹配node_modules中引入的模块
                            priority: -10, // 优先级值越大优先级越高，默认-10，不用修改
                            name(module) { // 设定分包以后的文件模块名字，按照包名字替换拼接一下
                                const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
                                return `npm.${packageName.replace('@', '')}`
                            },
                        },
                    },
                }
            }
        }
    },

Summarize

Good memory is not as good as bad writing, record it ^_^