Deployment

CDN

The CDN links are provided individually for all the scripts and style sheets of Syncfusion Essential JS 2 components.

The CDN link are provided to following files in the package

  1. UMD Files
  2. Global Files
  3. CSS Files

The latest minified versions of all UMD, Global and CSS files are available in CDN:

  • https://cdn.syncfusion.com/ej2/PACKAGENAME/dist/PACKAGENAME.umd.min.js
  • https://cdn.syncfusion.com/ej2/PACKAGENAME/dist/global/PACKAGENAME.min.js
  • https://cdn.syncfusion.com/ej2/PACKAGENAME/styles/THEMENAME.css

For example

Versioned files are also available in CDN.

  • https://cdn.syncfusion.com/ej2/VERSION/PACKAGENAME/dist/PACKAGENAME.umd.min.js
  • https://cdn.syncfusion.com/ej2/VERSION/PACKAGENAME/dist/global/PACKAGENAME.min.js
  • https://cdn.syncfusion.com/ej2/VERSION/PACKAGENAME/styles/THEMENAME.css

For example

Packages

Syncfusion Essential JS 2 packages is published and available in public npmregistry and it available is as an open source software.

Anatomy of NPM Packages

Syncfusion Essential JS 2 components are shipped as npm packages. Following table explains purpose of each file available in the package.

Files Purpose
dist/es6 This folder contains the ES6 formatted JS file of the package.
dist/<packagename>.umd.min.js dist/<packagename>.umd.js For applications using AMD or Common JS based module loader can be utilize these files.
dist/global/<packagename>.min.js dist/global/<packagename>.js The global folder contains the scripts file for creating and manipulating our component using a global variable name window.EJ. All the components will be available within the window.EJ variable. This file can use directly in script tag without using any module loaders.
src/ This folder contains the script files in AMD format. You can connect these AMD files as a package in System JS or Require JS.
styles/<theme name>.css styles/<theme name>.scss This folder contains the CSS and SCSS files of the package.

Bundling and Tree Shaking

Essential JS 2 packages has support for bundling and tree-shaking our script files. Using bundling you can combine the JavaScript modules in a single file. Using Tree Shaking, you can exclude the unused script modules from production bundle.

Webpack and Module Injection

Large components provides the Module Injection for their features. For example, Grid component has some features like Sorting, Paging, Filtering, etc., To use these features in grid component we need to require the respective module from the package and other features no need to require when that is not used. So, The Module Injection is helps to remove bunch of code by their application. This will reduce the file size on production.

Example to Use Module Injection in Grid,

Step 1: Setup project locally, Clone the Essential JS 2 typescript seed application from GitHub

git clone https://github.com/syncfusion/ej2-typescript-seed.git webpack-demo

cd webpack-demo

npm install

Step 2: This application is preconfigured with Webpack. If we need to customize Webpack, need to edit webpack.config.js file which is in root folder.

Step 3: Add the below code in app/index.ts file.

import { Grid, Sort } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';

Grid.Inject(Sort);

let grid: Grid = new Grid({
    dataSource: data,
    allowSorting: true,
    columns: [
        { field: 'OrderID', headerText: 'Order ID', textAlign: 'right', width: 120 },
        { field: 'CustomerID', headerText: 'Customer ID', width: 150 },
        { field: 'ShipCity', headerText: 'Ship City', width: 150 },
        { field: 'ShipName', headerText: 'Ship Name', width: 150 }
    ],
    height: 315
});
grid.appendTo('#Grid');

Also, add the dataSource for the Grid. So, create a datasource.ts file in the app folder and add the below content to it.

export let data: Object[] = [
    {
        OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
        ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
        ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
    },
    {
        OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
        ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
        ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
    },
    {
        OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
        ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
        ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
    }
];

Step 4: Replace the below snippet to the body of HTML page.

<div style="margin: 50px;">
    <div id='Grid'></div>
</div>

<script src="index.js" type="text/javascript"></script>

Step 5: Run command npm start to run the application.

After Webpack compilation, index.js file has been created with only necessary codes of the application and the unused modules are excluded in Webpack bundle.

Tree Shaking in Webpack

Step 1: Setup project locally, Clone the Essential JS 2 typescript seed application from GitHub.

git clone https://github.com/syncfusion/ej2-typescript-seed.git webpack-demo

cd webpack-demo

npm install

Step 2: Edit the webpack.config.js file which is in root folder as like below.

var webpack = require('webpack');

module.exports = {
    entry: {
        'src/app/index': './src/app/index.ts'
    },
    output: {
        filename: '[name].js'
    },
    module: {
        rules: [{
            loader: 'ts-loader',
            exclude: /node_modules/,
        }]
    },
    resolve: {
        extensions: [".ts", ".js"]
    },
plugins:[
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
drop_console: false,
}
});
]
}

Step 3: Run command npm start to run the application.

Note: This will bundle the source file as per the configuration specified in webpack.config.js. Also here, we used new webpack.optimize.UglifyJsPlugin webpack plugin to perform the tree shaking and compression. This plugin uses the UglifyJS as internally.