打包antd太大
index.js
import { Button } from 'antd';
export default function () {
return <Button>按钮</Button>;
}
webpack.config.js
module.exports = {
mode: 'production',
entry: './index.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: '[name].[hash].js',
publicPath: '/',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader',
},
{
test: /\.(css|scss)$/,
use: [
'css-loader',
'postcss-loader',
'sass-loader',
],
},
]
},
plugins: [
new AntdDayjsWebpackPlugin(),
new BundleAnalyzerPlugin({ analyzerMode: 'static' }),
],
}
babel配置:
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": [
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-transform-runtime",
[
"babel-plugin-import",
{
"libraryName": "antd",
"libraryDirectory": "es",
"camel2DashComponentName": false,
"style": "css"
}
],
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties", { "loose": true }],
"dva-hmr"
]
只用一个组件,打包出来的东西很大,700多k,求解
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论