跳到主要内容

优化前端Webpack打包文件体积

· 阅读需 3 分钟

本文介绍了如何有效的减少前端 Webpack 打包文件的体积，优化网站使用体验。

最近用 umi 和 antd 搭了一个 Web App，js 文件大约 2M，体积有点大，打算优化一下。

优化之前js文件大约2M

分析​

使用webpack-bundle-analyzer查看各个包占的体积

在.umirc.js 配置插件：

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

...
chainWebpack(config) {
  process.env.NODE_ENV === 'production' &&
  process.env.analyze === 'true' &&
  config.merge({
    plugin: {
      bundleAnalyzer: {
        plugin: BundleAnalyzerPlugin,
        args: [{ analyzerPort: 3030 }]
      }
    }
  })
}
...

使用webpack-bundle-analyzer查看各个包占的体积

优化​

使用 Day.js 替换 moment.js​

Antd 会使用到 moment.js，从上放图可以看出，左下方 moment 占有了较大的体积。这里我们轻量的 Day.js 插件来替换 moment.js。Antd 提供了一个方便替换的插件antd-dayjs-webpack-plugin。

使用Day.js替换moment.js之后

减小 lodash 的体积​

使用时，避免引入整个 lodash 包：

import _ from 'lodash'
// 替换为
import _get from 'lodash/get'

同时可以使用lodash-webpack-plugin插件来进一步减小体积。

减小lodash体积之后

减小 Ant Design Icon 的体积​

从上方的分析图可以看，左侧 Antd icon 文件占了很大一部分体积，因为 Antd 新版本包含了多个样式很多的 icon 的 svg。

如果 Icon 使用的个数有限，可以通过临时解决方案来减小打包体积。但如果项目中有配置的 icon 类型，比如<Icon type={icon} />这样的写法就不适用了。具体可以参见讨论 issue。这个占时不做修改，期待 Antd 4.0 有更好的解决方案。

结果​

优化后，体积 2M→1.6M，减小了 20%

优化后体积约1.6M