webpack优化-- 性能分析及文件大小调整

天元reborn
726 阅读3分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第5天，点击查看活动详情

导言

webpack作为我们日常必不可少的打包工具，我们在进行使用的时候，往往很关心性能，我们关注的点大多数有以下几点：

  • 构建速度
  • 构建产物大小
  • 分包大小

在正式的进行性能优化之前，我们需要先进行性能分析。来决定我们的优化方向。

构建时间

构建时间可以使用speed-measure-webpack-plugin来进行查看。

安装

npm install --save-dev speed-measure-webpack-plugin

将你的webpack配置外层包裹一层插件即可。

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");

const smp = new SpeedMeasurePlugin();

const webpackConfig = smp.wrap({
  plugins: [new MyPlugin(), new MyOtherPlugin()],
});

运行结果

在正常的webpack build之后，会生成一份打包的进程结果。

image.png

在这里你可以详细的查看是哪一部分的运行速度较慢，针对较慢的部分进行合理的优化。

构建产物大小

查看构建产物大小可以使用 webpack-bundle-analyzer ，这也是官方推荐的插件。

安装

npm install --save-dev webpack-bundle-analyzer

在你的config中，直接使用该插件即可

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

运行结果

image.png

可以看到运行结果中按照文件大小，依次展示你的构建产物。你可以点击进去查看对应文件的大小，并做出调整。

文件大小调整

本段不讨论tree shaking，这部分内容会单独讨论。

静态资源过大

一般情况下，我们不建议静态资源放在本地。对于项目中需要使用的静态资源，可以根据自己的需求，通过插件上传到cdn，然后利用cdn的图片压缩来做静态资源加载。

即使小厂也可以用cdn，因为cdn是按照访问量收费的，对于流量小的甚至还有一些免费额度。通过对于服务器的请求带宽和cdn的流量计费等计算，其实放在cdn是比放在自己的服务器要省钱的。

如果本地一定要使用某些资源，需要自己提前把静态资源的大小确定好，是否压缩等。因为某些图片，我们可能需要高清，比如老板的照片。这部分机器是无法代替人的判断的。

file-loader

对于一些比较小的图片，我们可以使用file-loader来转化为base64.但是这会加大我们构建产物的大小，我依旧建议上传cdn。

依赖包过大

在我们项目中进行包的引用的时候，建议引用es的包,这样能最大化的使用tree shakig。同时不同的引入方式，可能引入包的体积是不一样的

在开发中，你可以安装一个 import-cost插件，利用它帮你快速展示你引入的包的体积。 image.png

marketplace.visualstudio.com/items?itemN…

依赖库的替换

比如之前一直饱受诟病的momentjs，在经过长时间的历史迭代中，才逐步的呗舍弃，换成了- Day.js 所以经常关注社区，关注你的构建产物的依赖包大小，看看是否有平替。

依赖的cdn加载

如果我们确实有一个依赖库很大，同时我们也确实需要它，无法被移除。那么可以考虑改为cdn加载，尤其是不常变化的时候，这样即减轻了构建时的压力，也能对访问进行加速。依靠客户端的缓存能力，将使你的加载速度更好的提升。

chunk大小分析

还有重要的一步，是对chunk文件的分析。如果chunk过大，可以考虑再次拆分，使用懒加载。如果chunk过小，可以考虑预加载。通过懒加载和预加载，充分压榨浏览器性能

avatar
文章
阅读
粉丝