Webpack 构建后文件变得很大？

上一篇回顾使用 Webpack 的动机，比较理论，本篇侧重实用。

这几篇文章的前提是 Webpack 已经入门。若无，请自行到 Webpack 官方网站的 getting start 按指引一步步实操。

啃先生(MrKenniu) | 文

使用 Webpack 打包，前端工程师可以按 CommonJS 或 ES6 Module 的规范写前端 JS 代码，使模块源代码看起来跟后端代码一样简洁，但是，很快发现文件太大（尤其基于 React 进行开发的应用，如果是单页面程序？更大了），为了解决问题，以下是我每次必用的策略：

• 按需加载 「 Code Split 」

• 提取公共代码 「 CommonsChunkPlugin 」

• 第三方库分开打包 「 DllPlugin 」

• 代码压缩「 UglifyJSPlugin 」

本篇总结 按需加载 的用法

Code Split 概念

Webpack 支持多种模块加载方式。CommonJS 的 require 和 ES6 的 import 是同步加载的，通过这些方式引入的依赖会被 Webpack 打包在一起，文件因而变大。而 AMD 或 CommonJS 的 require.ensure 是按需加载「异步的」，对于一些可以延迟加载的模块「依赖」，应该用这种方式，从而避免文件太大。

同步加载的模块被打包在同一个 chunk 「 一个 chunk 是一个 JS 文件，由一个或若干个模块组成 」，而通过异步加载的模块被打包在另外的 chunk 里，Webpack 以此来进行分片，即 Code split。

Code Split 的方式

• AMD : require

• CommonJS : require.ensure

• ES : System.import

chunk 的内容组成

通过 Code Split 分片，新的 chunk 由异步模块和这些模块的依赖构成。这些模块的依赖按同样的规则构建，即同步加载的模块打包在同一个 chunk，异步加载的模块被切分到新的 chunk。具体看下面的例子，请注意看代码注释的内容，build 目录里的三个文件是 Webpack 打包最终生成的。

Code Split 优化

从上面的例子可见，Code Split 分出来了两个 chunk，即 1.bundle 和 2.bundle，从而减小了主 chunk bundle.js 的文件大小，减轻程序初始化的网络等待。然而，新的问题出现了，1.bundle 和 2.bundle 都包含 io 模块，可见 io 模块有冗余。带着这个问题，下一篇总结 CommonsChunkPlugin 的使用

欢迎关注我的公众号