0

我正在考虑在我现有的基于淘汰赛的 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 函数引起的，因为当我尝试直接需要它时它可以工作美好的

有任何想法吗？谢谢

4

1 回答 1

1

Webpack 使用静态分析来找出要捆绑的模块（以及如何捆绑它们）。因为您正在抽象出需求，所以 webpack 无法再弄清楚您到底需要什么。为避免出现问题，它会尝试捆绑您可能表示的所有内容。在这种情况下，这可能意味着它可以在您的项目目录中找到的每个 JS 文件（包括 node_modules 中的所有 JS 文件）。

如果你想承诺 Webpack 的异步需求，你将不得不为每个异步包复制你的代码。

于 2016-09-23T11:46:33.440 回答