如何减少索环中的 webpack 包大小？答案

【问题标题】：How to reduce webpack bundle size in grommet?如何减少索环中的 webpack 包大小？
【发布时间】：2016-09-15 19:05:36
【问题描述】：

我正在使用索环。我已经关注getting started guide 并提出了我的第一个申请。为生产生成的 webpack 包是一个超过 1.7 MB 的 JavaScript 文件，我没有在入门示例中添加任何内容。

有没有办法减少这个捆绑文件的大小或将其拆分为多个文件？

【问题讨论】：

标签： javascript reactjs webpack bundling-and-minification grommet

【解决方案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' 似乎包含了所有内容。我在 React 中导入了一些 Grommet 组件。

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

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

从该阵列中移除垫圈导致大小为 429K。

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

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

【讨论】：

感谢您的回答。如果它会拉取该模块中的所有内容，我会小心地向供应商添加东西。 React 在供应商内部确实有意义，因为您可能正在使用该模块中的所有内容。我认为 Grommet 或 lodash 不会出现这种情况。
感谢您的帮助@AlanSouza。我更新了上面的解决方案。
谢谢艾哈迈德哈希姆

【解决方案2】：

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

import Grommet from 'grommet';

或

var Grommet =  require('grommet');

或

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

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

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

import Box from 'grommet/components/Box';

【讨论】：

你好@alan-souza，我在关注之后按原样使用索环，我还没有在开箱即用的索环应用程序中修改任何内容。该应用程序已使用您建议的组件导入，而不是完整库导入。让我换个问题，有没有办法根据供应商或模块将捆绑包减少或拆分成许多文件？是否可以覆盖索环工具箱的配置。让 webpack 将包分成块？我想，对于专为企业规模设计的索环，会有一个答案。因为捆绑包的大小会大幅增长。
我想知道你为什么会这样。我刚刚在本地尝试过，但我没有得到 1.7mb。但是763kb。你在运行gulp dist 吗？要回答您的另一个问题，是的，有一种方法可以创建单独的块。这直接来自 webpack 块配置：webpack.github.io/docs/code-splitting.html
太好了，我会试试 Webpack 块配置。我认为这将是一个答案。你是对的 1.7mb 与 --skipMinify 选项，但 763kb 缩小版本。