一、Tree Shaking
二、 development 和 production 模式的区分打包
三、 webpack和code splitting
四、splitChunksPlugin配置参数
——————————————
一、Tree Shaking
作用：当引入只想引入某一js文件中 一部分的模块而不是所有模块的时候， 又不想让所有模块都加载，就要使用tree shaking
Tree shaking只支持ES Module这种静态引入的方式
即 Import ... from '..'
不支持 const add =require(...) 这种commonJS 动态引入（ES Module底层是静态引入的方式，而Common JS的底层是动态引入）
image.png
使用 （在开发环境中）
image.png
然后在package.json中设置sideEffects
sideEffects 是针对一些没有导出的文件，如css文件，babel-polyfill 这样的文件， tree shaking 看到没有导出所以会自动忽略掉这些文件， 如果不希望被忽略掉就要，在sideEffects 中进行一些配置
image.png
通常也要对css不使用tree shaking
image.png
如果都需要做tree shaking 就写成false即可
image.png
如果是production 要这样写，下面的optimization不用写也行
image.png
如果是development 要这样写， 并且要写optimization
image.png
二、 development 和 production 模式的区分打包
对于生产模式和开发模式相应的配置也是不同的，比如开发时不需要代码的压缩，需要相对全的SourceMap，而生产模式会对代码进行压缩，不需要SourceMap
image.png
在根目录下建立webpack.dev.js 和webpack.prod.js
然后将两个文件中公共部门提取出来，命名为webpack.common.js
再用merge进行合并
image.png
通常会将webpack配置统一放在build目录下， 这时也需要将package.json文件进行修改 加上./build目录
image.png
三、 webpack和code splitting
code splitting ： 代码分割
作用： 用户体验更好一些
背景介绍
比如现在我要引入一个第三方库"loadash" ，比如他有1mb大小， 然后自己写的业务逻辑代码也有1mb 大小， 此时加载后会有2mb大小的文件， 但是 事实上我们不会对loadash文件进行修改， 而每次访问都会重新加载， 会减慢网页速度。 因此需要进行一个拆分。
拆分前：
image.png
拆分后：
新建一个Lodash文件
image.png
在Index.js文件只写业务逻辑 即可
image.png
然后配置webpack 打包入口
image.png
最后生成的dist目录里有main.js和 lodash.js两个文件,并在会在index.html中引入两个文件
image.png
两种方式区别：
image.png
代码分隔，本质上与webpack无关，但是现在为什么说到代码分割就会想到webpack呢， 是因为在webpack与代码分割进行了捆绑， 比如在webpack4里面有一个插件叫"split-chunk-plugin"
在webpack里实现代码分割的简单配置项
image.png
webpack中实现代码分割有两种形式
- 同步代码的分割：只需在webpack.common.js中做optimization的配置
- 异步代码的分割（import）：无需做任何配置，会自动进行代码分割。但是有时会有一些特定的需求，这个时候还是要写 optimization这个配置项进行一些特殊的配置
四、splitChunksPlugin配置参数
webpack实现代码分割底层用的是splitChunksPlugin。他里面有很多配置项，如果你什么都不配置他也会有自带的默认的配置项
异步的代码分割， 最终build后会在dist目录生成0.js,1.js 2.js文件， 这是做代码分割产生的id值， 可以自定义进行修改。 （具体怎么修改在4-5视频中）
看一下splitchunks所有的参数
image.png
chunks: async意思是只对异步的代码生效。 initial是对同步的代码进行分割。all 是既异步又同步
一个异步引入组件的栗子
image.png
image.png
这是同步的引入
image.png
cacheGroup
chunks和cachegroup是配合着使用的，对于同步的代码会走继续走cacheGroup
image.png
mixSize 如果要分割的代码的大小大于这个值才会做代码分割。
minChunks ：当一个模块至少用了多少次的时候才对他进行代码分割
maxAsyncRequest 同时加载的模块数最多是多少个
maxInitialRquest: 首页/入口文件最多可以进行3个代码分割
缓存组的相关配置项
image.png
网友评论