Why is SystemJS downloading modules I'm not using? (e.g. Grid module causes PdfExport to be downloaded)

[Scott]

I'm following the Getting Started tutorial for the Grid component on this page: https://ej2.syncfusion.com/documentation/grid/getting-started/ - I've completed the tutorial to the point right before the "Module injection" heading.

My app.ts file therefore only has two import statements: `import { Grid } from '@syncfusion/ej2-grids';` and `import { data } from './datasource'`.

I ran the project locally using `npm start` and watched my browser's dev-tools window's network activity tab.

I noticed that my browser requested JS files for modules that my code isn't using, like "ej2-pdf-export/dist/ej2-pdf-export.umd.min.js" and "ej2-inputs/dist/ej2-inputs.umd.min.js".

I updated my system.config.js file to block those unwanted modules (we don't need PDF Export and that alone adds 358KB to the download) by setting their SystemJS map to "@empty", like so (or see attached file for my whole example):

    System.config( { map: { "@syncfusion/ej2-pdf-export"  : "@empty", ... } } );

After making this change, my browser no-longer requests "ej2-pdf-export/dist/ej2-pdf-export.umd.min.js" and the grid otherwise loads and works fine and there are no errors or messages in my browser console.

And yet, this feels like I'm fighting SystemJS or Syncfusion's library - especially as none of this is mentioned in Syncfusion's documentation (other than that only "ej2-grids", "ej2-base", "ej2-data", and "ej2-popups" are required for the Grids module). If only those modules are required, then why is it still loading unused optional modules?

A downside to blocking the module in SystemJS's config is that if I do have a separate web-page that does need the PdfExport functionality then I need to make a separate system.config.js file that does include the file - or create per-page mappings - neither sound particularly ideal.

How can I prevent the browser from downloading Syncfusion modules it isn't using?

Attachment: system.config.js_59459a36.zip

[Madhu Sudhanan P]

Hi Scott, 

Greetings from the Syncfusion, 

As per your query, you have created the EJ2 Grid sample using Documentation which that sample has config the grid required modules in System.config file. The System.config file must be referred with the grid dependencies. The SystemJS just works by simply loading the files required for the packages[ej2-grid] entry point and load all dependencies required for the package irrespective of their usage in the application. 

 

Your requirement is similar to dead code elimination or tree shaking concepts by which unused codes or modules will be ignored. To achieve this, we suggest to you alternative way of referring Grid specific dependencies by using “WebPack”.  The Webpack you can support all of what your expect support with external loaders and it also allows to you specify how you load these modules with ‘loaders’ and bundle them together into your bundle or index.html. Because webpack can bundle your entire app together. 

 

For more details on why to choose webpack please refer to the below link. 

Details about the SystemJS and WebPack  : https://engineering.velocityapp.com/webpack-vs-browersify-vs-systemjs-for-spas-95b349a41fa0 

We have built-in support bundling and tree-shaking the script files(Webpack). Using bundling you can combine the JavaScript modules in a single file. Using Tree Shaking, you can exclude the unused script modules for production bundle. Please refer the below help documentation to know about the Webpack configuration. 

Help Documentation: https://ej2.syncfusion.com/documentation/deployment/?no-cache=1#bundling-and-tree-shaking  

Please get back to us, if you need further assistance. 

Regards, 

Madhu Sudhanan P