Open hannadrehman opened 6 years ago
I notice the same thing too:
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _input = require('antd/lib/input');
var _input2 = _interopRequireDefault(_input);
var _select = require('antd/lib/select');
var _select2 = _interopRequireDefault(_select);
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _recompose = require('recompose');
var _reactRedux = require('react-redux');
var _antd = require('antd'); // whaaaaa???
I'm using these:
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-plugin-import": "^1.9.1",
["import", { "libraryName": "antd", "libraryDirectory": "lib" }, "ant"],
Guys,
Can this be causing
You are using a whole package of antd, please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size.
message in my console all the time ?
@pkrefta I had same issue, and the root case was in:
import { Button } from 'antd/lib/index'
, replacing it with
import { Button } from 'antd'
fixes the issue.
i have same problem!!! who can resolve it !!!!!!!!!!!!
hi. i am using
lerna
monorepo setup for my project. where we can have multiple react projects in the same repo. which enables us to achieve maximum code re-use and shared components.one of the requirements in to have an abstract layer on top of all libraries which in this case is
antd
components. we are making wrapper components over usedantd
components to have some default config for them and also to make our app library agnostic. (incase we want to remove antd components and use some other lib it will be painless with this approach`so we have created a packages called
elements
which lives outside react project. so we have to manually transpile them with babel. and i also usebabel-plugin-import
for obvious reasons.with that i noticed that our bundle size was going 1.2MB and did some digging and found all
es
modules are being transpiled even after using this plugin. and no console warning also for it.i checked and saw that transpiled files have an extra
require('antd')
which i suppose is getting the entire library and adding to the bundle.here is the code
es6 modules
transpiled es5 module
i have marked the code above.
is this the expected behavour of this plugin or its a bug or my config is doing this. ??
here is my
.babelrc
for this package.is use
@babel/cli 7.0.0
to transpile the modules. with this commandignore the HMR code it is not removed yet. but surely will be when building for production