ES6 Modules

[IlyaKhD]

The Problem

Tree Shaking optimizes bundles that use ES6 modules (see descriptions at webpack.js.org and rollupjs.org). DevExtreme is available as a set of CommonJS modules and cannot be optimized in this way.

We also have multiple reported issues related to CommonJS modules, Tree Shaking, and large bundle size:

• Tree-shaking support devextreme-react#84
• DevExtreme 20.1 warning on Angular 10 devextreme-angular#1086
• Large Bundle Size - Angular devextreme-angular#811

In addition, Angular recommends using ES6 modules in your entire application.

The Proposed Solution

To deliver a set of ES6 modules in addition to CommonJS modules. This step solves all the described problems while providing backward compatibility. It also makes future enhancements like Improved Code Splitting more efficient.

No changes in your projects are required. The new ES6 modules will be used instead of the old CommonJS modules automatically.

We need Your Feedback

Take a Quick Poll

Do you find Tree Shaking useful?

Have you tried using multiple bundles in any of your projects (e.g. a bundle per page)?

Get Update Notifications

Subscribe to this thread, or to our Facebook and Twitter accounts, for updates on this topic.

[pedrofurtado]

This amazing feature will be available in next 20.2 official release? 🎉

[IlyaKhD]

That's right.
I think it will be available for testing a bit earlier - let's say, in 20.2 Beta. If so, I will post an update in this thread.

[erdoganmegma]

That's awesome! Any Eta updates?

[softboy99]

Sounds great.

[BoBiene]

@IlyaKhD When do you think we can try this out in an alpha-build?

[MaximKudriavtsev]

Hi,

Our work on this feature is at the final stage. We will update this topic once we publish an NPM package with it.

[BoBiene]

@MaximKudriavtsev is it part of the 20.2.2-beta?

[MaximKudriavtsev]

Hi @BoBiene,

Unfortunately no, the Beta version doesn't include ES6 modules. We have some unexpected implementation issues, and now we are fixing them.

We would like to publish one more Beta version with this feature before the official release. I will notify you once we do so.

[softboy99]

Does it means if this are finished, tools like Vite Scafford for Vue3 also be supported? Vite also depends on ES6 modules.

[IlyaKhD]

Unfortunately, Vite requires that all packages have ES6 modules. DevExtreme depends on jszip which provides CommonJS modules only.

[softboy99]

Hi
Stuk/jszip#349, it supports es6 import

[hakimio]

@softboy99 the problem with jszip is not with the way you import it but how the library itself is structured. It's a CommonJS module.

[softboy99]

Hi,
https://www.npmjs.com/package/@progress/jszip-esm. It is forked by telerik

[IlyaKhD]

Hi everyone,

We'd like to make an update on ES6 modules support.

The good news is that we've finished all the major tasks related to this feature. However, when we tested our new module set with some of the existing DevExtreme projects, we faced unexpected issues that might break our customers' projects. So, we consider it to be too risky to make it part of our stable v20.2 release.

Since it's very important to let you test these new modules in your projects, we plan to include them in the very first v21.1 alpha release that we expect to publish in a few weeks.

The next step in our bundle size optimization journey is to organize DevExtreme into smaller modules. For instance, to split our DataGrid into multiple parts based on different use cases. It will enhance the overall tree shaking and code splitting. We would also appreciate it if you share your cases when unused/unexpected code is bundled while it shouldn't. It'll help us improve the most important parts first.

Please stay tuned and thank you for your collaboration.

[javzwin]

So the only solution so far to avoid these warnings is "allowedCommonJsDependencies"??

[hakimio]

@javzwin until ES6 modules are released, yes, it is.

[mrparag94]

Does this 21.1 Branch supports es6 import..?

[IlyaKhD]

Hi, @mrparag94, sorry for the late response.

I'm not sure you mean that, but you can use ES6 import statements with all actual DevExtreme versions, e.g., v20.2.
About the 21_1 branch, we're reorganizing the package structure, which is important for bundle optimization.

[Rai-Rai]

When is the release of 21.1 planned?

[hakimio]

@Rai-Rai the major DX releases usually come in 6 months intervals, so I would guess May 2021.

[Semigradsky]

Do you have plans for moving devexpress-diagram, devexpress-gantt, devextreme-quill to optionalDependencies? Or just remove from dependencies

[softboy99]

Hi,
Does the 21.1.1-sprint3 is your 21.1 alpha?

[101arrowz]

Unfortunately, Vite requires that all packages have ES6 modules. DevExtreme depends on jszip which provides CommonJS modules only.

An alternative to jszip-esm would be fflate. In addition to supporting ESM, it is much faster, much smaller, and has these added benefits.

[bobskigit]

Can we publish the localization messages as es6 modules?

Warning: culture.service.ts depends on 'devextreme/dist/js/localization/dx.messages.fr'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

[MaximKudriavtsev]

Hi @bobskigit,

Thank you for your feedback. We will publish localization messages as es6 modules in future releases.

Could you please share your project bundle size with and without the ES6 modules feature? Also, any additional feedback would be appreciated. This information helps us plan future enhancements.

[beeing]

Just wondering if there's any improvements planned for the CSS part as well? Thanks.

[hakimio]

@beeing #13654

[bobskigit]

My bundle size is reduced by 308Kb in a 2.8Mb bundle when using es6 modules. Nice work. From: Maxim Kudryavtsev ***@***.***> Sent: 23 March 2021 08:26 To: DevExpress/DevExtreme ***@***.***> Cc: bobskigit ***@***.***>; Mention ***@***.***> Subject: Re: [DevExpress/DevExtreme] ES6 Modules (#14351) Hi @bobskigit <https://github.com/bobskigit> , Thank you for your feedback. We will publish localization messages as es6 modules in future releases. Could you please share your project bundle size with and without the ES6 modules feature? Also, any additional feedback would be appreciated. This information helps us plan future enhancements. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#14351 (comment)> , or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABAHVGQJHKOYR4MT6CCL353TFBGDJANCNFSM4QJQN7IA> . <https://github.com/notifications/beacon/ABAHVGQSEM6AOWT5MTN5IF3TFBGDJA5CNFSM4QJQN7IKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOF73PMQY.gif>

[MaximKudriavtsev]

Hi @bobskigit,

My bundle size is reduced by 308Kb in a 2.8Mb bundle when using es6 modules. Nice work.

Thank you for sharing the size of your project bundles. We appreciate it.

Can we publish the localization messages as es6 modules?

We researched the issue and found a solution. Import .json localization files and load them by calling the loadMessages function. You can refer to the NPM section in the Dictionaries article for more details. Please let us know if this resolves the issue on your side.

[softboy99]

Hi
for 21.1.2-beta, cannot be used with vite. The following is the error message:
Uncaught SyntaxError: The requested module '/node_modules/.vite/devextreme_ui_dialog.js?v=8e88dbc9' does not provide an export named 'default'

[alexserov]

Hello @softboy99,
It seems that you're trying to use the default export instead of the named one in your app. Try the syntax from our documentation and share you results with me.

[salemu01]

Hello,
I've been waiting impatiently for this and tested the 21.1.2-beta.
I hoped i would have noticed much bigger difference, but it's still at least a first noticeable difference :

main.js with no devextreme	2,4mb
main.js with devextreme 20.x	3,8mb
main.js with devextreme 21.1.2	3,6mb

As the work for smaller independent modules continues, i hope we get to see a much more reduced size on the final project bundle.

(Haven't noticed any particular issues on this beta version, except a single CustomStore issue that i created and already solved by the team. Thank you.)

[dxbykov]

@salemu01 Thanks for sharing the numbers. Note that Tree Shaking can't magically 'compress' the code. It just eliminates the code that is not used in your app. So, if you use everything, there won't be any difference in the final bundle size.

We would like to examine your particular case. Could you please specify what components/features you are using (or not using) in your app? If you could specify what's included in the final bundle that shouldn't, it would be even more helpful.

[salemu01]

@dxbykov Thanks you. I will join here the output of bundle analyser, as well as all my imports, if you could point out any possible improvement.

[salemu01]

@dxbykov After first analysis, everything seems rather normal to me. On my lazy loaded module (which isn't the concern) i see only dx modules that i imported in my project.
On the main.js bundle, although i hoped i may end up with a lighter bundle, i suppose i have the minimum necessary imports, and if some weren't, i don't think it would be of consequent size.

Here is as an overview, my lazy loaded imported modules:

And here is in the main.js bundle:

Thank you.

[softboy99]

Hi,
after upgrade to 21.1.3, cannot start with the following error,which are ok with 20.2.x:
component.js:65 Uncaught (in promise) TypeError: callbacks_1.default is not a function
at Proxy.data (component.js:65)
at resolveData (runtime-core.esm-bundler.js:6046)
at runtime-core.esm-bundler.js:5860
at Array.forEach ()
at applyOptions (runtime-core.esm-bundler.js:5860)
at finishComponentSetup (runtime-core.esm-bundler.js:6636)
at setupStatefulComponent (runtime-core.esm-bundler.js:6567)
at setupComponent (runtime-core.esm-bundler.js:6503)
at mountComponent (runtime-core.esm-bundler.js:4206)
at processComponent (runtime-core.esm-bundler.js:4182)

vite 2.3.4 + vue3.0.11 + devexreme 21.1.3

[alexserov]

Hi @softboy99,
It seems to be a Vite 2.3.x issue, you can track the vitejs/vite#3399 for more info and updates.

As a workaround, I suggest you downgrade Vite to 2.2.4

[softboy99]

Hi,
afer upgrade to 21.1.3 with vite 2.3.8. It's ok now. Thanks. But some Icons cannot be displayed dx-icon-menu,dx-icon-folder,dx-icon-dropdown-editor etc. When use vue-cli, its ok, is it vite issue or devextreme issue?

[babich-a]

Hi @softboy99 . Please check the following breaking change https://supportcenter.devexpress.com/ticket/details/t977747/theme-files-are-shipped-with-the-utf-8-encoding-starting-with-v20-2. If it is not related to the issue, we need more info on how dx icons are rendered.

[softboy99]

Hi，
when donwgrade to 20.2.7, it is ok.

[babich-a]

There have been no serious style changes between 20.2.7 and 21.1.3. Can you send us a simple project or repository that reproduces the issue?

[softboy99]

Hi,
i need time to prepare an sample project for you. But i found in the chrome devtools,->sources->node_modules only dx.common.css are there. I'm not sure if it is vite issue or not.

[babich-a]

@softboy99 BTW dx.common.css has no styles anymore in 21.1 and the 20.2 last versions.

i need time to prepare an sample project

It will be great if you create a separate issue with the 'styles' problem.

[softboy99]

Hi,
you can see the demo project: https://github.com/softboy99/vite-devexteme21_1.git

[babich-a]

@softboy99 thanks.
I reproduce this issue both for v20.2.7 and v21.1.3.
It looks like some vite css plugin has an issue with a comma-separated list.
We have the following value in theme.base.css and theme.additional.css (21.1.3):

src: local("DevExtreme Material Icons"),local("devextreme_material_icons"),url("../../../node_modules/devextreme/dist/css/icons/dxiconsmaterial.woff2") format("woff2"),url("../../../node_modules/devextreme/dist/css/icons/dxiconsmaterial.woff") format("woff"),url("../../../node_modules/devextreme/dist/css/icons/dxiconsmaterial.ttf") format("truetype");

v20.2.7 has no quotes in url().

After I run npm run build or npm run dev, I see the following rule in the stylesheet (dist\assets\index.<hash>.css):

src:local("DevExtreme Material Icons"),local("devextreme_material_icons") url(/assets/dxiconsmaterial.be9f68c6.woff2) format("woff2") url(/assets/dxiconsmaterial.879a8d81.woff) format("woff") url(/assets/dxiconsmaterial.5a8e9d31.ttf) format("truetype");

It has no commas between items though there should be commas according to the css specification.

[softboy99]

Hi,
Thanks. The right version is 20.2.6. We can post an issule to vite community.

[AlisherAmonulloev]

Thank you for your reply. Please do post the issue to the vite community. Thank you in advance!

[iKnowMagic]

Vite is giving this error: /node_modules/devextreme-vue/popup.js?v=f3801dc8' does not provide an export named 'DxPopup'

With devextreme 21.1.5 + devextreme-vue 21.1.5 and vite 2.4.4.

I guess that DevExtreme is not supporting vitejs at the moment?

Thanks.

[jacksonrr3]

@iKnowMagic
Hi,
I couldn't reproduce the error with the following configuration

• devextreme@21.1.5
• devextreme-vue@21.1.5
• vite@2.4.4
• vue@3.2.11

Would you please attach an example with popup that demonstrates the issue?

[iKnowMagic]

Many thanks, @jacksonrr3

I created a new Vue / ViteJS app, added DevExtreme and I did not see any errors while using a DevExtreme component.

Unfortunately, at the moment I am unable to provide a full environment that exemplifies the issue.

[jacksonrr3]

@iKnowMagic
Thank you for the update. Unfortunately we cannot tell what goes wrong without an example. Right now I can only recommend you double-check versions of Vue, Vite and devextreme and update them to the configuration I mentioned above.

[ksercs]

Thanks you everybody, who gave us feedback on this feature. I'm closing this thread. In the case of bugs or questions, feel free to create a new ticket in our Support Center.