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文件

回答

相關問題