Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ES6 Modules #14351

Closed
IlyaKhD opened this issue Aug 24, 2020 · 57 comments
Closed

ES6 Modules #14351

IlyaKhD opened this issue Aug 24, 2020 · 57 comments

Comments

@IlyaKhD
Copy link
Contributor

IlyaKhD commented Aug 24, 2020

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:

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
Copy link
Contributor

pedrofurtado commented Aug 26, 2020

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

@IlyaKhD
Copy link
Contributor Author

IlyaKhD commented Aug 26, 2020

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
Copy link

erdoganmegma commented Sep 4, 2020

That's awesome! Any Eta updates?

@softboy99
Copy link

softboy99 commented Sep 14, 2020

Sounds great.

@BoBiene
Copy link

BoBiene commented Sep 17, 2020

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

@MaximKudriavtsev
Copy link
Contributor

MaximKudriavtsev commented Sep 30, 2020

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
Copy link

BoBiene commented Oct 2, 2020

@MaximKudriavtsev is it part of the 20.2.2-beta?

@MaximKudriavtsev
Copy link
Contributor

MaximKudriavtsev commented Oct 2, 2020

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
Copy link

softboy99 commented Oct 10, 2020

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

@IlyaKhD
Copy link
Contributor Author

IlyaKhD commented Oct 14, 2020

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

@softboy99
Copy link

softboy99 commented Oct 15, 2020

Hi
Stuk/jszip#349, it supports es6 import

@hakimio
Copy link

hakimio commented Oct 15, 2020

@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
Copy link

softboy99 commented Oct 21, 2020

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

@IlyaKhD
Copy link
Contributor Author

IlyaKhD commented Oct 27, 2020

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
Copy link

javzwin commented Nov 3, 2020

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

@hakimio
Copy link

hakimio commented Nov 3, 2020

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

@mrparag94
Copy link

mrparag94 commented Nov 11, 2020

Does this 21.1 Branch supports es6 import..?

@IlyaKhD
Copy link
Contributor Author

IlyaKhD commented Nov 16, 2020

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
Copy link

Rai-Rai commented Dec 1, 2020

When is the release of 21.1 planned?

@hakimio
Copy link

hakimio commented Dec 1, 2020

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

@Semigradsky
Copy link

Semigradsky commented Dec 28, 2020

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

@softboy99
Copy link

softboy99 commented Dec 31, 2020

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

@101arrowz
Copy link

101arrowz commented Jan 1, 2021

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
Copy link

bobskigit commented Mar 22, 2021

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
Copy link
Contributor

MaximKudriavtsev commented Mar 23, 2021

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
Copy link

beeing commented Mar 23, 2021

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

@hakimio
Copy link

hakimio commented Mar 23, 2021

@beeing #13654

@bobskigit
Copy link

bobskigit commented Mar 23, 2021

@MaximKudriavtsev
Copy link
Contributor

MaximKudriavtsev commented Apr 20, 2021

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
Copy link

softboy99 commented Apr 28, 2021

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
Copy link
Contributor

alexserov commented Apr 28, 2021

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
Copy link

salemu01 commented May 19, 2021

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
Copy link
Contributor

dxbykov commented May 20, 2021

@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
Copy link

salemu01 commented May 20, 2021

@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
Copy link

salemu01 commented May 20, 2021

@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:
image

And here is in the main.js bundle:

image
image

Thank you.

@softboy99
Copy link

softboy99 commented May 31, 2021

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
Copy link
Contributor

alexserov commented May 31, 2021

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
Copy link

softboy99 commented Jun 21, 2021

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
Copy link
Contributor

babich-a commented Jun 21, 2021

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
Copy link

softboy99 commented Jun 21, 2021

Hi,
when donwgrade to 20.2.7, it is ok.

@babich-a
Copy link
Contributor

babich-a commented Jun 21, 2021

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
Copy link

softboy99 commented Jun 22, 2021

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
Copy link
Contributor

babich-a commented Jun 22, 2021

@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
Copy link

softboy99 commented Jun 22, 2021

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

@babich-a
Copy link
Contributor

babich-a commented Jun 22, 2021

@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
Copy link

softboy99 commented Jun 22, 2021

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

@AlisherAmonulloev
Copy link
Collaborator

AlisherAmonulloev commented Jun 22, 2021

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

@iKnowMagic
Copy link

iKnowMagic commented Sep 15, 2021

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
Copy link
Contributor

jacksonrr3 commented Sep 17, 2021

@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
Copy link

iKnowMagic commented Sep 20, 2021

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.

image

@jacksonrr3
Copy link
Contributor

jacksonrr3 commented Sep 20, 2021

@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
Copy link
Contributor

ksercs commented Jul 11, 2022

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.

@ksercs ksercs closed this as completed Jul 11, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests