如何减少索环中的webpack捆绑包大小？

Question

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?

Answer 1

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.

Answer 2

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';