webpack 打包chunk

大家好，欢迎来到IT知识分享网。

chunk的含义以及出现的情况

webpack特定术语在内部用于管理捆绑过程，输出束（bundle）由块组成。

是webpack 根据功能拆分出来的代码片段，包含三种情况

官方:

1.入口起点：使用entry配置手动地分离代码

**2.防止重复：**使用entry dependencies或者SplitChunkPlugin去重和分离chunk

3.动态导入：通过模块地内联函数调用来分离代码

通俗一点：

1.项目的入口文件（配置中的entry）

2.根据splitChunks拆分出来的代码

3.import 动态引入的代码（异步引入）

1.chunks三个值：async、initial、all

默认配置：其中chunks有三个值：async、initial、all

 optimization: {
    splitChunks: {
      chunks: 'async',
      minSize: 20000,
      minRemainingSize: 0,
      minChunks: 1,
      maxAsyncRequests: 30,
      maxInitialRequests: 30,
      enforceSizeThreshold: 50000,
      cacheGroups: {
        defaultVendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          reuseExistingChunk: true,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },

1.1 async

async 异步也就是动态导入拆分，缺省值（默认值）

入口文件：

index.js:里面有两种拆分类型：entry文件（自身）、import()动态导入文件print、

function getLazyComponent () {
  const myDiv = document.createElement('div')
  const btn=document.createElement('button')
  btn.innerHTML="Clike me and look console"
  btn.onclick=function(){
    import(/*webpackChunkName:"print"*/'./print').then(module=>{
      const print=module.default
      print()
    })
  }
  myDiv.appendChild(btn)
  return myDiv
}
document.body.appendChild(getLazyComponent())

print.js:包含一种拆分文件：node_modules文件

import _ from "lodash";// node_modules
console.log('The print.js has loaded! See the network tab')

export default function printMe(){
  console.log("I get called from print.js --")
}

其中webpack.config.js的部分配置

module.exports = {
  ...
  entry: {
    index: {
      import: index,
    },
  },
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist"),
    clean: true,
  },
  ...
};

npm run build 之后拆分的文件夹

分析：

1.入口文件：index.js
2.异步加载文件：print.js
3.async 对应的print.js 中的 node_modules 文件 lodash

1.2 initial 初始化（入口）

同样执行打包操作：

分析：

1.入口文件 index.js
2.异步：print.js
因为对应的是 入口拆分 所以 没有拆分 lodash文件

改动：

print.js（去掉lodash的引入）

// import _ from "lodash";// node_modules
console.log('The print.js has loaded! See the network tab')

export default function printMe(){
  console.log("I get called from print.js --")
}

index.js （添加lodash）

import _ from "lodash";// node_modules
function getLazyComponent () {
  const myDiv = document.createElement('div')
  const btn=document.createElement('button')
  btn.innerHTML="Clike me and look console"
  btn.onclick=function(){
    import(/*webpackChunkName:"print"*/'./print').then(module=>{
      const print=module.default
      print()
    })
  }
  myDiv.appendChild(btn)
  return myDiv
}
document.body.appendChild(getLazyComponent())

打包后的文件：

1.入口文件 index.js
2.异步：print.js
3.入口文件的node_modules的index.js中的lodash文件

另一种情况：

print.js:

console.log('The print.js has loaded! See the network tab')

export default function printMe(){
  console.log("I get called from print.js --")
}

index.js:

import print from "./print"
function getLazyComponent () {
  const myDiv = document.createElement('div')
  const btn=document.createElement('button')
  btn.innerHTML="Clike me and look console"
  btn.onclick=function(){
      print()
  }
  myDiv.appendChild(btn)
  return myDiv
}
document.body.appendChild(getLazyComponent())

1.3 all（两个都进行拆分）

打包后文件：

总结：

async：只从异步加载的模块里面进行拆分

initial：只从入口模块里面进行拆分

all：从以上两者模块里面进行拆分

扩展webpack调试命令：

https://webpack.docschina.org/contribute/debugging/按照文档指示
1.npm install --global node-nightly
2.node-nightly //完成安装
// 使用 node-nightly与--inspect标志一起在任何基于 webpack 的项目中开始构建
// 比如构建你的build 类似执行npm run build
 node-nightly --inspect ./node_modules/webpack/bin/webpack.js
// 执行参数：
node-nightly --inspect ./node_modules/webpack/bin/webpack.js  --config ./webpack.config.js
3.调试
node-nightly --inspect-brk ./node_modules/webpack/bin/webpack.js  --config ./webpack.config.js
// 或者
node --inspect --inspect-brk ./node_modules/webpack/bin/webpack.js  --config ./webpack.config.js
4.打开chrome://inspect---remote target 下面的文件

Chunk值总结

splitChunks中chunk的值：

默认解析出：initial 文件、动态导入文件,存在即导出

1.async ：针对动态导入的文件内容进行解析，并按照相关规则分割代码

2.initial: 针对入口文件的内容进行解析，按照规则分割代码

以上二者都包括引用 import 同步导入的文件内容的代码chunk

例如：
index.js文件
import print from "./print"
`````````````````````````````````````````````````
print.js文件
import lodash from 'lodash'

chunks:'initial'
运行打包之后：--针对入口文件进行解析--
index.js.bundle.js、 lodash.bundle.js 文件两个文件

chunks：‘async’
运行打包之后：---不会针对入口文件进行解析--
index.bundle.js

同样：

例如：
index.js文件
import(/*webpackChunkName:"print"*/'./print').then(module=>{
   const print=module.default
   print()
})
`````````````````````````````````````````````````
print.js文件
import lodash from 'lodash'

chunks:'initial'
运行打包之后：--针对入口文件进行解析，不会针对动态问价解析--
index.js.bundle.js、print.bundle.js

chunks：‘async’
运行打包之后：---针对动态文件解析，不会针对入口文件进行解析--
index.bundle.js、print.bundle.js、lodash.bundle.js 三个文件