如何减少索环中的 webpack 包大小?
How to reduce webpack bundle size in grommet?
我正在使用索环。我已经按照 getting started guide 进行了第一次申请。
为生产生成的 webpack 包是一个超过 1.7 MB 的 JavaScript 文件,我没有在入门示例中添加任何内容。
有没有一种方法可以减小此捆绑文件的大小或将其拆分为多个文件?
您可能正在像这样导入索环:
import Grommet from 'grommet';
或
var Grommet = require('grommet');
或
import { Box, Chart } from 'grommet/components';
这将加载整个 Grommet 库(包括 ~300 多个控件图标),然后将其过滤到您正在使用的任何内容。
您可以通过单独导入每个组件来改进它,如:
import Box from 'grommet/components/Box';
更新
我确定了两个储蓄来源。一个小的和索环直接相关,一个大的和供应商相关。
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
其他捆绑包大小没有变化。
我正在使用索环。我已经按照 getting started guide 进行了第一次申请。 为生产生成的 webpack 包是一个超过 1.7 MB 的 JavaScript 文件,我没有在入门示例中添加任何内容。
有没有一种方法可以减小此捆绑文件的大小或将其拆分为多个文件?
您可能正在像这样导入索环:
import Grommet from 'grommet';
或
var Grommet = require('grommet');
或
import { Box, Chart } from 'grommet/components';
这将加载整个 Grommet 库(包括 ~300 多个控件图标),然后将其过滤到您正在使用的任何内容。
您可以通过单独导入每个组件来改进它,如:
import Box from 'grommet/components/Box';
更新
我确定了两个储蓄来源。一个小的和索环直接相关,一个大的和供应商相关。
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
其他捆绑包大小没有变化。