load on demand as recommended:
{
"presets": [
"env",
"react",
"stage-0"
],
"plugins": [
[
"import", {
"libraryName": "antd",
"libraryDirectory": "es",
"style": true
}
]
]
}
introduce input:
import {Input} from "antd"
after parcel, the whole js is about 1.7m (unpackaged compression, parcel xx-- no-source-maps). React,react-dom has been separated in advance. Only input components have been introduced, but no other components. Is this normal? Why is it so big? Using parcel.
package.json:
{
"name": "parcel",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "parcel watch index.html --no-source-maps",
"build": "parcel build index.html"
},
"author": "",
"license": "",
"devDependencies": {
"autoprefixer": "^9.4.2",
"babel-core": "^6.26.3",
"babel-plugin-import": "^1.11.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"less": "^2.7.3"
},
"dependencies": {
"antd": "^3.13.2",
"react": "^16.6.3",
"react-dom": "^16.6.3"
}
}
Code:
//import React from "react"; umd
//import ReactDOM from "react-dom";umd
import "./index.less"
import {Input}from "antd";
class App extends React.Component {
render() {
return (
<div>
<div className="p">Home</div>
<div>About</div>
<Input/>
</div>
)
}
}
var app = document.getElementById("app")
ReactDOM.render(<App/>,app);