Minimize size in webpack
Hello,
We have seen that the webpack is very big due to the document editor. Can the solution be to do tree shaking?
Following the steps found here we can't do it work.
This the error we obtain:
Besides this problem, we don't really understand how to use the tree shaking in our project.
Is there any other information we could see?
Regards
Gaspar Blein
Hi Gaspar,
Syncfusion greetings,
We will update further details on February 18,2022.
Regards,
Ajithamarlin E
I am also looking for an awser on this, my entry point has doubled from 22mb to 44mb!!
Hi,
We need additional timeline to check this, will update the further details within 21 February 2022.
Regards,
Ajithamarlin E
Hello,
Did you have time to investigate about our issue?
We are using configureWebpack to extend the webpack configuration to apply tree shaking with the vue-cli-service and we couldn't be able to reduce the bundle size.
If you have some example or recommendation to configure the vue-cli application.
Thank you in advance for your answer
Regards
Gaspar
Hi Gokul, thank you for your response.
These are the syncfusion packages we use and the details of our build:
package.json > @syncfusion dependencies (5)
"dependencies": {
"@syncfusion/ej2-base": "19.4.38",
"@syncfusion/ej2-vue-base": "19.4.38",
"@syncfusion/ej2-vue-documenteditor": "19.4.38",
"@syncfusion/ej2-vue-lists": "19.4.38",
"@syncfusion/ej2-vue-richtexteditor": "19.4.38"
}
node_modules directory > @syncfusion (27)
@syncfusion/ej2-base
@syncfusion/ej2-buttons
@syncfusion/ej2-calendars
@syncfusion/ej2-charts
@syncfusion/ej2-compression
@syncfusion/ej2-data
@syncfusion/ej2-documenteditor
@syncfusion/ej2-dropdowns
@syncfusion/ej2-excel-export
@syncfusion/ej2-filemanager
@syncfusion/ej2-file-utils
@syncfusion/ej2-grids
@syncfusion/ej2-icons
@syncfusion/ej2-inputs
@syncfusion/ej2-layouts
@syncfusion/ej2-lists
@syncfusion/ej2-navigations
@syncfusion/ej2-office-chart
@syncfusion/ej2-pdf-export
@syncfusion/ej2-popups
@syncfusion/ej2-richtexteditor
@syncfusion/ej2-splitbuttons
@syncfusion/ej2-svg-base
@syncfusion/ej2-vue-base
@syncfusion/ej2-vue-documenteditor
@syncfusion/ej2-vue-lists
@syncfusion/ej2-vue-richtexteditor
Our configuration:
- Use ES2015 module syntax (import and export)
- Added a "sideEffects" property to project's package.json file.
- Use the production mode configuration option to enable optimizations (minification and tree shaking)
- vue-cli-service build to produce a production-ready bundle in the dist/ directory, with minification for JS/CSS/HTML and auto vendor chunk splitting.
- vue-cli-service build as "App" target (index.html with asset and resource hints injection, vendor libraries split into a separate chunk for better caching, static assets under 8KiB are inlined into JavaScript and static assets in public are copied into output directory)
This is the vue-cli-service build terminal output:
asset size limit: The following asset(s) exceed the recommended size limit (244
KiB).
This can impact web performance.
Assets:
59a9c958a0fe8869f4da.worker.js (871 KiB)
fonts/materialdesignicons-webfont.9d243c16.woff2 (353 KiB)
fonts/materialdesignicons-webfont.a0711490.woff (509 KiB)
fonts/materialdesignicons-webfont.b62641af.ttf (1.09 MiB)
fonts/materialdesignicons-webfont.9cacdc87.eot (1.09 MiB)
js/app.93e1e8a9.js (740 KiB)
css/chunk-vendors.3fc899d1.css (2.64 MiB)
js/chunk-vendors.8c6cc870.js (8.76 MiB)
warning
entrypoint size limit: The following entrypoint(s) combined asset size exceeds t
he recommended limit (244 KiB). This can impact web performance.
Entrypoints:
app (12.1 MiB)
css/chunk-vendors.3fc899d1.css
js/chunk-vendors.8c6cc870.js
css/app.6ac4bef3.css
js/app.93e1e8a9.js
File Size Gzipped
dist\js\chunk-vendors.8c6cc870.js 8973.67 KiB 2251.38 KiB
dist\59a9c958a0fe8869f4da.worker.js 870.55 KiB 250.13 KiB
dist\js\app.93e1e8a9.js 739.88 KiB 156.27 KiB
dist\js\todolist.bdaf9560.js 9.88 KiB 3.12 KiB
dist\js\dashboard.e6972ea7.js 6.17 KiB 2.11 KiB
dist\js\workflowDesigner.ba778750.js 0.39 KiB 0.30 KiB
dist\css\chunk-vendors.3fc899d1.css 2704.34 KiB 329.46 KiB
dist\css\app.6ac4bef3.css 12.83 KiB 3.28 KiB
dist\css\todolist.1089e49a.css 0.91 KiB 0.23 KiB
-----------------------------------------
I attached a zip (Webpack Bundle Analyzer.zip) with Webpack Bundle Analyzer that we have obtained in our last build.
Regards.
Gaspar
Attachment: Webpack_Bundle_Analyzer_391522c7.zip
Hi Gokul,
Thank you for your response. We look forward for the release of this new feature.
Regards
- 9 Replies
- 4 Participants
-
GB Gaspar Blein
- Feb 16, 2022 04:28 PM UTC
- Mar 17, 2022 02:19 AM UTC
