1. Home
  2. Forum
  3. Vue
  4. How to define externals in vue.config.js for package exclusion

How to define externals in vue.config.js for package exclusion

I tried to define a button in App.vue and introduced the cdn of ej2-vue-buttons.umd.min.js in index.html

index.html


App.vue



vue.config.js



error in console




Attachment: demo_9b41ccc6.zip

9 Replies
GK Gayathri KarunaiAnandam Syncfusion Team June 28, 2021 04:38 PM UTC

Hi bingxueyinlian, 

We have checked your reported query.  We can not able to reproduce the reported issue in our end. We have prepared a Button sample . Please check the below code snippet and sample. 

<template> 
  <div> 
    <ejs-button :isPrimary="true">{{content}}</ejs-button> 
  </div> 
</template> 
<script> 
import Vue from 'vue'; 
import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons'; 
Vue.use(ButtonPlugin); 
export default { 
  data() { 
    return { 
      content: 'Test', 
    }; 
  }, 
}; 
</script> 
<style lang='scss'> 
@import '../node_modules/@syncfusion/ej2-vue-buttons/styles/bootstrap4.css'; 
</style> 


Please refer the below links to use Direct Links and SCSS into your project. 


If you are still facing the issue, kindly share the below details. 
  • If possible, try to reproduce the reported issue in provided sample or share the issue reproducible sample
  • If possible, please share the video of the issue.
  • Please share the Syncfusion version you are using.

Please provide the above requested information, based on that we will check and provide you a better solution quickly. 

Regards, 
Gayathri K 


BI bingxueyinlian June 29, 2021 12:43 AM UTC

thank you for your reply，My requirement is to exclude syncfusion components through externals configuration and import them as cdn in index.html.（Do not change the development code, only through configuration）.

The purpose is not to package syncfusion, in order to reduce the packaging volume of the project.

so,I modified it on the basis of the quick start you provided（attachment）。

1.add externals in webpack.config.js


2. add cdn in index.html



3. run it by "npm run dev"，But the console has some errors



Attachment: quickstart_3f9c0453.zip

GK Gayathri KarunaiAnandam Syncfusion Team June 30, 2021 03:32 AM UTC

Hi bingxueyinlian, 

We have checked your reported query. We can resolve the issue in sample side. We suggest that you can reduce the packaging volume of the project by using the CRG link. Please check the below code snippet and sample. 

<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <meta charset="utf-8"> 
    <title>quickstart</title> 
    <link rel='nofollow' href="crg/styles/material.css" rel="stylesheet" /> 
    <script src="crg/scripts/ej2.js" type="text/javascript"></script> 
    <div id="app"></div> 
    <script src="dist/build.js"></script> 
  </head> 
  <body> 
    
  </body> 
</html> 



Please check the below link to download your required component script file from Custom Resource generator. 


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

Regards, 
Gayathri K 


BI bingxueyinlian July 4, 2021 09:03 AM UTC

Sorry, I think I made a mistake in the configuration of externals，and I changed it.

In fact, I don’t know how to write this externals configuration，Please help me.



Then it outputs an error




Attachment: quickstart_b2ff9acd.zip

GK Gayathri KarunaiAnandam Syncfusion Team July 6, 2021 04:02 AM UTC

Hi bingxueyinlian,  

We have checked your reported query and provided sample. We need to validate more on this query. So, we will update further details on July 7th,2021 and we appreciate your patience until then. 

Regards, 
Gayathri K 


BI bingxueyinlian July 10, 2021 11:48 PM UTC

Hi , is there any progress on this issue?




MK Mohan Kumar Ramasamy Syncfusion Team July 13, 2021 03:46 AM UTC

Hi bingxueyinlian, 
 
Thanks for your patience. 
 
We have validated your reported issue. We have resolved this issue in sample level by using cdn link. Please refer below code snippets. 
 
 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
    <title>Syncfusion Vue (ES5) UI Components</title> 
    <!-- Essentail JS2 for Vue  (All components Styles) --> 
    <link rel='nofollow' href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" type="text/css" /> 
    <!-- Vue library file--> 
    <script src="/node_modules/vue/dist/vue.min.js"></script> 
    <!-- Essential JS 2 for Vue  global script --> 
    <script src="https://cdn.syncfusion.com/ej2/ej2-vue-es5/dist/ej2-vue.min.js" type="text/javascript"></script> 
 
</head> 
 
<body> 
    <h2>Syncfusion Vue (ES5) Button Components</h2> 
    <div id="app"> 
        <ejs-button is-primary="true">Button</ejs-button> 
    </div> 
    <script> 
        // Registering the Button plugin. 
        Vue.use(ejs.buttons.ButtonPlugin); 
        new Vue({ 
            el: '#app', 
        }); 
    </script> 
 
</body> 
 
</html> 
 
 
For your reference, we have prepared a sample based on this. Please refer below link 
 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Mohan kumar R 


BI bingxueyinlian July 14, 2021 12:42 AM UTC

Thanks for your reply, but this is not what I want. We have used vue+syncfusion to develop several projects, which are close to completion. Now we just want to extract the common syncfusion components and put them in index.html to facilitate the use of browser caching.


If follow what you provided, all the places where syncfusion components are used need to be modified.

For example:

1.Simple

import {ButtonPlugin} from'@syncfusion/ej2-vue-buttons';

Vue.use(ButtonPlugin);


change to


const ejs = window.ejs;

Vue.use(ejs.buttons.ButtonPlugin);


2.complicated


import { GridPlugin, Page, Sort, Filter, Group, Aggregate } from "@syncfusion/ej2-vue-grids";

Vue.use(GridPlugin);


change to


const ejs = window.ejs;

Vue.use(ejs.grids.GridPlugin);


const Page = ejs.grids.Page;

const Sort = ejs.grids.Sort;

const Filter = ejs.grids.Filter;

const Group = ejs.grids.Group;

const Aggregate = ejs.grids.Aggregate;


What I want is to be like Vue, only modify the configuration to exclude large components, without modifying the code in the page (import or other)



GK Gayathri KarunaiAnandam Syncfusion Team July 16, 2021 07:18 AM UTC

Hi bingxueyinlian, 

Sorry for the inconvenience. 

We want to inform you that we do not support for Webpack externals CDN file for Syncfusion Vue components currently. The Vue Direct Script is the  only method to load the Vue Syncfusion components using CDN links. Also, we want to inform you that while running the production build the size of the Syncfusion components will be around 4 MB if we decide to use all Syncfusion components. More that, the bundled script file will be automatically gzipped.  

So, we request you to either use Direct Script or deploy the application using production build. And avoid importing styles in “.vue” instead load CSS CDN in index.html file.  

Please get back to us if you have any queries. 

Regards, 
Gayathri K 


Loader.
Up arrow icon