[英]How to reduce webpack bundle size in grommet?
我正在使用Grommet。 我遵循了入門指南,並做了我的第一個應用程序。 用於生產的webpack捆綁包是一個超過1.7 MB的JavaScript文件,我沒有在入門示例中添加任何內容。
有沒有辦法減小捆綁文件的大小或將其拆分成多個文件?
我確定了兩種儲蓄來源。 一小部分與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的“供應商”似乎可以吸收一切。 我已經少量地將一些Grommet組件導入了React。
在webpack配置中指定vendor: [ 'grommet'...]
grommet vendor: [ 'grommet'...]
導致捆綁包大小> 3MB。
vendor.c119b2da32ae94938692.js 3.15 MB 1 [emitted] [big] vendor
從該陣列中刪除索環導致大小為429K。
vendor.0619a5794ef890b54543.js 429 kB 2 [emitted] [big] vendor
其他捆綁包的大小沒有變化。
您可能是這樣導入Grommet的:
import Grommet from 'grommet';
要么
var Grommet = require('grommet');
要么
import { Box, Chart } from 'grommet/components';
這將加載整個Grommet庫(包括約300多個控件圖標),然后將其篩選為所使用的內容。
您可以通過分別導入每個組件來改進它,如下所示:
import Box from 'grommet/components/Box';
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.