Webpack性能优化

1. 谈一下如何使用Webpack进行性能优化？
   Note
   ●
   有哪些方式可以减少 Webpack 的打包时间
   ●
   有哪些方式可以让 Webpack 打出来的包更小
   1.1 减小打包后文件体积
   1.1.1 按需加载
   如果我们将页面全部打包进一个 JS 文件的话，虽然将多个请求合并了，但是同样也加载了很多并不需要的代码，耗费了更长的时间。那么为了首页能更快地呈现给用户，我们肯定是希望首页能加载的文件体积越小越好，这时候我们就可以使用按需加载，将每个路由页面单独打包为一个文件。
   1.1.2 Tree Shaking
   Tree Shaking 可以实现删除项目中未被引用的代码，比如
   Plain Text
   复制代码
   1
   2
   3
   4
   5
   6
   // test.js
   export const a = 1
   export const b = 2
   // index.js
   import { a } from './test.js'
   Copy
   1
   对于以上情况，test 文件中的变量 b 如果没有在项目中使用到的话，就不会被打包到文件中。
   2
   如果你使用 Webpack 4 的话，开启生产环境就会自动启动这个优化功能。
   1.1.3 Scope Hoisting
   Scope Hoisting 会分析出模块之间的依赖关系，尽可能的把打包出来的模块合并到一个函数中去。
   比如我们希望打包两个文件
   Plain Text
   复制代码
   1
   2
   3
   4
   5
   // test.js
   export const a = 1
   // index.js
   import { a } from './test.js'
   Copy
   对于这种情况，我们打包出来的代码会类似这样
   Plain Text
   复制代码
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   [
   / 0 /
   function (module, exports, require) {
   //...
   },
   / 1 /
   function (module, exports, require) {
   //...
   }
   ]
   Copy
   但是如果我们使用 Scope Hoisting 的话，代码就会尽可能的合并到一个函数中去，也就变成了这样的类似代码
   Plain Text
   复制代码
   1
   2
   3
   4
   5
   6
   7
   [
   / 0 /
   function (module, exports, require) {
   //...
   }
   ]
   Copy
   样的打包方式生成的代码明显比之前的少多了。如果在 Webpack4 中你希望开启这个功能，只需要启用 optimization.concatenateModules 就可以了。
   1.2 加快打包速度
   1.2.1 优化 Loader
   Note
   对于 Loader 来说，影响打包效率首当其冲必属 Babel 了。因为 Babel 会将代码转为字符串生成 AST（抽象语法树），然后对 AST 继续进行转变最后再生成新的代码，项目越大，转换代码越多，效率就越低。当然了，我们是有办法优化的。
   首先我们可以减小 Loader 的文件搜索范围
   还可以将 Babel 编译过的文件缓存起来，下次只需要编译更改过的代码文件即可，这样可以大幅度加快打包时间。
   1.2.2 HappyPack
   Note
   受限于 Node 是单线程运行的，所以 Webpack 在打包的过程中也是单线程的，特别是在执行 Loader 的时候，长时间编译的任务很多，这样就会导致等待的情况。
   HappyPack 可以将 Loader 的同步执行转换为并行的，这样就能充分利用系统资源来加快打包效率了
   1.2.3 DllPlugin
   DllPlugin 可以将特定的类库提前打包然后引入。这种方式可以极大的减少打包类库的次数，只有当类库更新版本才有需要重新打包，并且也实现了将公共代码抽离成单独文件的优化方案。
   然后我们需要执行这个配置文件生成依赖文件，接下来我们需要使用 DllReferencePlugin 将依赖文件引入项目中
   1.2.4 代码压缩
   在 Webpack3 中，我们一般使用 UglifyJS 来压缩代码，但是这个是单线程运行的，为了加快效率，我们可以使用 webpack-parallel-uglify-plugin 来并行运行 UglifyJS，从而提高效率。
   Note
   Webpack4新特性：在 Webpack4 中，我们就不需要以上这些操作了，只需要将 mode 设置为 production 就可以默认开启以上功能。代码压缩也是我们必做的性能优化方案，当然我们不止可以压缩 JS 代码，还可以压缩 HTML、CSS 代码，并且在压缩 JS 代码的过程中，我们还可以通过配置实现比如删除 console.log 这类代码的功能。
   1.2.5 一些小的优化点
   ●
   resolve.extensions 用来表明文件后缀列表，默认查找顺序是 ['.js', '.json']，如果你的导入文件没有添加后缀就会按照这个顺序查找文件。我们应该尽可能减少后缀列表长度，然后将出现频率高的后缀排在前面
   ●
   resolve.alias 可以通过别名的方式来映射一个路径，能让 Webpack 更快找到路径
   ●
   module.noParse 如果你确定一个文件下没有其他依赖，就可以使用该属性让 Webpack 不扫描该文件，这种方式对于大型的类库很有帮助
   1.2.6 Webpack长缓存优化
   Note
   浏览器在用户访问页面的时候，为了加快加载速度，对用户请求的静态资源都会进行存储，但是每次代码更新或者升级的时候，我们都需要浏览器去加载新的代码。最方便的方法就是引入新的文件名称，只下载新的代码块，不加载旧的代码块，这就是长缓存。
   Webpack3配置
   这时会有三个文件，vendor、main、manifest，这时再修改代码，再加一个！此时manifest和main发生变化，但是vendor没有发生变化，manifest发生变化是因为代码发生改变，要重新编译，这就达到了改变业务代码，但不改变vendor。
   如果不用这种方法，就算vendor的代码不修改，打包出来的文件名的hash值也会发生改变。
   Webpack4配置
   性能优化前后对比：vendor的hash值并没有发生改变。
   image.png

参考文章
●
https://www.cnblogs.com/weihuan/p/9643095.html