webpack打包优化

1、使用 HappyPack 来加速代码构建
原理：
（1）由于运行在 Node.js 之上的 Webpack 是单线程模型的，所以 Webpack 需要处理的事情只能一件一件地做，不能多件事一起做。

（2）而 HappyPack 的处理思路是：将原有的 webpack 对 loader 的执行过程，从单一进程的形式扩展多进程模式，从而加速代码构建。

2、利用 DllPlugin 和 DllReferencePlugin 预编译资源模块
优化原理
（1）我们的项目依赖中通常会引用大量的 npm 包，而这些包在正常的开发过程中并不会进行修改，但是在每一次构建过程中却需要反复的将其解析，而下面介绍的两个插件就是用来规避此类损耗的：

DllPlugin 插件：作用是预先编译一些模块。
DllReferencePlugin 插件：它的所用则是把这些预先编译好的模块引用起来。
（2）注意：DllPlugin 必须要在 DllReferencePlugin 执行前先执行一次，dll 这个概念应该也是借鉴了 windows 程序开发中的 dll 文件的设计理念。

3.配置装载机include和exclude
优化原理
（1）webpack 的装载机（loaders）里的每个子项都可以有 include 和 exclude 属性：

include：导入的文件将由加载程序转换的路径或文件数组（把要处理的目录包括进来）
exclude：不能满足的条件（排除不处理的目录）
（2）我们可以使用 include 更精确地指定要处理的目录，这可以减少不必要的遍历，从而减少性能损失。

（3）同时使用 exclude 对于已经明确知道的，不需要处理的目录，予以排除，从而进一步提升性能。
4、使用 webpack-parallel-uglify-plugin 插件来压缩代码
优化原理
（1）默认情况下 webpack 使用 UglifyJS 插件进行代码压缩，但由于其采用单线程压缩，速度很慢。

（2）我们可以改用 webpack-parallel-uglify-plugin 插件，它可以并行运行 UglifyJS 插件，从而更加充分、合理的使用 CPU 资源，从而大大减少构建时间。

5.externals配置

webpack官方文档是有一个配置用来处理各种依赖包打包优化的，【externals外部扩展】

6.Gzip压缩和sourceMap优化

7.inline manifest
manifest文件时路径配置和异步组件名字列表，这么做可以减少一个http请求

核心概念：
1.Entry:指定webpack开始构建的入口模块，从该模块开始构建并计算出直接或间接依赖的模块或者库

2.Output：告诉webpack如何命名输出的文件以及输出的目录

3.Loaders: 由于webpack只能处理javascript，所以我萌需要对一些非js文件处理成webpack能够处理的模块，比如sass文件

4. Plugins：Loaders 将各类型的文件处理成webpack能够处理的模块， plugins 有着很强的能力。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。但也是最复杂的一个。比如对js文件进行压缩优化的 UglifyJsPlugin 插件

5.chunk:coding split的产物，我萌可以对一些代码打包成一个单独的chunk，比如某些公共模块，去重，更好的利用缓存。或者按需加载某些功能模块，优化加载时间。在webpack3及以前我萌都利用 CommonsChunkPlugin 将一些公共代码分割成一个chunk，实现单独加载。在webpack4 中 CommonsChunkPlugin 被废弃，使用 SplitChunksPlugin