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

我使用Fullcalendar & Moment.js来构建使用JSON数据的简单交互式日历。我使用Webpack 2将我的JS捆绑到一个文件中。以下是我的webpack.config.js文件的简化版本（完整的东西加载的比这更多）。Webpack - 由于FullCalendar造成的巨大的bundle.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，但这仍然看起来很多。

来源

2017-03-31 GuerillaRadio

您没有使用代码拆分... –

缩小尺寸的唯一方法是在您的日历模块上推出仅包含所需功能的日历模块。或者如果完整的日历有指定的选项 –

请参阅[指南部分]（https://webpack.js.org/guides/code-splitting-libraries/）以分割代码.... –

你有没有考虑使用CDN版本都jQuery和Fullcalendar？首先，那些更可能被用户的浏览器缓存（jQuery当然，因为许多网站使用它），并且这些库的缓存将独立于你的开发周期，这可能会加速重复页面上的事情负载。不知道你是如何做缓存的，但因为Fullcalendar和jQuery是你的包的一部分，所以每次你改变包时，用户都必须重新下载这些库。使用现有的CDN可以消除该问题。

另外，如果你使用babel进行JS转译，也许尝试使用webpack 2并且使用一些最小化的babel配置调整，你会得到tree-shaking，这也可能会减小bundle的大小。

来源

2017-04-07 20:23:47

配置

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），那么我们就需要编写代码分裂，并确保我们共同的分离库在您的代码库中需要/导入。

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

来源

2017-04-10 07:02:06

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

回答

相关问题