webpack chunk相关分享

还在为学不会webpack而发愁么，还在由于概念过多而烦恼嘛 欢迎你们来看本次分享

分享内容简介：

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

什么是webpack?

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

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

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

咱们来看一下官方介绍图

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

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

能够大体分为如下四类：

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

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

使用前	使用后
代码过于冗余 维护难度大	以入口文件为基点建立关系图 忽略无用代码
相同文件屡次请求 资源浪费严重 页面加载速度慢 用户体验差	抽离公共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版本默认已经将咱们的代码进行必定程度的拆分打包 具体的打包规则以下：

1. 重复引用的chunk和包含来自node_modules文件夹下的模块
2. 在压缩前不小于30kb
3. 按需加载并发请求量不大于5
4. 初始化加载并发请求量不大于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'     //打包生成文件名称
            }
        }
     } 
   }
};

复制代码

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

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

webpack打包优化方案

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

相关知识拓展

webpack v3 v4区别有哪些呢？

v4 mode关键字有development、production两个选项 默认为production 同时如同上面提到的新增了默认打包规则 development 模式下，默认开启了NamedChunksPlugin 和NamedModulesPlugin方便调试，提供了更完整的错误信息，更快的从新编译的速度。

production 模式下，因为提供了splitChunks和minimize，因此基本零配置，代码就会自动分割、压缩、优化，同时 webpack 也会自动帮你 Scope hoisting 和 Tree-shaking。

Scope Hoisting 的实现原理其实很简单：分析出模块之间的依赖关系，尽量的把打散的模块合并到一个函数中去，但前提是不能形成代码冗余。

Tree-shaking的本质是消除无用的js代码。无用代码消除在普遍存在于传统的编程语言编译器中，编译器能够判断出某些代码根本不影响输出，而后消除这些代码

更多的v3 v4区别能够看这里： 手摸手，带你用合理的姿式使用webpack4

相关连接

• package.json 中 scripts配置方法？npm scripts 使用指南
• Node & webpack 全局变量配置：cross-env
• Node path.resolve path.join区别：path的join和resolve

(๑•̀ㅂ•́)و✧详细内容可查阅ppt demo & ppt 或 webpack chunk分享视频 by糖·少 提取码：4gvj

Thanks ！

原文连接： tech.meicai.cn/detail/98， 也可微信搜索小程序「美菜产品技术团队」，干货满满且每周更新，想学习技术的你不要错过哦。