本文翻譯自GoogleChromeLabs

在webpack項(xiàng)目中使用了第三方庫(kù)？使用這些方法可以縮小bundle织咧！

async

async是一組用于處理異步函數(shù)的實(shí)用程序。

通常，您應(yīng)該使用async-es迁霎。它隨ES模塊一起提供，并且更適合webpack打包百宇。

盡管如此考廉，即使更喜歡使用async，對(duì)于優(yōu)化列表携御，請(qǐng)參閱async-es部分昌粤。

async-es

async-es是一組用于處理異步函數(shù)的實(shí)用程序。它與async相同啄刹，但它更適合webpack打包涮坐。

使用babel-plugin-lodash刪除未使用的方法

如果你使用async-es作為單個(gè)導(dǎo)入，你將整個(gè)庫(kù)打包到應(yīng)用程序中 —— 即使你只使用它的幾個(gè)方法：

// 您只使用`async.map`誓军，但整個(gè)庫(kù)被打包
import async from 'async-es';

async.map(['file1', 'file2', 'file3'], fs.stat, function(err, results) {
  console.log(results);
});

使用babel-plugin-lodash只選擇你需要的async-es方法：

// 應(yīng)用Babel之前
import async from 'async-es';

async.map(['file1', 'file2', 'file3'], fs.stat, function(err, results) {
  console.log(results);
});

↓

// 應(yīng)用Babel之后
import _map from 'async-es/map';

_map(['file1', 'file2', 'file3'], fs.stat, function(err, results) {
  console.log(results);
});

啟用此插件袱讹，如下所示：

// .babelrc
{
  "plugins": [["lodash", { "id": ["async-es"] }]],
}

babel-polyfill

babel-polyfill是一個(gè)Babel的包，它加載了core-js和一個(gè)自定義的再生器運(yùn)行時(shí)昵时。

有關(guān)優(yōu)化列表捷雕，請(qǐng)參閱core-js部分。

core-js

core-js是一套用于ES5和ES2015+的polyfill壹甥。

使用babel-preset-env刪除不必要的polyfill

如果使用Babel和babel-preset-env編譯代碼救巷，請(qǐng)?zhí)砑?a target="_blank">useBuiltIns: true選項(xiàng)。此選項(xiàng)將Babel配置為僅包含目標(biāo)瀏覽器所必需的polyfill句柠。例如浦译，如果您將應(yīng)用程序定位為支持Internet Explorer 11：

// .babelrc
{
  "presets": [
    [
      "env",
      {
        "targets": {
          "browsers": ["last 2 versions", "ie >= 11"]
        }
      }
    ]
  ]
}

啟用useBuiltIns: true將刪除Internet Explorer 11已支持的所有功能（例如Object.create，Object.keys等）的polyfill俄占。

將非轉(zhuǎn)換代碼發(fā)送到現(xiàn)代瀏覽器

所有支持<script type ="module">的瀏覽器也支持現(xiàn)代JS功能管怠，如async/await淆衷，箭頭函數(shù)和類(lèi)缸榄。使用此功能構(gòu)建bundle的兩個(gè)版本，并使現(xiàn)代瀏覽器僅加載現(xiàn)代代碼祝拯。有關(guān)指南甚带，請(qǐng)參閱Philip Walton的文章。

date-fns

date-fns是一個(gè)日期實(shí)用程序庫(kù)佳头。

啟用babel-plugin-date-fns

babel-plugin-date-fns使用特定日期函數(shù)函數(shù)的導(dǎo)入替換date-fns的完整導(dǎo)入：

import { format } from 'date-fns';
format(new Date(2014, 1, 11), 'MM/DD/YYYY');

↓

import _format from 'date-fns/format';
_format(new Date(2014, 1, 11), 'MM/DD/YYYY');

lodash

Lodash是一個(gè)實(shí)用程序庫(kù)鹰贵。

啟用babel-plugin-lodash

babel-plugin-lodash通過(guò)導(dǎo)入特定的Lodash功能取代了完整的Lodash導(dǎo)入：

import _ from 'lodash';
_.map([1, 2, 3], i => i + 1);

↓

import _map from 'lodash/map';
_map([1, 2, 3], i => i + 1);

注意：該插件不適用于方法鏈 - 比如這樣的代碼不會(huì)被優(yōu)化。

_([1, 2, 3]).map(i => i + 1).value();

為lodash-es別名為lodash

一些依賴(lài)項(xiàng)可能使用lodash-es而不是lodash康嘉。如果是這樣的話(huà)碉输，Lodash將打包兩次。

為避免這種情況亭珍，請(qǐng)將lodash-es包別名為lodash：

// webpack.config.js
module.exports = {
  resolve: {
    alias: {
      'lodash-es': 'lodash',
    },
  },
};

啟用lodash-webpack-plugin

lodash-webpack-plugin剝離了你不需要的Lodash功能部分敷钾。例如枝哄，如果您使用_.get()但不需要深層路徑支持，則此插件可以刪除它阻荒。將其添加到您的webpack配置中以使打包更小挠锥。

請(qǐng)謹(jǐn)慎使用該插件。 默認(rèn)設(shè)置會(huì)刪除許多功能侨赡，您的應(yīng)用可能會(huì)使用其中一些功能蓖租。

lodash-es

lodash-es是Lodash的ES模塊。

有關(guān)優(yōu)化列表羊壹，請(qǐng)參閱lodash部分?蓖宦。

moment

Moment.js是一個(gè)處理日期的庫(kù)。

使用moment-locales-webpack-plugin刪除未使用的語(yǔ)言

默認(rèn)情況下油猫，Moment.js附帶160多KB壓縮后的本地化文件球昨。如果您的應(yīng)用程序僅提供幾種語(yǔ)言，則不需要所有這些文件眨攘。使用moment-locales-webpack-plugin刪除未使用的語(yǔ)言主慰。

請(qǐng)謹(jǐn)慎使用該插件。 默認(rèn)設(shè)置刪除所有區(qū)域設(shè)置鲫售；如果您使用其中一些共螺，這可能會(huì)破壞您的應(yīng)用。

react

React是一個(gè)用于構(gòu)建用戶(hù)界面的庫(kù)情竹。

刪除生產(chǎn)中的propTypes聲明

React不會(huì)在生產(chǎn)中執(zhí)行propTypes檢查藐不，但propTypes聲明仍然占用了bundle的一部分。 使用babel-plugin-transform-react-remove-prop-types從構(gòu)建過(guò)程中刪除它們秦效。

遷移到另一個(gè)類(lèi)似React的庫(kù)

React的替代品具有類(lèi)似的API雏蛮，具有更小的尺寸或更高的性能，但缺少一些功能（例如阱州，F(xiàn)ragments, Portals或合成事件）挑秉。

• Preact | 最小的React替代方案（preact@8.3.1 + preact-compat@3.18.3 7.6 kB gzipped; react@16.4.0 + react-dom@16.4.0 31.4 kB gzipped）| 沒(méi)有合成事件| IE8支持polyfill

• Nerv | 比React小，比Preact大（nervjs@1.3.3 9.8 kB gzipped苔货，不需要compat; react@16.4.0 + react-dom@16.4.0 31.4 kB gzipped）| Nerv的目標(biāo)是100％使用相同的API（沒(méi)有Fiber和Suspense）犀概，詳見(jiàn)NervJS/nerv＃10 | IE8支持

• Inferno | 比React小，大于Preact和Nerv（inferno@5.4.2 + inferno-compat@5.4.2 11.3 kB gzipped; react@16.4.0 + react-dom@16.4.0 31.4 kB gzipped）| 比React更高的運(yùn)行時(shí)性能夜惭，是所有React替代品中性能最高的姻灶，提供了手動(dòng)優(yōu)化的可能性 部分合成事件| IE8原生不受支持

謹(jǐn)慎遷移到替代品。 一些替代品沒(méi)有合成事件或缺少一些React 16功能（Preact issue, Inferno issue, Nerv issue）诈茧。 但是产喉，許多項(xiàng)目仍然可以在沒(méi)有任何代碼庫(kù)更改的情況下進(jìn)行遷移。 請(qǐng)參閱遷移指南：Preact, Inferno, Nerv。

reactstrap

Reactstrap是基于Bootstrap 4的React庫(kù)曾沈。

使用babel-plugin-transform-imports刪除未使用的模塊

從Reactstrap導(dǎo)入模塊時(shí)：

import { Alert } from 'reactstrap';

其他Reactstrap模塊也打包到應(yīng)用程序中并使其更大尘颓。

使用babel-plugin-transform-imports去除未使用的模塊：

// .babelrc
{
  "plugins": [
    ["transform-imports", {
      "reactstrap": {
        "transform": "reactstrap/lib/${member}",
        "preventFullImport": true
      }
    }]
  ]
}

要了解它是如何工作的，請(qǐng)查看babel-plugin-transform-imports部分晦譬。

react-bootstrap

react-bootstrap是基于React的Bootstrap 3庫(kù)疤苹。

使用babel-plugin-transform-imports刪除未使用的模塊

從react-bootstrap導(dǎo)入模塊時(shí)：

import { Alert } from 'react-bootstrap';

其他react-bootstrap模塊也會(huì)打包到應(yīng)用程序中并使其更大。

使用babel-plugin-transform-imports去除未使用的模塊：

// .babelrc
{
  "plugins": [
    ["transform-imports", {
      "react-bootstrap": {
        "transform": "react-bootstrap/es/${member}",
        "preventFullImport": true
      }
    }]
  ]
}

要了解它是如何工作的敛腌，請(qǐng)查看babel-plugin-transform-imports部分

react-router

React Router是React的流行路由器解決方案卧土。

使用babel-plugin-transform-imports刪除未使用的模塊

從React Router導(dǎo)入模塊時(shí)：

import { withRouter } from 'react-router';

其他React Router模塊也會(huì)打包到應(yīng)用程序中并使其更大。

使用babel-plugin-transform-imports去除未使用的模塊：

// .babelrc
{
  "plugins": [
    ["transform-imports", {
      "react-router": {
        "transform": "react-router/${member}",
        "preventFullImport": true
      }
    }]
  ]
}

（這是使用React Router v4測(cè)試的像樊。）

要了解它是如何工作的尤莺，請(qǐng)查看babel-plugin-transform-imports部分。

styled-components

styled-components是一個(gè)CSS-in-JS庫(kù)生棍。

使用babel-plugin-styled-components壓縮代碼

babel-plugin-styled-components插件可以壓縮用styled-components編寫(xiě)的CSS代碼颤霎。請(qǐng)參閱相關(guān)文檔。

whatwg-fetch

whatwg-fetch是一個(gè)完整的window.fetch() polyfill涂滴。

替換為unfetch

unfetch是window.fetch()的500字節(jié)polyfill友酱。與whatwg-fetch不同，它不支持完整的window.fetch() API柔纵，而是專(zhuān)注于polyfill最常用的部分缔杉。

謹(jǐn)慎遷移到unfetch。 雖然它支持最流行的API部分搁料，但如果它依賴(lài)于不太常見(jiàn)的東西或详，您的應(yīng)用可能會(huì)無(wú)法正常運(yùn)行。

適用于多個(gè)庫(kù)的解決方案

當(dāng)然郭计，也有其他庫(kù)的優(yōu)化技巧霸琴。你可以將它們與常識(shí)一起使用，以獲得更小或更高性能的bundle包昭伸。

babel-plugin-transform-imports

這個(gè)方便的babel插件會(huì)將您的導(dǎo)入轉(zhuǎn)換為僅導(dǎo)入特定組件梧乘，這可確保不會(huì)包含整個(gè)庫(kù)。

// Before
import { Grid, Row, Col } from 'react-bootstrap';
// After
import Grid from 'react-bootstrap/lib/Grid';
import Row from 'react-bootstrap/lib/Row';
import Col from 'react-bootstrap/lib/Col';