javascript - How to reduce webpack bundle size in grommet?

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

更新

我确定了两个储蓄来源。一个较小且与 Grommet 直接相关，一个较大且与供应商有关。

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' 似乎吸收了一切。我已经谨慎地将一些 Grommet 组件导入到 React 中。

在 webpack 配置中指定vendor: [ 'grommet'...]会导致包大小 > 3MB。

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

从该阵列中移除索环导致大小为 429K。

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

其他捆绑包大小没有改变。

Answer 2

您可能正在像这样导入 Grommet：

import Grommet from 'grommet';

或者

var Grommet =  require('grommet');

或者

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

这将加载整个 Grommet 库（包括约 300 多个控制图标），然后将其过滤为您正在使用的任何内容。

您可以通过单独导入每个组件来改进它，如下所示：

import Box from 'grommet/components/Box';