webpack5新特性

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第14天，点击查看活动详情 Webpack 5 在2020年10月正式发布，更新了很多新内容，

一、构建优化

1. Tree Shaking （删除无用代码）
2. 合并模块 concatenateModules
3. 副作用 sideEffects
4. 嵌套的 Nested tree-shaking
5. 内部模块 Inner-module tree-shaking

以下代码都表示webpack.config.js中的配置

Tree Shaking （删除无用代码）

tree-shaking在之前的webpack和rollup中我们已经说过了

module.exports = {
    optimization: {
      usedExports: true, // 标记出未被导出的变量
      minimize: true // 去除无用变量并压缩代码
   }
}

合并模块 concatenateModules

我们知道webpack可以通过dll实现对同一个项目的公共组件模块，做成代码共享common chunk，但是如果是要实现跨项目针对不同的应用就变得非常的困难不易实现。几乎没办法做到不同应用之间进行插拔式的热更新。那怎么样去实现这种跨应用间的共用模块运用呢？于是乎webpack5内置了一个模块联邦的功能特性，这个功能可以让跨应用间做到模块共享真正的插拔式的便捷使用。比如a应用如果想使用b应用中list的组件，通过模块联邦可以直接在a中进行import('b/list')非常的方便。

module.exports = {
    optimization: {
      concatenateModules: true // 生产模式(production)下默认启用
   }
}

副作用 sideEffects

所谓副作用就是模块除了导出成员之外所做的事情，

webpack通过配置optimization.sideEffects为true，表示打包时跳过那些没有被使用的且被package.json标记为无副作用的模块。

在打包中表现为：

• webpack打包结果不会保留这些没有意义的「导入模块行为」的代码。
• webpack打包结果不会保留没有使用（导入）的模块。

module.exports = {
	optimization: {
		sideEffects: true // 开启副作用功能(编译时跳过被导出但未被使用、标记为不包含副作用的模块)
	}
}

package.json：标记所有模块无副作用

{
  "name": "webpack 5.0",
  "version": "1.0.0",
  "sideEffects": false
}

4. 嵌套的 Nested tree-shaking 删除嵌套的模块未被使用的相关代码

5.内部模块 Inner-module tree-shaking

 module.exports = {
    optimization: {
      innerGraph: true // 分析导出和导入之间的依赖关系(生产模式默认启用)，进行代码压缩
  }
}