【译】如何使用webpack减小vuejs打包的大小

我在Stanley Black & Decker的工业4.0团队工做。咱们的团队最近为Stanley制造工厂建立了至关于App Store的产品。工厂能够访问市场并根据他们在该位置生产的产品选择他们须要的应用程序。这将构建一个自定义构建，将全部这些应用程序捆绑在一块儿，以便工厂运行。因为捆绑了如此众多的应用程序，咱们的vue生产构建时，致使多个大小过分的警告。

咱们最初的构建规模

当咱们进行构建时，咱们收到如下2条错误消息：

Vue建议捆版bundles不超过244KiB。咱们只有14个资源，每一个资源都超过这个规模。此外，咱们有四个入口点也高于建议的大小。如下是我将构建的大小减半的方法。

致使大型构建包的缘由是什么？

首先，我须要了解致使大型构建包大小的缘由。为此，我安装了webpack-bundle-analyzer。这将提供每一个包中项目大小的可视指南。

npm install --save-dev webpack-bundle-analyzer
复制代码

接下来，我在vue.config.js文件中配置webpack来使用它。下面是个人配置文件vue.config.js的内容：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
    .BundleAnalyzerPlugin;
    module.exports = {
        configureWebpack: {
            plugins: [new BundleAnalyzerPlugin()]
        }
   };
复制代码

安装完插件后，我再次运行构建，我能够看到个人构建大小是2.48MB。从图像中我能够看到最大的罪魁祸首是：

• vue-echarts
• vuetify
• moment
• lodash

减小Lodash的大小

Lodash占用了70.7kb的空间。Lodash仅在咱们的框架中的全部应用程序中的两个位置使用。这只是两种方法的大量空间。

咱们不止加载了lodash，咱们也加载了vue-lodash。第一步是移除package.json中没有使用到的vue-lodash。

下一步是仅从lodash导入咱们须要的两个项目（库）。咱们使用的是cloneDeep和sortBy。我替换了导入整个lodash库的初始调用：

import _ from 'lodash';
复制代码

我正在用这个只导入咱们须要的两个项目（库）的调用替换它。为此，我将导入从lodash更改成lodash/core。

import { cloneDeep, sortBy } from 'lodash/core';
复制代码

进行这一更改后，个人构建包的大小从2.48MB减小到2.42MB。这是显示构建的当前大小的图像。

在这里咱们能够看到lodash自己做为构建包一部分的大小。

减小moment.js的大小

Moment.js在构建包中占了234.36KB。当你查看图片的时，该大小的绝大部分是它们支持的全部语言的国际化语言环境。咱们根本没有使用moment.js的这一部分，因此咱们打包中包含了没必要要部分。

幸运的是，咱们能够删除它。而不是使下面的调用导入全部moment.js。

import moment form 'moment';
复制代码

咱们只能经过此调用导入日期操做代码：

import moment from 'moment/src/moment'
复制代码

至少在咱们的代码库中进行替换是一个问题。有18个地方在代码中导入了moment.js。我本能够在代码中进行全局搜索和替换。可是若是咱们向框架添加一个新的应用程序，开发人员极可能会使用默认调用来导入moment.js。若是他们这样作，那么咱们将再次导入全部国际语言环境。

所以，权衡以后，在webpack中建立一个快捷方式的别名。该快捷方式将用moment/src/moment替换全部导入moment的调用。咱们可使用resolve和设置别名在咱们的vue.config.js文件添加该别名。这是我vue.config.js如今的样子。

当咱们如今运行构建时，咱们的捆绑包如今已经降低到2.22MB的大小了。

当你查看图像的moment.js时，你将看到国际化区域设置根本再也不被加载。

经过删除moment.js中的语言环境，每当我启动服务器运行个人代码时都会发生错误，该错误代码说它没法找到./locale。在作了一些研究以后，我发现这已经成为了moment.js的一个已知好几年的问题，moment.js老是加载并假定locales是如今。你没法分辨加载日期操做功能的时刻。

要解决这个问题，我使用内置的webpack IgnorePlugin忽略此消息。这是我添加到个人vue.config.js文件中的插件代码：

new webpack.IgnorePlugin(/^\\.\\/locale$/, /moment$/)
复制代码

减小Vuetify.js的大小

个人下一个目标是Vuetify.js的大小。Vuetify占用空间500.78KB。对于一个供应商产品来讲，这是一个巨大的空间。

Vuetify提供了一种他们称之为点菜的功能。这容许你仅导入你使用的Vuetify组件。这会减小Vuetify的大小。挑战在于咱们有如此多的应用程序正在进行并试图肯定咱们正在使用的组件不会改变。

在当前版本的Vuetify（当我写这篇文章的时候版本为1.56）中，他们提供了一个名为vuetify-loader的产品。 它将遍历你的代码并肯定你正在使用的全部组件，而后将它们只导入你的构建包。 ⚠️注意：最终vuetify v2将内置此功能。 在该版本可用以前，你必须使用vuetify-loader仅导入你正在使用的组件。 Vuetify文档说明要得到全部必需的样式，咱们须要在stylus中导入它们。

我意识到咱们正在运行旧版本的vuetify.js。 因此我决定将个人vuetify版本升级到最新版本。我还同时安装了style和vuetify-loader：

npm install vuetify vuetify-loader stylus stylus-loader style-loader css-loader --save
复制代码

我导入Vuetify的插件代码有一些主题的自定义，以使用咱们公司的调色板。 如下是我目前的Vuetify插件：

我须要将Vuetify的导入更改成从vuetify/lib导入。 我还将导入stylus以得到全部样式。 这是个人插件代码如今的样子：

最后一步是告诉webpack使用vuetify-loader插件，以便它只导入咱们正在使用的组件。 我将须要的插件添加到插件数组。 这是个人vue.config.js文件：

如今，当我运行生产构建时，个人捆绑包大小为2MB。

减小vue-echarts的大小

Vue-echarts不是我捆绑中最大的项目。 Vue-echarts运行在echarts之上。 和Vuetify同样，我正在运行两种产品的旧版本。 将它们升级到最新版本我运行此命令：

npm install echarts vue-echarts --save
复制代码

我对vue-echarts GitHub repo进行了一些研究，查看全部已关闭的问题，发现最新版本的vue-echarts容许你经过更改导入的内容来加载较小的包。 之前我使用此命令导入它：

import ECharts from 'vue-echarts';
复制代码

我改为这种：

import ECharts from 'vue-echarts/components/ECharts.vue';
复制代码

如今，当我运行生产构建时，个人捆绑包大小降至1.28MB。

总结

个人目标是减小为咱们的应用程序生产而建立的包的大小。 个人构建的初始大小是2.48MB。 经过进行一些更改，我可以将构建大小减小到1.2MB。 这几乎减小了50％。

若是要建立生产环境Vue应用程序，则应该花时间来评估构建大小。 使用webpack-bundle-analyzer肯定哪些项目占用的空间最多。 而后开始采起必要步骤来减小这些项目的大小。 我可以经过这种方式减小捆绑中四个最大项目的大小。

但愿对你有帮助，能按照这些步骤来减小生产构建包的大小。

参考和后话

• 原文：dev.to/ratracegrad…
• webpack-bundle-analyzer地址：www.npmjs.com/package/web…
• 文章首发：github.com/reng99/blog…

更多的内容，请戳个人博客进行了解，能留个star就更好了💨