webpack chunk相关分享

还在为学不会webpack而发愁么，还在因为概念过多而烦恼嘛欢迎大家来看本次分享

分享内容简介：

什么是webpack(webpack简介、webpack工作流程)
什么是chunk（chunk相关概念、splitChunks插件的使用）
webpack 打包优化方案（常用优化插件&打包优化方案）
相关内容扩展（webpack v3 v4区别、hash、scripts配置、path相关概念等）

什么是webpack?

前端页面效果越来越酷炫、功能越来越复杂而前端工程师们为了更方便的开发提高开发效率进行了一系列de探索模块化思想的提出啊将复杂的程序分割成更小的文件

这些年优秀的框架层出不穷react vue angular es6这种在javascript基础上拓展的新的语法规范 less sass css处理器等等等

所有的事物都是具有双面性的有利有弊大大提高开发效率的同时又为后期维护造成了困扰因为利用这些工具的文件往往不能直接被浏览器识别需要手动处理很影响开发进度而在这一个环境背景下 webpack产生……

我们来看一下官方介绍图

webpack可以看做是模块打包机，而它主要做的事情呢就是解析你的代码结构同时找到javascript模块以及其他的一些浏览器不能直接识别的拓展语言(scss、es6等) 将其转换并打包为合适的格式供浏览器使用

webpack具体为我们做了哪些事情呢别着急往下看~

可以大致分为以下四类：

公共代码抽离没有用到的代码不进行打包减少整体代码量
babel-loader、sass-loader等来处理浏览器不能直接识别的语言提高开发效率
webpack-server 开发模式优化开发流程减少工作量
文件的混淆压缩减少页面渲染时间提高系统安全性

使用前后有什么具体的变化么我们下面详细的举一些例子场景来看

使用前	使用后
代码过于冗余维护难度大	以入口文件为基点创建关系图忽略无用代码
相同文件多次请求资源浪费严重页面加载速度慢用户体验差	抽离公共chunk 避免重复引用
开发更改文件浏览器却优先读取缓存导致无法生效	通过hash命名避免浏览器缓存影响
代码注释删除繁琐系统安全性没有保障	插件清除注释加密压缩混淆一步到位
开发模式下需要修改后需要频繁回到浏览器刷新查看效果开发效率低下	HMR 热更新动态更新视图避免繁琐操作
开发技术工具繁多对开发人员技术要求高	丰富的插件、loader自动编译降低开发难度

听到这里是不是觉得webpack很神奇而webpack之所以有这些优点其实全是源于其设计理念我们看一下它的工作流程就会大概明白了他的实现原理了

webpack 从入口文件开始递归的建立一个依赖关系图，涉及到的所有文件内容都将被webpack封装为独立的模块函数，按照我们设置的配置文件进行模块函数的封装打包成一个个chunk，最终通过script标签引入的形式注入到相应的模板视图文件中也就是我们常见的html文件通过依赖第一步生成的 manifest 文件管理文件的加载运行

我们可控可配置的一般是第二三步骤我们详细的看一下

看完上面的 webpack 打包流程的介绍，是不是对webpack打包过程有了一些理解呢而我们本次分享的重点，则是学习对chunk有一定的理解和一些自定义化的构建配置

什么是chunk?

Chunk 可以简单理解为模块函数的集合也就是“代码块”，通过使用webpack打包处理可以将代码中的多个入口文件、公共引用文件、异步加载文件等抽离成单独的个体、也就是我们打包后产生的一个个文件，我们可以利用chunk来提高打包效率节省加载时间更合理的利用浏览器的缓存等…

本次分享代码使用 webpack v4版本

通过四个demo来模拟打包处理的四种情况

文件引用关系图：

提示：为了方便大家理解，代码使用的是最基本的代码结构大家可以通过demo了解一下 webpack打包常用插件 clean-webpack-plugin、html-webpack-plugin、webpack-merge、node环境全局变量process.env使用等

我们会发现webpack v4版本默认已经将我们的代码进行一定程度的拆分打包具体的打包规则如下：

重复引用的chunk和包含来自node_modules文件夹下的模块
在压缩前不小于30kb
按需加载并发请求量不大于5
初始化加载并发请求量不大于3

而这也就涉及到webpack v3 v4版本最大的变化就是splitChunksPlugin替换commonChunksPlugin

module.exports = { //...
   optimization: {
     splitChunks: { 
        chunks: ‘async’ ,                          //可以选择对哪些chunk进行优化（all|async|initial） 
        minSize: 30000, // 要生成的chunk的最小大小(b) 
        minChunks: 1,   //分割前必须共享模块的最小引用次数 
        maxAsyncRequests: 5,    //按需加载 最大并行请求量 
        maxInitialRequests: 3,  //初始化页面 最大并行请求量 
        automaticNameDelimiter: ‘~’,            //chunk一般名称格式为（例如vendors~main.js）该项指分隔符 
        name: true,                                 //chunk的名称 (true时将自动生成名称) 如果名称和入口点名称不相符则删除入口点 
        cacheGroups: {  //缓存组可以继承和覆盖splitChunks.*全部属性 
        vendors: {
            test: /[\\/]node_modules[\\/]/, //test属性只有在cache group中操作 正则匹配chunk放到该缓存组中 
            priority: -10       //priority属性只有在cache group中操作 优先级(默认组优先级为负) }, 
            default: {
                minChunks: 2,
                priority: -20, 
                reuseExistingChunk: true,          //reuseExistingChunk属性只有在cache group操作 是否可以使用已存在的chunk 如果满足条件的chunk已存在就不会再创建新的chunk 
               filename: '[name].bundle.js'     //打包生成文件名称
            }
        }
     } 
   }
};

测试上面的配置可以使用代码案例哦~ 这里

这里大家可能和我一样对默认规则的3、4条理解不是很清楚上面所说的按需并行请求量和初始化并发请求量对应的分别是 maxAsyncRequest 和 maxInitialREquests这两个属性而这两个属性其实是为了解决打包过于细化请求量过多的问题我们如果使用cacheGroups 进行划分有可能会出现很多chunk 而这种情况不是我们所期望的如果最终chunk数量超过了我们设置的最大值 webpack则会按照一定规则将chunk合并至最大值如果还不是很清楚的话就边看页面scripts请求数量边调最大值看看就懂了 = =

webpack打包优化方案

减少打包时间（抽离公共库文件）： DllPlugin&DllReferencePlugin 案例
可视化工具：webpack-bundle-analyzer 案例
webpack插件耗时查看工具：speed-measure-webpack-plugin 案例
尝试使用 DllPlugin&DllReferencePlugin 后你会发现无法动态添加vendor.dll.js文件而且无法添加hash值这里推荐 html-webpack-include-assets-plugin 案例

webpack chunk相关分享

分享内容简介：

什么是webpack?

什么是chunk?

webpack打包优化方案

相关知识拓展

webpack v3 v4区别有哪些呢？

相关链接