Webpack代码分割与公共代码提取如何优化实现？

本文共计3447个文字，预计阅读时间需要14分钟。

前言：随着多页面应用的普及，开发者经常需要对webpack打包进行优化。如果不进行优化，当某个模块被多个入口模块引用时，它就会被打包多次（最终输出的几个文件中，都会有相同的代码）。

开发过程中，如果不对webpack进行优化，当某个模块被多个入口模块引用时，它就会被打包多次。例如，最终输出的几个文件中，都会有相同的代码。

前言

开发多页应用的时候，如果不对webpack打包进行优化，当某个模块被多个入口模块引用时，它就会被打包多次（在最终打包出来的某几个文件里，它们都会有一份相同的代码）。当项目业务越来越复杂，打包出来的代码会非常冗余，文件体积会非常庞大。大体积文件会增加编译时间，影响开发效率；如果直接上线，还会拉长请求和加载时长，影响网站体验。作为一个追求极致体验的攻城狮，是不能忍的。所以在多页应用中优化打包尤为必要。那么如何优化webpack打包呢？

一、概念

在一切开始前，有必要先理清一下这三个概念：

• module: 模块，在webpack眼里，任何可以被导入导出的文件都是一个模块。
• chunk: chunk是webpack拆分出来的：
  • 每个入口文件都是一个chunk
  • 通过 import、require 引入的代码也是
  • 通过 splitChunks 拆分出来的代码也是
• bundle: webpack打包出来的文件，也可以理解为就是对chunk编译压缩打包等处理后的产出。