Webpack - 巨大的 bundle.js 文件由于 FullCalendar

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 的类似问题 here并实现了将我的未压缩包大小从 2.13MB 减少到 1.83MB 的更改。

当通过 Webpack Visualiser 运行 webpack --json 的输出时我注意到完整日历仍然占文件大小的很大一部分，比我包括的任何其他库都要多(23.7%，第二高的是 jQuery，占 15.8%，然后是 Vue.JS，占 15.4%) .

我想知道有没有人知道有什么方法可以减小这个文件的大小？我目前在生产中运行 webpack -p 将大小减小到 656kB 但这看起来仍然很多。

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'