Closed fresheneesz closed 6 years ago
But.. the readme should say what it means. Otherwise its only me, you, and jhnns that knows ; )
Add it and send a PR... :smile:
Done. But I just realized, I wouldn't actually know how to access the module's exports when using 'lazy'. Do you have to require it again normally somewhere later?
The api is the same for both modes.
So...
var load = require("bundle?lazy!.file.js", function() {
// do stuff on load?
})
load()
?
The API is:
var bundle = require("bundle!./file.js"); // <= browser sends request here
bundle(function(fileExports) { // callback is called when the module is ready
// fileExports can be used
});
var bundle = require("bundle?lazy!./file.js");
bundle(function(fileExports) { // <= browser sends request here
// fileExports can be used
});
Basically the bundle-loader is like:
require(["./file.js"], function(fileExports) {
// fileExports can be used
});
But it affects only one module:
// two separate requests
var b1 = require("bundle!./f1");
var b2 = require("bundle!./f2");
// one request with both modules
require(["./f1", "./f2"], function(f1, f2) {/*...*/});
Most important use case with dynamic requires:
// Good: load only the page requested.
// Each page is in a separate chunk
function loadPage(pageName, callback) {
try {
var pageBundle = require("bundle!./pages/" + pageName)
} catch(e) {
return callback(e);
}
pageBundle(function(page) { callback(null, page); })
}
// Bad: All pages in one chunk, loads all pages at once
// Unwanted behavior
function loadPage(pageName, callback) {
try {
require(["./pages/" + pageName], function(page) {
callback(null, page);
});
} catch(e) {
calback(e);
}
}
Maybe you can add some of these examples to the README.
when specify bundle?lazy&name=the_module_name!some_module_path
, will cause the module bundled individual , and load sync in page init, not as the lazy specified
Is there a way to combine this with require.context? Whenever I attempt loading with context, the module is unable to be found.
I try to load module lazy. But webpack
give me this:
WARNING in ./src/main.js
Critical dependencies:
47:28-78 the request of a dependency is an expression
@ ./src/main.js 47:28-78
WARNING in ./src/index.html
Module parse failed: /Users/dulin/workspace/webpack-summer/bundle-loader/simple/src/index.html Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:0)
at Parser.pp.raise (/usr/local/lib/node_modules/webpack/node_modules/acorn/dist/acorn.js:920:13)
at Parser.pp.unexpected (/usr/local/lib/node_modules/webpack/node_modules/acorn/dist/acorn.js:1483:8)
at Parser.pp.parseExprAtom (/usr/local/lib/node_modules/webpack/node_modules/acorn/dist/acorn.js:330:12)
at Parser.pp.parseExprSubscripts (/usr/local/lib/node_modules/webpack/node_modules/acorn/dist/acorn.js:225:19)
at Parser.pp.parseMaybeUnary (/usr/local/lib/node_modules/webpack/node_modules/acorn/dist/acorn.js:204:17)
at Parser.pp.parseExprOps (/usr/local/lib/node_modules/webpack/node_modules/acorn/dist/acorn.js:151:19)
at Parser.pp.parseMaybeConditional (/usr/local/lib/node_modules/webpack/node_modules/acorn/dist/acorn.js:133:19)
at Parser.pp.parseMaybeAssign (/usr/local/lib/node_modules/webpack/node_modules/acorn/dist/acorn.js:110:19)
at Parser.pp.parseExpression (/usr/local/lib/node_modules/webpack/node_modules/acorn/dist/acorn.js:86:19)
at Parser.pp.parseStatement (/usr/local/lib/node_modules/webpack/node_modules/acorn/dist/acorn.js:1753:23)
at Parser.pp.parseTopLevel (/usr/local/lib/node_modules/webpack/node_modules/acorn/dist/acorn.js:1648:21)
at Parser.parse (/usr/local/lib/node_modules/webpack/node_modules/acorn/dist/acorn.js:1616:17)
at Object.parse (/usr/local/lib/node_modules/webpack/node_modules/acorn/dist/acorn.js:882:44)
at Parser.parse (/usr/local/lib/node_modules/webpack/lib/Parser.js:902:15)
at DependenciesBlock.<anonymous> (/usr/local/lib/node_modules/webpack/lib/NormalModule.js:104:16)
at DependenciesBlock.onModuleBuild (/usr/local/lib/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
at nextLoader (/usr/local/lib/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
at /usr/local/lib/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
at Storage.provide (/usr/local/lib/node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:52:20)
at CachedInputFileSystem.readFile (/usr/local/lib/node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:140:24)
at DependenciesBlock.onLoadPitchDone (/usr/local/lib/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:255:7)
at DependenciesBlock.loadPitch (/usr/local/lib/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:182:27)
at DependenciesBlock.doBuild (/usr/local/lib/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:241:4)
at DependenciesBlock.build (/usr/local/lib/node_modules/webpack/lib/NormalModule.js:84:14)
at Compilation.buildModule (/usr/local/lib/node_modules/webpack/lib/Compilation.js:126:9)
at /usr/local/lib/node_modules/webpack/lib/Compilation.js:309:10
at /usr/local/lib/node_modules/webpack/lib/NormalModuleFactory.js:58:13
at NormalModuleFactory.applyPluginsAsyncWaterfall (/usr/local/lib/node_modules/webpack/node_modules/tapable/lib/Tapable.js:75:69)
at onDoneResolving (/usr/local/lib/node_modules/webpack/lib/NormalModuleFactory.js:38:11)
at onDoneResolving (/usr/local/lib/node_modules/webpack/lib/NormalModuleFactory.js:121:6)
@ ./src ^\.\/.*$
WARNING in ./src ^\.\/.*$
Module not found: Error: a dependency to an entry point is not allowed
@ ./src ^\.\/.*$
WARNING in ./src ^\.\/.*$
Module not found: Error: a dependency to an entry point is not allowed
@ ./src ^\.\/.*$
here is my code:
document.addEventListener('DOMContentLoaded', init);
const dynamicModules = ['a', 'b', 'c'];
function init() {
document.getElementById('lazyloadModule').addEventListener('click', handleLazyloadModule, false);
}
function handleLazyloadModule(e) {
var moduleName = 'a';
var layzLoadModuleMap = loadModuleLazy(dynamicModules);
layzLoadModuleMap[moduleName](function(module) {
console.log('lazyloadModule is ' + module);
})
}
function loadModuleLazy(names) {
var layzLoadModuleMap = {};
names.forEach(function(name) {
layzLoadModuleMap[name] = require(`bundle-loader?lazy!./modules/${name}.js`);
});
return layzLoadModuleMap;
}
Anybody can help me? Thanks.
Can you update the readme to explain at what point the module is loaded when loaded via "lazy"?