Я рассматриваю, используя Webpack в моих существующей 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 внутри модели каталога/компонентов)
Теперь проблема я бегу в том, что я пытался извлечь все требует от заявления переключателя на функцию, которая возвращает 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, поскольку, когда я пытаюсь с прямым требованием, отлично работает
Любые идеи? Thanks
Спасибо за помощь. Так что, в принципе, мне нужно обещание в каждом случае? Мне любопытно, есть ли другой способ сделать то же самое, так как я вижу это, это несколько ограничивает и способствует дублированию. – Thomas
Прямо сейчас нет. Он не способствует точному дублированию, он просто не позволяет дедупликации. Webpack действительно нуждается в статическом анализе, чтобы работать хорошо, поэтому просто нет возможности обойти его. – Ambroos