在webpack项目中使用了第三方库？使用这些方法可以缩小bundle！
async
async是一组用于处理异步函数的实用程序。
通常，您应该使用async-es。它随ES模块一起提供，并且更适合webpack打包。
尽管如此，即使更喜欢使用async，对于优化列表，请参阅async-es部分。
async-es
async-es是一组用于处理异步函数的实用程序。它与async相同，但它更适合webpack打包。
使用babel-plugin-lodash删除未使用的方法
如果你使用async-es作为单个导入，你将整个库打包到应用程序中 —— 即使你只使用它的几个方法：
// 您只使用`async.map`，但整个库被打包import async from 'async-es';
async.map(['file1', 'file2', 'file3'], fs.stat, function(err, results) {
console.log(results);
});
使用async-es方法：
// 应用Babel之前import async from 'async-es';
async.map(['file1', 'file2', 'file3'], fs.stat, function(err, results) {
console.log(results);
});
↓
// 应用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是一个Babel的包，它加载了core-js和一个自定义的再生器运行时。
有关优化列表，请参阅core-js部分。
core-js
core-js是一套用于ES5和ES2015+的polyfill。
使用babel-preset-env删除不必要的polyfill
如果使用Babel和babel-preset-env编译代码，请添加
// .babelrc
{
"presets": [
[
"env",
{
"targets": {
"browsers": ["last 2 versions", "ie >= 11"]
}
}
]
]
}
启用useBuiltIns: true将删除Internet Explorer 11已支持的所有功能(例如Object.create，Object.keys等)的polyfill。
将非转换代码发送到现代浏览器
所有支持
date-fns
date-fns是一个日期实用程序库。
启用babel-plugin-date-fns
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是一个实用程序库。
启用babel-plugin-lodash
import _ from 'lodash';
_.map([1, 2, 3], i => i + 1);
↓
import _map from 'lodash/map';
_map([1, 2, 3], i => i + 1);
注意：该插件不适用于方法链 - 比如这样的代码不会被优化。
_([1, 2, 3]).map(i => i + 1).value();
为lodash-es别名为lodash
一些依赖项可能使用lodash。如果是这样的话，Lodash将打包两次。
为避免这种情况，请将lodash-es包别名为lodash：
// webpack.config.jsmodule.exports = {
resolve: {
alias: {
'lodash-es': 'lodash',
},
},
};
启用lodash-webpack-plugin
_.get()但不需要深层路径支持，则此插件可以删除它。将其添加到您的webpack配置中以使打包更小。
请谨慎使用该插件。 默认设置会删除许多功能，您的应用可能会使用其中一些功能。
lodash-es
lodash-es是Lodash的ES模块。
有关优化列表，请参阅lodash部分⤴。
moment
Moment.js是一个处理日期的库。
使用moment-locales-webpack-plugin删除未使用的语言
默认情况下，Moment.js附带160多KB压缩后的本地化文件。如果您的应用程序仅提供几种语言，则不需要所有这些文件。使用
请谨慎使用该插件。 默认设置删除所有区域设置；如果您使用其中一些，这可能会破坏您的应用。
react
React是一个用于构建用户界面的库。
删除生产中的propTypes声明
React不会在生产中执行propTypes检查，但propTypes声明仍然占用了bundle的一部分。 使用
迁移到另一个类似React的库
React的替代品具有类似的API，具有更小的尺寸或更高的性能，但缺少一些功能(例如，Fragments, 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)| 没有合成事件| 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的目标是100％使用相同的API(没有Fiber和Suspense)，详见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更高的运行时性能，是所有React替代品中性能最高的，提供了手动优化的可能性 部分合成事件| IE8原生不受支持
谨慎迁移到替代品。 一些替代品没有合成事件或缺少一些React 16功能(Preact issue, Inferno issue, Nerv issue)。 但是，许多项目仍然可以在没有任何代码库更改的情况下进行迁移。 请参阅迁移指南：Preact, Inferno, Nerv。
reactstrap
Reactstrap是基于Bootstrap 4的React库。
使用babel-plugin-transform-imports删除未使用的模块
从Reactstrap导入模块时：
import { Alert } from 'reactstrap';
其他Reactstrap模块也打包到应用程序中并使其更大。
// .babelrc
{
"plugins": [
["transform-imports", {
"reactstrap": {
"transform": "reactstrap/lib/${member}",
"preventFullImport": true
}
}]
]
}
要了解它是如何工作的，请查看babel-plugin-transform-imports部分。
react-bootstrap
react-bootstrap是基于React的Bootstrap 3库。
使用babel-plugin-transform-imports删除未使用的模块
从react-bootstrap导入模块时：
import { Alert } from 'react-bootstrap';
其他react-bootstrap模块也会打包到应用程序中并使其更大。
// .babelrc
{
"plugins": [
["transform-imports", {
"react-bootstrap": {
"transform": "react-bootstrap/es/${member}",
"preventFullImport": true
}
}]
]
}
要了解它是如何工作的，请查看babel-plugin-transform-imports部分
react-router
React Router是React的流行路由器解决方案。
使用babel-plugin-transform-imports删除未使用的模块
从React Router导入模块时：
import { withRouter } from 'react-router';
其他React Router模块也会打包到应用程序中并使其更大。
// .babelrc
{
"plugins": [
["transform-imports", {
"react-router": {
"transform": "react-router/${member}",
"preventFullImport": true
}
}]
]
}
(这是使用React Router v4测试的。)
要了解它是如何工作的，请查看babel-plugin-transform-imports部分。
styled-components
styled-components是一个CSS-in-JS库。
使用babel-plugin-styled-components压缩代码
styled-components编写的CSS代码。请参阅相关文档。
whatwg-fetch
whatwg-fetch是一个完整的window.fetch() polyfill。
替换为unfetch
unfetch是window.fetch()的500字节polyfill。与whatwg-fetch不同，它不支持完整的window.fetch() API，而是专注于polyfill最常用的部分。
谨慎迁移到unfetch。 虽然它支持最流行的API部分，但如果它依赖于不太常见的东西，您的应用可能会无法正常运行。
适用于多个库的解决方案
当然，也有其他库的优化技巧。你可以将它们与常识一起使用，以获得更小或更高性能的bundle包。
babel-plugin-transform-imports
这个方便的babel插件会将您的导入转换为仅导入特定组件，这可确保不会包含整个库。
// Beforeimport { Grid, Row, Col } from 'react-bootstrap';
// Afterimport Grid from 'react-bootstrap/lib/Grid';
import Row from 'react-bootstrap/lib/Row';
import Col from 'react-bootstrap/lib/Col';
