webpack打包原理和优化

打包后的文件：

1，自执行函数

2，参数通过对象的形式传递：

　　key：文件的路径；value：是一个函数（执行当前文件的代码，eval执行字符串代码）

3，如何多个文件打包成一个文件？通过__webpack_require__

4，原理：通过递归的方式，不停调用自己

 

打包优化（目的是体积更小，速度更快）：

　　1，自带的优化：

　　　　tree-sharking：依赖关系的解析-->不用的代码不会打包（生产环境才会生效）

　　　　scope-hosting：作用域提升，定义的变量如果没用到，不会打包

　　2，自己实现的优化：

　　　　速度方面：

　　　　　　happypack：多线程打包（注意：体积比较小的话，打包反而更慢）；

　　　　体积方面：

　　　　　　IgnorePlugin 去掉不需要的语言包（例如moment.js时间插件很多语言包不需要）；

　　　　　　通过 externals 忽略打包某些文件，例如jQuery，可以用cdn引入；

　　　　　　通过 noParse 指定不解析某些文件；

　　　　　　动态链接库(DllPlugin/DllReferencePlugin)：打包后的文件体积依然很大？例如react/react-dom/vue，解决 --> 放到一个单独的文件打包，最后把这个文件放到cdn上；

　　　　　　抽离公共代码块；