Webpack5和旧版本

webpack5的新特性  相比于webpack4

一、构建速度优化

在webpack4中，为了让我们的构建速度更快，我们通常需要借助一些插件或一些额外的配置来达到目的。

cache-loader，针对一些耗时的工作进行缓存。比如缓存babel-loader的工作。

terser-webpack-plugin 或 uglifyjs-webpack-plugin的cache以及parallel。（默认开启）

比如我们会借助 cache-loader 去对我们构建过程中消耗性能比较大的部分进行缓存，缓存会存放到硬盘中node_modules/.cache/cache-loader，缓存的读取和存储是会消耗性能的，所以只推荐用在性能开销大的地方

二、包代码体积的优化

1.代码分割splitchunk

为了让我们的打出来的包体积更加小，颗粒度更加明确。我们经常会用到webpack的代码分割splitchunk以及tree shaking。在webpack5中，这两者也得到了优化与加强。比如

三、.Tree Shaking

tree shaking 的意思是，webpack 在打包的时候将会剔除掉被没有被使用到的代码达到减小报体积，缩短 http 请求时间，起到一定效果的页面优化。

Webpack 不能百分百安全地进行 tree-shaking，webpack4 有些场景是不能将无用代码剔除的。有些模块导入，只要被引入，就会对应用程序产生重要的影响。一个很好的例子就是全局样式表，或者设置全局配置的JavaScript 文件。

Webpack 认为这样的文件有“副作用”。具有副作用的文件不应该做 tree-shaking，因为这将破坏整个应用程序。Webpack 的设计者清楚地认识到不知道哪些文件有副作用的情况下打包代码的风险，因此webpack4默认地将所有代码视为有副作用。这可以保护你免于删除必要的文件，但这意味着 Webpack 的默认行为实际上是不进行 tree-shaking。值得注意的是webpack5默认会进行 tree-shaking。

webpack4 曾经不进行对 CommonJs 导出和 require() 调用时的导出使用分析。webpack 5 增加了对一些 CommonJs 构造的支持，允许消除未使用的 CommonJs 导出，并从 require() 调用中跟踪引用的导出名称。

3.剔除npm包里面针对Node.js模块自动引用的Polyfills

v4编译引入npm包，有些npm包里面包含针对nodejs的polyfills，实际前端浏览器是不需要的

最后的、持久化缓存的优化

以前v4是根据代码的结构生成chunkhash，现在v5根据完全内容生成chunkhash，比如改了内容的注释或者变量则不会引起chunkhash的变化，让浏览器继续使用缓存。

在webpack4 中，chunkId与moduleId都是自增id。也就是只要我们新增一个模块，那么代码中module的数量就会发生变化，从而导致moduleId发生变化，于是文件内容就发生了变化。chunkId也是如此，新增一个入口的时候，chunk数量的变化造成了chunkId的变化，导致了文件内容变化。

webpack4可以通过设置optimization.moduleIds = 'hashed’与optimization.namedChunks=true来解决这写问题，但都有性能损耗等副作用