【webpack4x】高级概念

目录

一、Tree Shaking的概念

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

三、Webpack和Code Spliting

四、SplitChunksPlugin配置参数详解

五、Lazy Loading懒加载，Chunk是什么？

六、打包分析

七、CSS文件的代码分割

八、webpack与浏览器缓存（caching）

九、Shimming

十、环境变量的使用

一、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 重新改下配置文件

$nbsp;

三、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

2. 正常写业务逻辑
3. 再次配置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个，超过部分不分割

7. automaticeNameDelimiter: '~‘

没有设置filename的时候，会用~连接符

8. name: true

是指cacheGroups下的filename有效

9. cacheGroups会决定分割下来的放在哪里

9.1 同时满足的条件，根据优先级来决定放到哪个文件里面

9.2

已经被打包的文件不会重复打包，直接使用之前打包好的包

五、 Lazy Loading懒加载，Chunk是什么？

1. 懒加载

使用的时候，在加载对应打包好的包。

六、打包分析

1.重新配置，会将打包过程放到stats.json中

www.github.io/analyse 可以把这个文件上传看分析结果

2.打包分析插件

3. 查看当前包利用率

让页面更加高效
splitChunks默认为asyc的原因就是为了，让更多异步代码更高效

4. webpackPrefetch: true 会在网络空闲时，预加载其他需要懒加载的包

5. 而webpackLoad是在加载所有的时候加载

因此，在今后开发中，不要再只关注缓存所带来的性能提升，其带来的提升比较低。可以多关注下页面加载的js文件利用率更高，使得代码性能更高，页面运行效率更快。当然也要注意下，在一些浏览器上有兼容性问题。

七、CSS文件的代码分割

线上环境用的多，因为还不支持开发环境热更新。

（如果直接被一个页面引用，会走上面的filename，如果是间接使用，用chunkFilename）
然后需要重新配置webpack

还需要改个，让css文件不做tree shaking

2. 代码做压缩合并

然后配置

3. 问题又来了，希望多个入口的js文件里面用到的css文件都打包到一个css文件中

例如

总结

1. filename和chunkFilename要弄清楚？

2. css这个插件只能应用于线上环境中

2. 安装完毕后，替换原来的css loader

3.

4.

原因是它涉及到tree shaking这样一个概念

5.

6.

能对代码压缩合并

八、webpack与浏览器缓存（caching）

打包内容变的时候，contenthash会变，避免重新上线后，请求浏览器缓存

2. webpack老版本用户，即便代码没有变动，hash还是有可能不相同

配置

会新增一个runtime文件

把逻辑和业务代码的关联manifest，抽离出来放在了runtime中，这样main中只有业务代码，vendors中只有第三方代码

九、Shimming

webpack的垫片，打包出来的代码可能在低版本上无法运行，解决webpack的兼容性问题。

场景1：

一些旧的第三方插件，可能会遇到在模块中没有引入对应的包，然后又想使用（这个包可能在node_modules，又无法更改源码引入）

1. 引入webpack

2.配置

可以把需要引入的包，都通过webpack.ProvidePlugin中配置

3. 补充说明语法

上述表示，使用lodash/join

场景2：

结果为false，this指向的是当前模块

1.安装

2. 配置

会先走imports-loader并把this指向window

十、环境变量的使用

场景： 打包配置重新配置，webpack.dev.js和webpack.prod.js中导出对应的配置，不合成，最后通过在webpack.common.js中根据env判断环境输出对应配置文件。

1.

2. 往webpack中传入一个env.production

（当然也可以不一定非要env.production 也可以直接传入production甚至是一个变量，只要正确接收即可）

当然我们还是会采取之前的方式，在对应的文件中分别配置环境，此节内容主要是为了讲述，可以在webpack中引入一个全局的变量