我正在考虑在我现有的基于淘汰赛的 SPA 框架中使用 webpack,以便在用户浏览网站时延迟加载模型
我查看了以下线程 Create individual SPA bundles with Webpack
并且接受的答案似乎与我想要实现的非常相似。基本上,每个 SPA 页面都由从服务器以 JSON 格式返回的组件集合组成。
客户端将这些组件映射到单独的 js 模型。现在,这些 js 模型都捆绑在一个大文件中并提供给客户端,这是网站第一次呈现。
我想将这些组件(通过 require 和 require.ensure)分解成块,这些块将在 webpack 的帮助下按需加载。
因此,我摆弄了上述线程中提出的解决方案,并且效果很好。我还向 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 语句中的所有需求提取到一个返回 Promise 的函数中,这将与我现有的实现很好地配合
所以而不是
var mod = window.location.hash.split('/')[1].toLowerCase();
switch(mod) {
case "contacts":
require(["./pages/contacts"], function(page) {
// do something with "page"
});
break;
case "tasks":
require(["./pages/tasks"], function(page) {
// do something with "page"
});
break;
}
我把它改成
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 函数引起的,因为当我尝试直接需要它时它可以工作美好的
有任何想法吗?谢谢