如何通过webpack实现代码分割与公共代码提取以优化项目性能？

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

前言：随着多页面应用的兴起，若不对webpack打包进行优化，当某个模块被多个入口模块引用时，它会被打包多次（在最终输出的几个文件中，它都会有相同的代码）。

前言

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

一、概念

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

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

二、问题分析

首先，简单分析下，我们刚才提到的打包问题：

• 核心问题就是：多页应用打包后代码冗余，文件体积大。