I’ve written a fairly large app and I need to reduce the load time. Dynamic import seems to be the solution but I’m not having any luck getting webpack to create the chunk files. I’ve read everything I can find in the webpack documentation and every relevant link Google produces for two days with no luck. Would anyone have any ideas as to why webpack wouldn’t create the chunk files? Any help would be greatly appreciated.
If you are using Webpack 4.0, code splitting requires minimal configuration
one line in webpack.config
and define view resolver in your app
Here, the “return import” construct is used for modules which need to be loaded dynamically
Thank you for looking at this maksim. I’ve setup my code according to the jet-demos example and still not having any luck with webpack generating the chunk file. I’ve tried several different variations of the imports. I can build the jet-demos project files and the bundle files are created in /codebase/. I can’t figure out what in my setup is failing.
webpack.config.js
entry: {
anytime: "./sources/anytime.js",
},
output: {
path: path.join(__dirname, "codebase"),
publicPath:"/codebase/",
filename: '[name].bundle.js',
chunkFilename: '[name].bundle.js'
}
entry file:
const app = new JetApp({
debug : true,
start : "/login",
views: (name) => {
if(name === 'admin'){
return import(
/* webpackChunkName: "admin" */
"views/admin");
}
if(name === 'admin.dashboard'){
return import(
/* webpackChunkName: "admin.dashboard" */
"views/admin/dashboard");
}
if(name === 'admin.subscriptions'){
return import(
/* webpackChunkName: "admin.subscriptions" */
"views/admin/subscriptions");
}
return name;
}
})
npm Build Results
jharris@hpenvy:~/fossil/anytime_webix$ npm run build
webix-jet-app@1.1.0 build /home/jharris/fossil/anytime_webix
webpack --env.production true
Hash: 40911497abda454cf910
Version: webpack 4.28.2
Time: 2813ms
Built at: 02/04/2019 6:39:47 AM
Asset Size Chunks Chunk Names
anytime.bundle.js 109 KiB 0 [emitted] anytime
anytime.css 988 bytes 0 [emitted] anytime
Entrypoint anytime = anytime.css anytime.bundle.js
[0] ./node_modules/webix-jet/dist/index.js + 17 modules 48.3 KiB {0} [built]
| 18 modules
[1] ./sources/globals.js 611 bytes {0} [built]
[3] ./sources/models/m_subscriptions.js 2.38 KiB {0} [built]
[4] ./sources/views/admin/win_create_subscription.js 5.75 KiB {0} [built]
[5] ./sources/views/admin/win_add_subsuser.js 3.19 KiB {0} [built]
[6] ./sources/views/admin/win_create_subsuser.js 3.24 KiB {0} [built]
[7] ./sources/views/admin/win_changerole.js 3.13 KiB {0} [built]
[8] ./sources/views/timeclock/win_userdepts.js 3.39 KiB {0} [built]
[9] ./sources/views/admin/dashboard.js 1.58 KiB {0} [built]
[10] ./sources/views/admin/subscriptions.js 9.79 KiB {0} [built]
[11] ./sources/views/timeclock.js 2.92 KiB {0} [built]
[37] ./sources/anytime.js 2.12 KiB {0} [built]
[38] ./sources/styles/anytime.css 39 bytes {0} [built]
[40] ./sources/views sync ^\.\/.$ 1.62 KiB {0} [optional] [built]
[41] ./sources/locales sync ^\.\/.$ 181 bytes {0} [built]
+ 28 hidden modules
Child mini-css-extract-plugin node_modules/css-loader/index.js!node_modules/less-loader/dist/cjs.js!sources/styles/anytime.css:
Entrypoint mini-css-extract-plugin = *
[0] ./node_modules/css-loader!./node_modules/less-loader/dist/cjs.js!./sources/styles/anytime.css 1.18 KiB {0} [built]
+ 1 hidden module
As far as I can see, you have the correct config and code. Similar one works for me ( not exactly the same version of Webpack though )
Try to add one more comment to force code splitting
if(name === 'admin'){
return import(
/* webpackMode: "lazy" */
/* webpackChunkName: "admin" */
"views/admin");
}
Also, if this one doesn’t work, try to move the loaded file outside of “views” folder. By default webpack import all files from “views” folder, which can conflict with code splitting.
I can’t thank you enough maksim! Moving the files I wanted to import outside of the “views” folder worked. Now I have to do some refactoring in my app, but that’s not a problem.