解析webpack的chunk、chunks

浅唱_那一缕阳光
2,058 阅读4分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第3天，点击查看活动详情

背景

我们webpack项目构建成功后，会有这种一段描述信息：

image.png 里面的chunks是什么呢？
为什么是index和list,chunk又是什么呢？
为什么chunk name是也index和list呢？
下面我带着伙计们一块一探究竟。

准备

先看贴一下文件目录和页面代码:

image.png

src/index.js :

import {add} from './other.js'
const json =require('./index.json')
console.log(json,add(1,2));
console.log('哈哈');

src/other.js :

 export function add(a,b){
  return a+b
}

src/index.json:

{
  "age": 18
}

src/list.js:

console.log('我是list文件呀');

src/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <div>Webpack项目</div>
</body>
</html>

webpack.config.js:

const path = require("path");
module.exports = {
    // entry:'./src/other.js',
    entry: {
        index: './src/index.js',
        list: './src/list.js'
    },
    output: {
        filename: "[name].js",//利用占位符，文件名不要重复
        path: path.resolve(__dirname, "dist")//输出⽂件到磁盘的⽬录，必须是绝对路径
    },
    mode: 'development'
}

Chunk

是个代码片段，一个chunk可能由多个模块组合而成，也用于代码合并和分割。

比如 indes.js的整个代码需要编译就是一个chunk,里面有引入其他文件other.js,
other.js里面的代码是个代码片段也需要编译，所以，就一共2个chunk,
index.js再引入一个index.json文件，
同理，index.json文件也是个代码片段也是需要编译的，也会是一个chunk,
那么index.js里一共就3个chunk。

Chunks

顾名思义，就是chunk的一个集合，是chunk的总数，一个出口文件有1个chunks,而一个chunks至少有一个chunk，因为总归是要导出的

比如上面代码所示，最终构建层打包后，
dist/index.js是个出口文件，那么这个出口文件index.js包含一个chunks,这个chunks里面包含3个chunk,
同理 list.js也是个出口文件，它也包含1个chunks,而chunks里面又包含1个chunk。

一个出口文件bundle里只有一个chunks。
一个chunks至少包含一个模块，一个bundle包含一个chunks。

module和bundle

什么是module?

模块的意思，一个文件就是一个模块，
比如：打包文件dist里面的每个文件就是一个个模块module,index.html属于一个module,indes.js又是另外一个module，list.js同理也是一个独立的module,如果有其他文件，比如，a.js,b.js都是一个个单独的module。

什么是bundle

资源经过webpack流程解析编译后最终输出的成果文件，打包的产物，靠入口文件生成的js文件、webpack打包出来的文件，比如这个项目dist里面的出口文件index.js和 list.js。

解析一波

再看一下我们打包后的描述信息 ：

image.png

执行npm run test构建成功后，
控制台会出现这样一段信息，我们自上而下看：
有Hash这个是hash格式的标识，
然后是version版本信息，可看到webpack的版本信息是4.44.0,
再者就是Time，构建的总时间，65ms,
下面一行是构建的日期具体时间；
再下面，是出口文件，分别是index.js 和 list.js然后它两各自对应的出口文件大小，各自的chunks名和chunk名；
再往下，就是指出所有出口文件是哪些，index.js和 list.js；
继续往下，就是所有的chunk文件，一共有4个，以及他们所属的chunks是谁，可以看出，index.js、index.json、other.js这3个chunk属于chunks index里面的，
后面每个chunk的大括号里面都有标注出自己对应的chunks,
list.js是属于chunks list的。

再看一下打包后文件里面的内容：
先看一下出口文件index.js里面的：
dist/index.js:

image.png

可看出出口文件中index.js中有3个代码片段，
因为入口文件index.js里面引入了index.json和other.js加上它自己，所以就编译出3段代码片段，分别是index.js、index.json、other.js,从而就是3个chunk，
而一个出口文件有一个chunks,所以这里面的chunks有3个chunk。

再看一下出口文件list.js里面的：
dist/list.js: image.png
只有一个代码片段，就是它自己list.js,
因为它里面没有引入任何文件，所以只导出自己，也只编译了自己的代码片段，
因此，出口文件list.js里的chunks包含1个chunk那就是index.js。

总结

  1. chunk：指代码块，⼀个 chunk 可能由多个模块组合⽽成，也⽤于代码合并与分割。
  2. chunks：就是chunk的一个集合，是chunk的总数，一个出口文件有1个chunks,而一个chunks至少有一个chunk，因为总归是要导出的。
  3. module:模块的意思，一个文件就是一个模块， 比如：打包文件dist里面的每个文件就是一个个模块module,index.html属于一个module,indes.js又是另外一个module，list.js同理也是一个独立的module,如果有其他文件，比如，a.js,b.js都是一个个单独的module。
  4. bundle:资源经过webpack流程解析编译后最终输出的成果文件，打包的产物，靠入口文件生成的js文件、webpack打包出来的文件。
  5. 一个chunks至少包含一个模块module，一个bundle包含一个chunks,一个chunks至少有一个chunk。
avatar
文章
阅读
粉丝