antd按需加载为什么仍然很大?

发布于 2022-09-11 17:51:08 字数 1707 浏览 34 评论 0

按照推荐的按需加载:

{
  "presets": [
    "env",
    "react",
    "stage-0"
  ],
  "plugins": [
    [
      "import", {
        "libraryName": "antd",
        "libraryDirectory": "es",
         "style": true
      }
    ]
  ]
}
    

引入input:

import {Input} from 'antd'

parcel后整个js有1.7M左右(未打包压缩,parcel xx --no-source-maps),react,react-dom已经提前分离出来,仅仅只引入了input组件,无其他组件,请问这样正常吗?为什么这么大?使用的是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"
  }
}

代码:

//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);

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

孤城病女 2022-09-18 17:51:09

你这样引的Input能正常使用?

请恋爱 2022-09-18 17:51:09

开发时候正常的

油焖大侠 2022-09-18 17:51:09

请问解决了吗? 我也是遇到

以可爱出名 2022-09-18 17:51:08

package,json文件看下

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文