webpack学习笔记(12) ---- webpack与code spliting

在我们实际开发中，会使用一些第三方库来辅助开发

import * as _ from 'lodash';

/**
 * 以下是好多好多业务代码
 */
console.log(_.join(['a', 'b', 'c'], '~'))

加载这个文件时，会去加载第三方库lodash,以及下面的业务代码。
假设lodash大小是1mb,业务代码是1mb。加载这个文件就需要(1+1)mb共2mb。
如果我们提前将第三方库提前打包并加载，那在正式加载页面后只需要加载业务代码也就是1mb大小。
这样可以大大加快页面加载速度，提升性能。

在webpack增加以下配置，让webpack在打包时自动实现code spliting。

optimization:{
  splitChunks:{
    chunks:'all'
  }
}

在dist目录下的vendors 文件中。可以看到提前加载lodash的相关代码。
[图片上传中...(image.png-3f4f9-1592897999347-0)]

如果在项目中有异步加载的相关代码：

function getComponent() {
  return import( /* webpackChunkName: "lodash" */ 'lodash').then(({
    default: _
  }) => {
    const element = document.createElement('div');
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    return element;
  })
}

getComponent().then(component => {
  console.log('component', component)
  document.body.appendChild(component)
})

总结：代码分割与webpack无关
webpack实现代码分割，两种方式
同步代码：只需要在webpack.config.js中做optimization的相关配置即可。
异步代码：无须作任何配置，会自动进行代码分割，放置到新的文件之中。

对splitChunkPLugin进行配置

翻阅webpack文档
以下是一些对splitChunkPlugin的常用配置。

添加Magic comments对打包的chunk进行命名

function getComponent() {
  return import( /* webpackChunkName: "lodash" */ 'lodash').then(({
    default: _
  }) => {
    const element = document.createElement('div');
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    return element;
  })
}

添加之后，可以看到生成vendor名字发生了变化。如果要将打包生成的verdor直接命名成lodahs.js，需要以下配置进行更改。

在此之前，需要明确以下webpack打包的执行顺序：

optimization: {
    splitChunks: {
      chunks: 'async',  // 1.
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 6,
      maxInitialRequests: 4,
      automaticNameDelimiter: '~',
      cacheGroups: { //2.
        defaultVendors: { //3.
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          filename:"vendors"//生成的vendors的名字
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }

1.webpack在chunks对应到async时，会去识别你是否使用code spliting以及你的code spliting的策略。
2.明白策略之后会去根据你定义的cacheGroup去检查你生成vendors的策略。
3.根据你定义的策略去生成vendors。

filename

对vendor的filename进行更改之后，就可以更改vendors的名字了。
注:在异步情况下打包会失败。

image.png

cacheGroups:
{
  vendors:false,
  default:false
}

minchunks

只看入口文件
这个模块在至少被用了多少次之后，才会被分割

maxAsyncRequests

限制对代码分割的文件的请求数。比如有10个请求，限制的是5个，那超过5个就不会再进行打包了。

maxInitialRequests

对入口文件的请求数进行限制

cacheGroup

首先要明确这是一个组的概念。
如果有两个依赖，分别是jquery以及lodash，在打包到jquery时，先根据条件（maxSize,minSize）放进缓存组。再打包到lodash,再放进缓存组，不满足条件则放进default之中。
最终模块分析结束，再将引用打进不同的组。

prority

在都符合条件的情况下，根据这个prority打进不同的组

reuseExistingChunks

如果一个模块已经被打包过了，那我再次打包的时候直接忽略这个模块。

配置了这个打包之前不会生成vendor
chunks:async,all
只要在Node_moduels里就开始打包，打包是根据cachegroup这一个一个组进行打包的
filename:vendors

补充：多入口文件的codespliting

如果是多入口的情况下比如header.js与main.js
webpack会将main.js与header.js都有的依赖打成一个vendor，header这个入口文件独有的又打成另一个vendor。