【学习打卡】第5天 webpack(3)

【学习打卡】第5天 webpack(3)

课程名称：前端框架及项目面试 聚焦Vue3/React/Webpack
课程章节：第10章 webpack 和 babel
主讲老师：双越

课程内容：

今天学习的内容包括：
10-8 webpack如何抽离公共代码和第三方代码
10-10 module chunk bundle 的区别

课程收获：

大概复述一下

抽离公共代码和第三方代码

把公共部分单独抽出来相互引用。
第三方模块代码需要单独抽出来。引入第三方模块的业务代码文件修改时，对应打包后 hash 值都会改变，第三方模块本身是未修改的，没必要再次打包。

  optimization: {
    // 分割代码块
    splitChunks: {
      /**
      * initial 入口chunk，不处理异步
      * async 异步chunk，只对异步导入的文件处理
      * all 全部chunk
      */
      chunks: "all",
      // 缓存分组
      cacheGroups: {
        /**
        * 第三方模块
        * name     chunk 名称，分割后代码块集合
        * priority   权限值，值越高，越优先抽离
        * test       文件路径符合
        * minSize    执行打包文件 size 最小的值，部分文件特别小复制过去可能比单独打包更快
        * minChunks  最少复用过几次
        */
        vendor: {
          name: "vendor", 
          priority: 1, 
          test: /node_modules/,
          minSize: 0, 
          minChunks: 1, 
        },
        /**
        * 第三方模块
        * 参数同上
        */
        common: {
          name: "common",
          priority: 0, 
          minSize: 0,
          minChunks: 2,
        },
      },
    },
  }

module chunk bundle

module 各种不同类型源文件，处理前文件
chunk 对文件处理后多个模块的集合
可能是文件 + 引用的文件 eg. entry；
也可能是很多文件汇总 eg.拆分代码块定义的公共模块（前文 vendor，common）
bundle 最终输出文件

结束