webpack基本原理

对文件进行静态分析，生成的js文件为自执行函数，函数里面参数为一个对象（key为路径，value为路径对应文件的函数），一个模块调用自执行函数时通过_webpack_require_模拟require递归执行里面的所依赖的文件。

webpack的自动优化

webpack的性能优化可以分为自带的优化以及使用者配置的优化。
关键在于体积以及运行速度。

tree sharking（摇树）

对代码中无用的代码进行去除。（限于function，class不行）
无用的代码有三种：
1.无法到达的代码
2.代码的执行结果用不到
3.代码只会影响死变量（只写不读）
webpack处于生产模式的时候就会自动开启。

scope hositing（作用域提升）

让打包出来的文件体积更小，运行更快。
只有被引用了一次的模块才会被合并，其余的会被抽离作为公共模块。
通过设置optimization.concatenate = true则开启。

webpack的配置优化

优化loader编译范围

通过设置loader的对于哪些文件进行编译或者不对哪些文件进行编译（include，exclude）。
如：babel-loader处理js的ES6语法转换时比较耗时，如果减少文件的编译也会因此减少时间。

多线程打包

使用happyPack对不同的loader开展不同的线程并行打包。（对于小项目反而会增大打包时间，url-loader最好也不要放在happyPack实例里）

使用动态链接库（DllPlugin以及DllReferencePlugin）

对于某一些特殊的类库（不会经常改变，如：react、react-dom、vue、vue-router，vuex等），每次部署打包都要安装依赖且打包在vendor的js里，不仅增加里打包的体积以及加长打包时间。
1.使用DllPlugin对vue全家桶进行打包，生产vue_dll.js以及对应JSON。
2.在基本webpack配置文件中使用DllReferencePlugin配置刚刚生成的JSON文件。
3.（可以把vue_dll.js放在CDN上）在index.html里通过配置script引入vue_dll.js。
4.配置webpack打包的externals的key为刚刚的vue全家桶以及value为import后面的函数、属性等。
如此以来，打包的体积将减小。，

路由进行按需加载

通过配置路由里每个模块进行() => import('路径'),打包时每个路由模块将不会放在同一个js里，因此加载首页时加载的js变小，对应速度也会加快。

对js模块进行分割

通过设置optimization.splitChunks

optimization: {
      splitChunks: {
            chunks: 'all',
            cacheGroups: {
                  vendors: { //　第三方组件
                        test: /node_moudles/,
                        name: 'vendors',
                        minSize: 0,
                        minChunks: 1,
                        chunks: 'initail',
                        priority: 2 // 处理优先级，优先处理大的
                  },
                  other: { // 其他组件等
                        ...
                  }
            }
      }
}

对js代码进行压缩

使用UglifyJsPlugin进行压缩。
使用ParallelUglifyPlugin多进程并行处理压缩。