Jet Dynamic Imports Not Working

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.

Comments

  • edited February 6

    If you are using Webpack 4.0, code splitting requires minimal configuration

    one line in webpack.config
    https://github.com/webix-hub/jet-demos/blob/master/webpack.config.js#L20

    and define view resolver in your app
    https://github.com/webix-hub/jet-demos/blob/master/sources/bundles.js#L18

    Here, the "return import" construct is used for modules which need to be loaded dynamically

  • edited February 6

    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.

  • edited February 7

    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.

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!