[Webpack4x] Advanced Concepts

A, Tree Shaking concept

1. If this configuration, can not incorporated in a separate js file polyfill

2. Tree Shaking ( only supports static import this way ES module import ) package was used in some packaging, Unused code is not packaged

The concept: What is the best way I quote, what package, tree shaking is to shake off the useless stuff

Because it is a static introduced, CommonJS is a dynamic introduction.

3. How to add tree shaking?

3.1 development environment

Then you need to set in the package.json

The final development is the case under

3.2 If the set mode: 'production' :( automatically write the optimization, the need to add a separate configuration webpack)

Will only be used to introduce, it will not be introduced without the use of reducing compression memory

3.3 Additional Note that: encountered a problem in some cases

3.3.1 For example pollyfill not export any file, but they need it, may be a problem, you can add to the need for special treatment here, so it will not filter out tree shaking it, will normally introduced

3.3.2 There are, for example, css files need to introduce normal, so it does not filter tree shaking it

Second, the distinction between mode Production Development and packing

We created two webpack packed environment
development version webpack.dev.js
on-line version webpack.prod.js (codes are typically compressed code)

Then the two scripts package.json

Due to the presence of the same amount of code development and on-line version of the profile can be extracted in a webpack.common.js, and
introduced into a merge module

1. npm i webpack-merge -D
2. Extraction of the same code
   
   

1.3 Merge

1.4 change again next profile

Three, Webpack and 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.