Webpack系列（系列六）：Code Splitting 和 Webpack的关系

Code Splitting是什么？

Code Splitting也就是代码分割的意思，本质上跟Webpack是没有关系的

因为我们会发现，我们通过Webpack打包的js文件，都会放在一个文件当中，那么如果我的业务代码很长，一个js文件可能有2mb大小，那么都放在一个js中，用户是不是在访问页面的时候，都得每次加载这么多的资源？这就造成一个隐性问题，加载时间过长，给用户的体验感不好！！！所以就需要代码分割了，提高页面性能

那么之前我们做代码分割都是手动来去做，很麻烦，但是Webpack提供的配置可以很方便的帮我们做到这一点！！！

所以这也是为什么，一提到Webpack就会想到Code Splitting 代码分割了，确实给我们带来了很大的便利

Webpack中实现代码分割，两种方式

1. 同步代码，我们只需要在配置里做optimization的配置

   optimization:{
           // 我要帮你去做代码分割了
           splitChunks: {
               chunks: 'all'
           }
       },
   

2. 异步代码,比如像import这样的异步引入模块，不需要做任何配置，Webpack会自动进行代码分割

SplitChunksPlugin 配置参数详解

optimization: {
        // 我要帮你去做代码分割了
        splitChunks: {
            chunks: 'all',  // 对同步还是异步进行打包，all默认全部打包
            minSize: 30000, // 最小大小，即当抽取的公共模块的大小，大于minSize所设置的值，才起作用
            maxSize: 0, // 可以设置，也可以不设置
            minChunks: 1,// 最小块，即当块的数量大于等于minChunks时，才起作用
            maxAsyncRequests: 6,// 同时加载的模块数量最多几个
            maxInitialRequests: 4,//入口文件里移入的模块，最多分割几个，超出就不进行分割
            automaticNameDelimiter: '~',// 文件名连接符，如果设置了分割的文件名，那么就不会执行
            cacheGroups: {// 缓存组，这里是我们表演的舞台，抽取公共模块什么的，都在这个地方
                defaultVendors: {
                    test: /[\\/]node_modules[\\/]/,
                    priority: -10, //优先级，只配置在缓存组的每一项，决定执行的顺序。
                    filename:'vendors.js', //代码分割后的文件名 
                },
                default: {// 默认分割的设置
                    minChunks: 2,
                    priority: -20,
                    reuseExistingChunk: true
                }
            }
        }
    },

简单地理解，有啥不对的，希望能指出，谢谢观看！！！