Webpack - 由于FullCalendar导致的巨型bundle.js文件

Question

我正在使用Fullcalendar和Moment.js来使用JSON数据构建一个简单的交互式日历。我正在使用Webpack 2将我的JS打包成一个文件。下面是我的webpack.config.js文件的简化版本（完整内容比这个要多得多）。

var webpack = require('webpack');

var bower_dir = __dirname + '/library/bower_components';

var config = {
    resolve: {
        alias: {
            jquery: bower_dir + '/jquery/src/jquery.js',
            vue: bower_dir + '/vue/dist/vue.js',
            fullCalendar: bower_dir + '/fullcalendar/dist/fullcalendar.js',
            moment: bower_dir + '/moment/moment.js',
        }
    },

    entry: {
        app: './library/js/main.js'
    },

    output: {
        path: __dirname + '/dist/library/js',
        filename: "bundle.js"
    },

    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            Vue: 'vue'
        }),
    ],

    module: {
        noParse: /moment.js/
    }

};

module.exports = config;

我注意到在包含这两个文件后，我的捆绑文件的文件大小显著增加。我在这里读到了有关Moment类似问题的信息，并实施了相应更改，将未压缩的捆绑文件大小从2.13MB减少到1.83MB。

当通过Webpack Visualiser运行webpack --json的输出时，我注意到Full Calendar仍占据着文件大小的很大比例，比我包含的任何其他库都要多（23.7％，其次是jQuery的15.8％和Vue.JS的15.4％）。

我想知道是否有任何方法可以减小这个文件的大小？我目前在生产中运行webpack -p，将大小减小到656kB，但这仍然似乎很大。

- GuerillaRadio

---

你没有使用代码分割... - Callum Linington

唯一真正缩小尺寸的方法是推出您自己的日历模块，该模块仅包括所需功能。或者，如果完整的日历有一个选项来指定... - Callum Linington

请查看指南部分了解代码分割。 - Callum Linington

你在打包中是否包含源代码映射文件？ - robertklep

Answer 1

使用webpack配置文件并配置IgnorePlugin来排除所有区域设置文件：

var webpack = require('webpack')

module.exports = {
  ...
  plugins: [
    // Ignore all locale files of moment.js
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
  ],
  ...
};

您可能需要一些本地化设置。您可以在代码中导入它们：

import moment from 'moment'
import 'moment/locale/fr'

- Roman

Answer 2

你有没有考虑过同时使用CDN版本的jQuery和Fullcalendar？首先，这些库更容易被用户浏览器缓存（特别是jQuery，因为许多网站都在使用它），而且这些库的缓存将独立于你的开发周期，这可能会加快重复页面加载的速度。我不知道你如何进行缓存，但由于Fullcalendar和jQuery是你的捆绑包的一部分，每次更改捆绑包时，用户也必须重新下载这些库。使用现有的CDN可以解决这个问题。

此外，如果你正在使用babel进行JS转译，也许可以尝试使用Webpack 2，并进行一些最小的babel配置调整，你就可以获得tree-shaking，这可能会减少捆绑包的大小。

- Sasha Ko

Answer 3

配置

entry: {
  moment: bower_dir + '/moment/moment.js',
  fullcalendar: bower_dir + '/fullcalendar/dist/fullcalendar.js',
  app: './library/js/main.js'
},
plugins: [
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Vue: 'vue'
  }),
  new webpack.optimize.CommonsChunkPlugin({
    name: ['moment', 'fullcalendar', 'manifest']
  })
]

假设您绝对需要从应用程序服务器提供这些库依赖项（而不是CDN），那么我们需要进行代码拆分，并确保我们将在代码库中所需/导入的常见库分离开来。

或者，您还可以通过缩小捆绑包的文件大小来减少文件大小，但我假设您已经知道如何做到这一点。

- Denis Tsoi