玩转`webpack`高级特性应对项目优化需求

Tree Shaking清除未引用代码（dead-code）

webpack生产模式打包的优化过程中，自动开启tree shaking，检测未引用代码，然后清除

在mode为development、none时，需要配置optimization

module.exports = {
  // ... 其他配置项
  optimization: {
    // 模块只导出被使用的成员
    usedExports: true,
    // 开启压缩代码功能 压缩输出结果
    minimize: true
  }
}

tree-shaking实现 过程用到webpack的两个优化功能

• usedExports-打包结果只导出外部用到的成员

• minimize-压缩打包结果
  例子

sideEffects副作用

用于标识代码是否有副作用，从而提供更大的压缩空间

模块副作用指的是模块执行的时候除了导出成员，是否还做了其他事情

Code Splitting分块打包

webpack实现前端模块化优势固然明显，但也存在弊端：最终会将包打包到一起 All In One的方式导致包过大

合理方案：code Splitting将打包结果按照一定规则分离到每个bundle中，按需加载 降低应用的启动成本，提高响应速度

webpack实现分包的方式

1. 根据业务配置多个打包入口，输出多个打包结果

2. 结合ES Modules`动态导入，按需加载模块

多入口打包

多入口打包适用于多页应用，一个页面对应一个打包入口，对于不同页面公用的部分 提取到公共的结果中
例子

动态导入

按需加载：应用运行过程中，需要哪个模块资源，才去加载

webpack支持使用动态导入的方式实现模块按需加载，而且所有导入的模块都会被提取到单独的bundle从而实现分包
例子