webpack4x高级概念

Posted 2022-06-11 fe-linjin

一、Tree Shaking的概念

1. 如果设置了此配置，可以不用在js文件中单独引入polyfill

2. Tree Shaking (只支持ES module这种静态导入的方式导入) 对一些用到的包才打包，没有用到的代码不打包

概念：最理想的方式是我引用什么，打包什么，tree shaking就是摇掉没用的东西

因为它是静态引入，CommonJS是动态引入。

3. 如何添加tree shaking ？

3.1 在开发环境下

然后还需要在package.json中设置

最终 development情况下是这样

3.2 如果设置mode:‘production‘下：（会自动写好optimization，不需要在webpack配置中单独添加）

就只会引入使用的，没有使用的就不会引入，减少压缩内存

3.3 额外需要注意的是： 有些情况下会遇到一个问题

3.3.1 例如pollyfill没有导出任何文件，但是又需要它，可能会出问题，可以对需要特殊处理的添加到此处，这样tree shaking就不会过滤掉它，会正常引入

3.3.2 还有例如css文件也需要正常引入，这样tree shaking就不会过滤它

二、 Development和Production模式的区分打包

我们创建两份webpack打包环境
开发版本 webpack.dev.js
上线版本 webpack.prod.js （代码一般是压缩过的代码）

然后在package.json中两份脚本

由于开发和上线版本的配置文件存在大量相同的代码，可以提取出一个webpack.common.js中,并
引入一个合并模块

1. npm i webpack-merge -D
2. 提取相同的代码
   
   

1.3 合并

1.4 重新改下配置文件

三、Webpack和Code Spliting

1. 使用dev环境打包一次 遇到一个问题，

2 问题1.打包生成的东西放到了build下？

解决办法：

3 问题2.清除上一次打包文件出错，解决办法：

清除root下的dist下的所有文件

、、、、webpack的插件特别的多，再出了问题的时候，到google或者overflowstack上找问题、、、

4. code spliting是什么？

4.1 场景1： npm install loadash --save （一个字符串库）

4.2 问题1：会遇到一个问题，打包完以后，如果不做压缩和代码阉割，那么代码量会非常大。

4.3 问题2：由于第三方库代码更新概率不高，但是业务代码会不断迭代，就导致每次都要把第三方库打包进去。

4.4 解决办法1：手动思考如何阉割

1.创建一个loadsh.js

1. 正常写业务逻辑
2. 再次配置webpack
   
   两种方式对比：
   
   

4.5 解决办法2：自动阉割

只需要在webpack中添加一个配置项

4.6 解决办法3：异步加载

1. 用异步的方式写
   

2. 安装动态引入包的插件
   

3. 然后配置一下，使得babel可以去处理这种异步语法
   

4. 打包完以后，会把异步的代码放到一个单独的文件里面
   

小结

代码分割，和webpack无关
webpack中实现代码分割，两种方式

1. 同步代码： 只需要在webpack.common.js中做optimization的配置即可
2. 异步代码(import)： 异步代码，无需做任何配置，会自动进行代码的分隔，放置到新的文件中

四、 SplitChunksPlugin配置参数详解

1 demo

1. 这一次，我们移出上述说的分割插件，使用一个官方提供的动态引入的插件

2. 安装和配置
   

3. 重新打包 （magiccommon语法，引入这个文件后打包后的名称为）
   

4. 发现问题，上述文件名怎么前面加了wendors

5. 解决
   

6. 再次打包
   

2 参数讲解

1. chunks: ‘async‘
   支持异步导入，同步导入不支持
   1.1 只设置chunks: ‘all‘
   依然不会做代码的分割。
   1.2 进行如下设置
   引入同步的库，会判断chunks: ‘all，然后会进入cacheGroups下面，判断引入的库在不在vendors里面，
   1.3 问题： 名字存在个venders~main
   解决办法： cacheGroups
2. minSize: 30000 只有包大于30k这个程度才会进行代码分割。
3. 对于非node_modules下同步引入的一些模块 比如import Test from ‘./Test‘
4. minChunks: 2
   一个包同时被引入的此处大于大于2时才对这个包分割打包
5. maxAsyncRequests: 5
   异步加载的模块最大数为5，最多分割数为前5个，超出部分不分割
   6 maxInitalRequests: 3
   入口文件开始加载的时候，入口文件最多能分割3个，超过部分不分割
6.