03 代码分割

module.exports = {
    // 重新打包时，只会打包自己定义模块中的代码，提高打包效率
  // 对imoprt代码块进行 优化
  optimization: {
    // 默认自动识别分割代码块
    splitChunks: {
      // 对同步还是异步的代码包进行检查
      chunks: 'all',
      // 默认值对 20kb的 import ‘xx’模块进行chunk检查
      minSize: 20000,
      // // 对模块chunk时进行分组（检查）
      cacheGroups: {
        //   // import 对模块来源进行检查
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          reuseExistingChunk: true,
          filename: 'vendors.js',
          minChunks: 1,
        },
        // 不符合vendors规则的import 模块处理办法，
        // 放入下面的文件名中 兜底
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
          filename: 'common.js'
        }
      }
    }
  },
}

一、代码分割（1）：

使用 Code Splitting技术

1.1 原因：

1.1.1 在打包时：

Code Splitting 分割的思想：

a. 通过将第三方类库拆分未不同的js模块，通过不同的entry: { main: 'index.js', loadsh: 'loadsh.js' } 输出不同的打包文件， b. 因此在第一个index.js如果文件中源码发生变化，去打包变化的源码，其他未变化的入口文件，则不需要打包； c. 提高打包性能

通过多个不同入口文件进行打包，实现代码分割的效果

打包后的html

1.1.2 在用户进行访问时

代码分割——-

a. 源码发生变化，webpack重新进行打包，编译代码、其中有些源码打包过程中的 第三方类库的代码是没有发生变化 的，因此通过代码分割，对nodule_module中不会变化的第三方包，进行分割，放入一个文件中； b. 源码发生变化—不需要重新打包对第三方包分割的文件

利用Code Splitting技术对的代码进行分割

二、代码分割（2）

SplitChunks 插件：

2.1 配置代码分割

splitChunks.chunks默认值为：async对异步代码进行分割

module.exports = {
    optimization: {
        splitChunks: {
            chunks: 'async'// 默认配置
        }
    }
}

2.1.1 splitChunks 默认配置，自动识别

optimization: { splitChunks: { chunks: 'all' } }
chunks: 'all'：表示默认自动识别哪些需要，做代码块分割

2.1.2 手动配置代码分割

查看官方文档：
splitChunks.chunks = 'all': 表示同步—异步代码都进行分割
splitChunks.chunks = 'async': 表示对-异步-代码进行分割（默认）
splitChunks.chunks = 'initial': 表示对-同步-代码进行分割

2.2 同步异步引入情况

1. 通过import()方式进行异步代码模块的导入

import()本质上实际是通过 webpackJSONP函数的方式进行实现的

1. 异步代码的-代码分割-时：optimization: {}配置引入与否都可以进行自动分割

   2.2.1 异步代码原理：

   **webpack**通过-代码分割-成一个一个的chunk的方式，将我们的异步代码，分割成一个代码块，内部通过**webpackJsonp**函数的方式保存异步代码、
   等待使用异步代码，或者异步代码执行完毕；发起http请求服务器上异步代码的**js**文件
   异步代码执行结果如下：
   

   2.2.2 更改异步代码块文件名称

   默认名称配置：

   异步代码，如果未手动配置，将异步代码打包生成的.js文件，按照webpack默认配置的按照代码块分割的id 来进行异步文件的命名
   

   手动更改文件名：

   a. 进行如下配置：import(/*webpackChunkName: 'xxx'*/ 'index.js'), 异步代码文件打包之后的名称变为：（如下图）
   
   b. 去除名称前面：（vendors~）: 进行如下配置
   不对node_module模块中的包进行代码分割了如下配置

   // 重新打包时，只会打包自己定义模块中的代码，提高打包效率
   // 对imoprt代码块进行 优化
   optimization: {
    // 默认自动识别分割代码块
    splitChunks: {
      // 对同步还是异步的代码包进行检查
      chunks: 'all',
      // 默认值对 20kb的 import ‘xx’模块进行chunk检查
      minSize: 20000,
      // // 对模块chunk时进行分组（检查）
      cacheGroups: {
        //   // import 对模块来源进行检查
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          reuseExistingChunk: true,
          filename: 'vendors.js',
          minChunks: 1,
        },
        // 不符合vendors规则的import 模块处理办法，
        // 放入下面的文件名中 兜底
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
          filename: 'common.js'
        }
      }
    }
   },

   

   2.2.3 缓存组

   c. cacheGroups： 缓存组？
   vendors: {} 对象形式的配置：
   vendors.test = 'xx': 表示异步或同步文件是否来自node_modules里的代码
   vendors.filename: 表示打包生成后的文件名称
   vendors.priority: 优先级，谁大，谁优先执行
   vendors.reuseExistingChunk = true: 重复利用分割的代码块
   
   splitChunks.minSize: 表示对多大的包进行代码分割
   
   minChunk: 默认（1）
   在-entry- 入口文件中，js文件中import模块引入的次数

   对缓存组代码进行优化：

   设置filename的同时，import(/*webpackChunkName: "xx"*/loadsh)，处理分割异步代码块时，报错；
   原因：异步代码块也需要打包生成自己独立文件

   // 代码分割，优化
   // 重新打包时，只会打包自己定义模块中的代码，提高打包效率
   optimization: {
    // 默认自动识别分割代码块
    splitChunks: {
      // 对同步还是异步的代码包进行检查
      chunks: 'all',
      // 默认值对 20kb的 import ‘xx’模块进行chunk检查
      minSize: 0,
      // 对模块chunk时进行分组（检查）
      cacheGroups: {
        // import 对模块来源进行检查
        vendors: {
          // 从node_module 中的第三方代码做代码分割，
          test: /[\\/]node_modules[\\/]/,
          // 优先级
          priority: -10,
          reuseExistingChunk: true,
          name: 'vendors'
        },
        // 不符合vendors规则的import 模块处理办法，
        // 放入下面的文件名中 兜底
        default: {
          priority: -20,
          filename: 'test.js'
        }
        // vendors: false,
        // default: false,
      }
    }
   },

   

扩展：

html-webpack-plugins:（见github参考配置项）
chunks配置项：
在html模板中引入的script 脚本路径，引入的js的名称；
默认：引入所有打包后的js文件