记一次 webpack 打包体积优化

tomlingtm 发布于2019-08-26 11:47 / 2744人阅读

摘要：手头做的项目开发得差不多了，而打包配置是一开始粗略配置的，不大的项目打包出来得，所以现在必须进行优化。用于生产环境的打包，设置其为后，这些库会提供最小体积的文件。这种情况打包后的体积要更小一些。最后打包结果的体积开销主要就是以上几项。

手头做的项目开发得差不多了，而打包配置是一开始粗略配置的，不大的项目打包出来得6MB+，所以现在必须进行优化。

打包结果分析

执行命令 webpack --profile --json > stats.json ，可以将打包过程的详细信息以 json 格式记录到文件中。依据该文件，webpack-bundle-analyzer、Webpack Chart 等分析工具会以可视化的形式展示打包过程和结果。

如果不想用这些额外工具，通过命令 webpack --display-modules --sort-modules-by size ，webpack 会在日志中按大小排序显示所有模块。

我在项目中，将第三方库基本都集中打包到一个 chunk (vendors)，业务逻辑多带带一个 chunk (app)。打包总体积的大头来自 vendors，其中antd占据大头(3MB+)、moment占据约500KB、提取的 css 约300KB、react-dom也是500KB+，出乎意料的是 lodash 也是500KB+。

逐个击破 设置环境变量 NODE_ENV 为 production

不少库会按开发环境(development)和生产环境(production)提供不同的文件，主要是为了开发模式下的调试，也会因此有文件体积上的差别。用于生产环境的打包，设置其为production后，这些库会提供最小体积的文件。

plugins: [
    // ...
    new webpack.DefinePlugin({
      "process.env": {
        NODE_ENV: JSON.stringify("production")
      }
    }),
    // ...
]

css-loader

css-loader 在 webpack 默认不开启压缩，需要设置 css-loader?minimize。

module: {
    // ...
    {
      test: /.css$/,
      use: ExtractTextPlugin.extract({
        fallback: "style-loader",
        use: "css-loader?minimize"
      })
    }
    // ...
}

大头——antd (ant design)

因为并没有使用 antd 的所有组件，所以按需加载是必需的。根据其文档（按需加载 - Ant Design），需要安装 bable 插件 babel-plugin-import ，并在 babel 配置中添加：

{
    // ...
    "plugins": [
        ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }],
        // ...
    ]
}

在我配置过程中，libraryDirectory 配置的不同也会有较大影响，但按目前文档来看貌似没有影响，待我确认后再做记录。

=== 2018-02-23 更新 ===

看来bable-plugin-import这几天有更新，现在配置项 libraryDirectory 的默认值时 lib，即使用通过 require (commonjs) 引用模块的文件。而先前我在配置的时候并没有默认值，如果没有显示配置 libraryDirectory，打包结果会出现重复的内容。

采用了 es6 module 的项目建议配置 libraryDirectory 为 es，即使用通过 import (es6 module) 引用模块的文件。这种情况打包后的体积要更小一些。

=== end ===

这里还有很重要一点，babel-plugin-import 要求 antd 不能被提取为公共模块 vendors，否则就无法实现按需加载。尚不清楚是 babel 插件的原因，还是这个插件多带带的原因。

moment

moment 库的体积开销主要是 i18n 文件，配置 webpack 将用不到 i18n 文件不打包即可。

plugins: [
    new webpack.ContextReplacementPlugin(/moment[/]locale$/, /zh-cn/),
]

看上去很轻量的 lodash

lodash看上去就是一些工具函数，应该是很轻量的，然而一次全部加载下来要达到500KB，因此也需要按需加载。它的按需加载还比较麻烦。

lodash为每个方法多带带提供了库，但这种方式在实际使用中并不灵活，所以这种最「干净」的方法不建议使用。

像 antd 一样，lodash 也有 babel 插件用于按需加载——babel-plugin-lodash

{
    // ...
    "plugins": [
        "lodash",
        // ...
    ]
}

同样，lodash 就不能提取到公共模块了。

最后

打包结果的体积开销主要就是以上几项。经过优化后，体积下降至1.5MB以内，还是很客观的。不过 antd 依然占据大头，后续会考虑把 antd 替换掉，毕竟用到的组件不多。

GPU云服务器云服务器记一次在阿里云搭建服务器记一次阿里云服务器集体中毒 Webpack打包分块体积

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107566.html

记一次vue-webpack项目优化实践【更新】

摘要：优化空间不大主要关注另外两个上面。目前为止，项目打包后的大部头就是，这个目前的优化空间较小。当然，从整体优化的大维度上来说优化的点还有很多，这个文章继续更新下去。项目现状项目是一个数据监测平台，引入了ehcart和three.js 负责项目的数据可视化；打包后，体积高达2.1M，这个体积相比于我的项目规模来说就显得稍有笨重了使用webpack-bundle-analyzer分析了...

ernest.wang 2019-08-23 15:13 评论0 收藏0
【webpack】: 记一次jsbundle体积优化

摘要：背景最近接到一个任务是帮忙优化的体积，项目是用开发，多入口。这就涉及到两次打，那这两次打的如何打通呢的方式配合使用。通过可以将挂载到已经存在的某个变量上。通过其它一些变量的方式暴露出去。不同的配置可以将你的库打成一个库，库甚至是一个库。背景最近接到一个任务是帮忙优化jsbundle的体积，项目是用ts开发，多入口。在分析之后发现每个bundle都打了同一份代码(这份代码是其它组提供...

Fundebug 2019-08-26 11:36 评论0 收藏0
记一次Vue项目优化及思路

摘要：记录一个前端项目优化的路程，效果如上图。第二步优化结果再次运行查看项目打包情况可以看到项目体积已经优化到，中也看不到的踪影了。本文主要想提供一些优化思路及手段，即如何定位通过，查看页面加载时间问题，然后再解决这些问题。 showImg(https://segmentfault.com/img/bVbq282?w=381&h=384); 记录一个前端项目优化的路程，效果如上图。接下来我...

keithxiaoy 2019-08-02 16:12 评论0 收藏0
记一次Vue项目优化及思路

摘要：记录一个前端项目优化的路程，效果如上图。第二步优化结果再次运行查看项目打包情况可以看到项目体积已经优化到，中也看不到的踪影了。本文主要想提供一些优化思路及手段，即如何定位通过，查看页面加载时间问题，然后再解决这些问题。 showImg(https://segmentfault.com/img/bVbq282?w=381&h=384); 记录一个前端项目优化的路程，效果如上图。接下来我...

nanchen2251 2019-08-23 16:49 评论0 收藏0
记一次使用 vue-admin-template 的优化历程

摘要：同时也要引入对应版本的先引入引入组件库因为依赖是从外部引入的，所以需要告知在打包时，依赖的来源。然后在中加入一条命令执行或者即可完成打包。因此将此次优化记录下来，并传上了中。本文原文前言公司有好几个项目都有后台管理系统，为了方便开发，所以选择了 vue 中比较火的后台模板作为基础模板进行开发。但是，开始用的时候，作者并没有对此进行优化，到项目上线的时候，才发现，打包出来的文件...

xumenger 2019-08-22 17:17 评论0 收藏0