的WebPack異步模塊與承諾

我用我現有的基於基因敲除SPA架構的WebPack爲了偷懶負荷模型考慮，爲用戶瀏覽該網站的WebPack異步模塊與承諾

我看看下面的線程 Create individual SPA bundles with Webpack

和接受的答案似乎非常相似，我試圖實現。基本上，每個SPA頁面都由從JSON格式的服務器返回的組件集合組成。

客戶端將這些組件映射到單個js模型。現在，這些js模型全部捆綁在一個大文件中，並在第一次呈現網站時提供給客戶端。

我想通過webpack將這些組件（通過require和require.ensure）分解成將按需加載的塊。

所以，我擺弄了上面提到的線程提出的解決方案，它工作得很好。我還添加了根指令webpack.config.js

var webpack = require('webpack'), 
    path = require('path'); 

var commonsPlugin = 
    new webpack.optimize.CommonsChunkPlugin('common.js'); 

module.exports = { 
    devtool1: 'eval-source-map', 
    entry: { 
     app: './app' 
    }, 
    output: { 
     path: __dirname + "/build", 
     filename: '[name]-bundle.js', 
     publicPath: "/code_split/build/" 
    }, 
    watchOptions: { 
     poll: 2000 
    }, 
    resolve: { 
     root: [ 
      path.resolve('./models/components') 
     ], 
     extensions: ['', '.js'] 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.js$/, 
       exclude: /node_modules/, 
       loader: 'babel', 
       query: { 
        presets: ['es2015'] 
       } 
      } 
     ] 
    }, 
    plugins: [commonsPlugin] 
}

，這樣我可以需要的模塊，而無需指定的相對路徑（每個模型是內部模型/部件目錄一個js模塊中）

現在我遇到的問題是，我試圖提取所有從switch語句返回一個無極的功能，這將我現有的執行工作得很好

所以不是

要求10

我改成

function loadModule(mo){ 
     return new Promise(function(resolve){ 
      require([mo], function(module){ 
       resolve(module.default); 
      }); 
     }); 
    } 

switch(mod) { 
     case "contacts": 
      promise = loadModule("contacts"); 
      break; 
     case "tasks": 
      promise = loadModule("tasks"); 
      break; 
    }

然而運行的WebPack後，將上述失敗這次得分。它似乎進入了一個無限循環，因爲它最終找到了一個驚人的高數量的模塊進行處理，並最終吐出了許多例外我非常確定這是由loadModule函數引起的，因爲當我嘗試使用direct時需要它正常工作

任何想法？謝謝

來源

2016-09-22 Thomas

Webpack使用靜態分析來找出要綁定的模塊（以及如何綁定它們）。因爲你正在抽象出需求，webpack無法再找出你需要的東西。爲了避免事情中斷，它會試圖捆綁你可能意味着的一切。在這種情況下，這可能意味着每個JS文件都可以在項目目錄中找到（包括node_modules中的所有JS文件）。

如果您想要突破Webpack的異步需求，您必須爲每個異步捆綁包重複您的代碼。

來源

2016-09-23 11:46:33 Ambroos

感謝您的幫助。所以基本上，我需要在每個病例報告中的承諾是正確的？我很好奇是否有任何其他方式可以實現這一點，因爲我看到它的方式有點限制並促進重複 – Thomas

現在還沒有。它並不完全促進重複，它只是不允許重複數據刪除。 Webpack確實需要靜態分析才能正常工作，所以根本沒有辦法解決它。 – Ambroos

的WebPack異步模塊與承諾

回答

相關問題