最近一直在研究這塊內(nèi)容，希望能夠讓站點加載速度最優(yōu)，自己單獨新建了一個項目，對著webpack的官方文檔做了一些實驗，但是結(jié)果和預(yù)期（文檔里面提到的結(jié)果）還是有很大差別，有時候感覺根本實現(xiàn)不了……

項目結(jié)構(gòu)非常加單，如下圖：

首頁（IndexPage）有兩個菜單，分別對應(yīng)（Menu1、Menu2），兩個菜單都引用了兩個分頁組件（Pagination、Pagination2）。

路由如下：

routes: [
  {
    path: '/', name: 'index', component: IndexPage, children:[
      {path: '/menu1', name: 'menu1', component: Menu1, hidden: true},
      {path: '/menu2', name: 'menu2', component: Menu2, hidden: true},
    ],
  }
]

注：頁面（組件）中所有的import語句改為require.ensure。

以下是我的一些疑問：

1、按照上面的說明，現(xiàn)在所有的組件都分開打包了，其實只是用到了壓縮，其實這樣還是不夠理想的，有些組件可能只有幾k甚至更小，導(dǎo)致請求非常多。那么該如何設(shè)定這個分界點呢？什么樣的打包到一起？什么樣的分開打包？一個文件大概多大合適？
2、require.ensure()方法，第三個參數(shù)相同的組件可以打包到一起，但是這樣感覺太不方便了，假設(shè)paage頁面用到了分頁組件，并取名（提供第三個參數(shù)），那么其他的頁面在引用的時候也需要使用該名字，這樣如果項目大，就會非常麻煩，需要的名字太多了，改如何組織打包呢？
3、把第三方組件分開打包，確保每次打包的名稱都不變化，這樣就能利用緩存了，因為引用的第三方庫如果版本不變，內(nèi)容就不變，所以不需要每次都改名、打包發(fā)布？配置如下：

  entry: {
    app: ["babel-polyfill", "./src/main.js"],
    vendors: ['vuex', 'vee-validate', 'vue-cookie', 'vue-i18n', 'vue-router'],
  },

  plugins: [
    //new webpack.optimize.CommonsChunkPlugin('common.js'),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendors', 
      filename: 'vendors.js'
    }),
    /*new webpack.ProvidePlugin({
      jQuery: "jquery",
      $: "jquery"
    })*/
  ]

錯誤信息如下：

綠色部分表示打包成功了，但是又有紅色的錯誤提示，這是什么意思呢？關(guān)鍵是打包出來的vendors.xxxx.js沒有什么內(nèi)容，預(yù)期是把這些第三方庫打包到一起，利用緩存，每次打包名字（hash保持）相同？