##目录css
1、Tree Shaking的概念
2、Development和Production模式的区分打包
3、Webpack和Code Spliting
4、SplitChunksPlugin配置参数详解
5、Lazy Loading懒加载，Chunk是什么？
6、打包分析
7、CSS文件的代码分割
8、webpack与浏览器缓存（caching）
9、Shimming
10、环境变量的使用
1、Tree Shaking的概念
1. 若是设置了此配置，能够不用在js文件中单独引入polyfill
2. Tree Shaking (只支持ES module这种静态导入的方式导入) 对一些用到的包才打包，没有用到的代码不打包
概念：最理想的方式是我引用什么，打包什么，tree shaking就是摇掉没用的东西
由于它是静态引入，CommonJS是动态引入。node
3. 如何添加tree shaking ？
3.1 在开发环境下
而后还须要在package.json中设置 webpack
最终 development状况下是这样 git
3.2 若是设置mode:'production'下：（会自动写好optimization，不须要在webpack配置中单独添加）
就只会引入使用的，没有使用的就不会引入，减小压缩内存github
3.3 额外须要注意的是： 有些状况下会遇到一个问题
3.3.1 例如pollyfill没有导出任何文件，可是又须要它，可能会出问题，能够对须要特殊处理的添加到此处，这样tree shaking就不会过滤掉它，会正常引入
3.3.2 还有例如css文件也须要正常引入，这样tree shaking就不会过滤它
2、 Development和Production模式的区分打包
咱们建立两份webpack打包环境 开发版本 webpack.dev.js 上线版本 webpack.prod.js （代码通常是压缩过的代码）web
而后在package.json中两份脚本 npm
因为开发和上线版本的配置文件存在大量相同的代码，能够提取出一个webpack.common.js中,并 引入一个合并模块 json
- npm i webpack-merge -D
- 提取相同的代码
1.3 合并 浏览器
1.4 从新改下配置文件 缓存
$nbsp;
3、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
- 正常写业务逻辑
- 再次配置webpack 两种方式对比：
4.5 解决办法2：自动阉割
只须要在webpack中添加一个配置项
4.6 解决办法3：异步加载
-
用异步的方式写
-
安装动态引入包的插件
-
而后配置一下，使得babel能够去处理这种异步语法
-
打包完之后，会把异步的代码放到一个单独的文件里面
小结
代码分割，和webpack无关 webpack中实现代码分割，两种方式
- 同步代码： 只须要在webpack.common.js中作optimization的配置便可
- 异步代码(import)： 异步代码，无需作任何配置，会自动进行代码的分隔，放置到新的文件中
4、 SplitChunksPlugin配置参数详解
1 demo
-
这一次，咱们移出上述说的分割插件，使用一个官方提供的动态引入的插件
-
安装和配置
-
从新打包 （magiccommon语法，引入这个文件后打包后的名称为）
-
发现问题，上述文件名怎么前面加了wendors
-
解决
-
再次打包
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
已经被打包的文件不会重复打包，直接使用以前打包好的包
5、 Lazy Loading懒加载，Chunk是什么？
1. 懒加载
使用的时候，在加载对应打包好的包。
6、打包分析
1.从新配置，会将打包过程放到stats.json中
www.github.io/analyse 能够把这个文件上传看分析结果
2.打包分析插件
3. 查看当前包利用率
让页面更加高效 splitChunks默认为asyc的缘由就是为了，让更多异步代码更高效
4. webpackPrefetch: true 会在网络空闲时，预加载其余须要懒加载的包
5. 而webpackLoad是在加载全部的时候加载
所以，在从此开发中，不要再只关注缓存所带来的性能提高，其带来的提高比较低。能够多关注下页面加载的js文件利用率更高，使得代码性能更高，页面运行效率更快。固然也要注意下，在一些浏览器上有兼容性问题。
7、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.
能对代码压缩合并
8、webpack与浏览器缓存（caching）
打包内容变的时候，contenthash会变，避免从新上线后，请求浏览器缓存
2. webpack老版本用户，即使代码没有变更，hash仍是有可能不相同
配置
会新增一个runtime文件
把逻辑和业务代码的关联manifest，抽离出来放在了runtime中，这样main中只有业务代码，vendors中只有第三方代码
9、Shimming
webpack的垫片，打包出来的代码可能在低版本上没法运行，解决webpack的兼容性问题。
场景1：
一些旧的第三方插件，可能会遇到在模块中没有引入对应的包，而后又想使用（这个包可能在node_modules，又没法更改源码引入）
1. 引入webpack
2.配置
能够把须要引入的包，都经过webpack.ProvidePlugin中配置
3. 补充说明语法
上述表示，使用lodash/join
场景2：
结果为false，this指向的是当前模块
1.安装
2. 配置
会先走imports-loader并把this指向window
10、环境变量的使用
场景： 打包配置从新配置，webpack.dev.js和webpack.prod.js中导出对应的配置，不合成，最后经过在webpack.common.js中根据env判断环境输出对应配置文件。
1.
2. 往webpack中传入一个env.production
（固然也能够不必定非要env.production 也能够直接传入production甚至是一个变量，只要正确接收便可）
固然咱们仍是会采起以前的方式，在对应的文件中分别配置环境，此节内容主要是为了讲述，能够在webpack中引入一个全局的变量