javascript - 我们可以缩短 Material-ui 组件的导入时间吗？

Question

有没有一种方法可以将所有这些导入快捷地整合到一起？

我是 React 新手，但我总是注意到所有内容都必须导入，尤其是使用 CSS 组件。

你能给我一个如何缩短这个的想法吗？

import { withStyles } from '@material-ui/core/styles';
import PropTypes from 'prop-types';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import IconButton from '@material-ui/core/IconButton';
import Fab from '@material-ui/core/Fab';
import NavigationIcon from '@material-ui/icons/Navigation';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
import AccountCircle from '@material-ui/icons/AccountCircle';
import InputAdornment from '@material-ui/core/InputAdornment';

Answer 1

您可以使用material-ui top-level-imports 将现有代码库转换为此选项代码修改

Converts all @material-ui/core submodule imports to the root module

安装

npm install -D @material-ui/codemod

脚本

find src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/lib/v4.0.0/top-level-imports.js

结果

import {
  Button,
  Dialog,
  ...
} from '@material-ui/core';

<小时/>

引用文档minimizing-bundle-size