2

I'm using Grommet. I've followed the getting started guide and made my first application. The webpack bundle generated for production is a single JavaScript file that exceeds 1.7 MB and I didn't add anything to the get started example.

Is there is a way to reduce this bundle file size or split it into more than one file?

Ahmed Abdelrahman
  • 778
  • 3
  • 12
  • 30

2 Answers2

3

Update

I identified two sources of savings. One small and directly related to Grommet, and one larger and related to vendor.

Savings
219Kb   Remove use of Card   (my only use of remark-parse and friends)
3.13MB  Remove use of webpack.optimize.CommonsChunkPlugin†

†webpack

// vendor: [ 'grommet'...]
// ...
// new webpack.optimize.CommonsChunkPlugin({
//   name: 'vendor',
//   children: true,
//   minChunks: 2,
//   async: true,
// }),

jsx

// import Card from 'grommet/components/Card'; ... <Card />
import Box from 'grommet/components/Box'; ... <Box />

====

Webpack 2.3.1 'vendor' appears to pull in everything. I had imported a few Grommet components sparingly into React.

Specifying vendor: [ 'grommet'...] in webpack config resulted in a bundle size of > 3MB.

vendor.c119b2da32ae94938692.js 3.15 MB 1 [emitted] [big] vendor

Removing grommet from that array resulted in a size of 429K.

vendor.0619a5794ef890b54543.js 429 kB 2 [emitted] [big] vendor

The other bundle sizes did not change.

Monte Hayward
  • 459
  • 2
  • 11
  • Thanks for this answer. I would be careful adding things to vendor if it pulls everything in that module. React does make sense to be inside vendor as you are probably using everything inside that module. I dont think this will be the case with Grommet or, for example, lodash. – Alan Souza Apr 09 '17 at 01:32
  • thanks for your help @AlanSouza. I updated with my solution, above. – Monte Hayward Apr 10 '17 at 18:58
  • Thanks Ahmed Hashem – Monte Hayward Jan 02 '19 at 18:36
0

You are probably importing Grommet like this:

import Grommet from 'grommet';

or 

var Grommet =  require('grommet');

or

import { Box, Chart } from 'grommet/components';

This will load the entire Grommet library (including the ~300+ control icons) and then filter it down to whatever you are using.

You can improve that by import each component separately, as in:

import Box from 'grommet/components/Box';
Alan Souza
  • 7,475
  • 10
  • 46
  • 68
  • hello @alan-souza, I'm using grommet as is after following , I didn't modify anything yet in the out-of-the-box grommet-todo app. The app already use the component importing you suggested rather than the Full Library importing. let me rephrase the question, Is there is any way to reduce or split the bundle into many files based on vendor for example or modules? Is it possible to override the grommet-toolbox's config. for webpack to divide the bundle into chunks? I imagine, for the enterprise scale grommet designed for, there would be an answer. because bundle size would grow massively. – Ahmed Abdelrahman Sep 16 '16 at 00:22
  • I wonder why you are getting that. I've just tried it locally, and I'm not getting 1.7mb. but 763kb. Are you running `gulp dist` ? To answer your other question, yes there is a way to create separate chunks. This is straight from webpack chunck config: https://webpack.github.io/docs/code-splitting.html – Alan Souza Sep 16 '16 at 02:36
  • great, I'll try the Webpack chunk config. and I think that would make an answer. you're right the 1.7mb with --skipMinify option, but 763kb minifyed version. – Ahmed Abdelrahman Sep 16 '16 at 11:42