前言
在上两章节中我们已经介绍过了 JavaScript 打包机制 以及 webpack 所有的内置配置,但当项目业务功能达到一定规模时,默认的配置已经不足以满足开发、用户的期望,我们就需要对 webpack 配置进行优化。
关于优化,有几个基本规则:
首先知道要优化什么;
针对待优化点进行优化;
衡量优化前后对项目的影响;
如何知道具体该如何优化喃,最直观的方式是分析它的输出文件,但 webpack 打包后的文件非常大且可读性差,下面就介绍几种可视化的分析工具,帮助你快速定位问题所在。
一、测量构建时间
优化 webpack 构建速度的第一步是知道将精力集中在哪里。我们可以通过 speed-measure-webpack-plugin
测量你的 webpack 构建期间各个阶段花费的时间:
步骤一:安装 speed-measure-webpack-plugin
npm install speed-measure-webpack-plugin --save-dev
步骤二:配置
// 分析打包时间
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();
// ...
module.exports = smp.wrap(prodWebpackConfig)
它能够:
分析整个打包总耗时;
每个插件和 loader 的耗时情况;
方便开发人员定位打包耗时瓶颈。
二、分析包内容
webpack-bundle-analyzer 扫描 bundle 并构建其内部内容的可视化。使用此可视化来查找大的或不必要的依赖项。
步骤一:安装 webpack-bundle-analyzer
npm install webpack-bundle-analyzer --save-dev
步骤二:配置
// 分析包内容
const BundleAnalyzerPlugin = re