的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异步模块与承诺

回答

相关问题