problem description
antd package jsBundle is too large
the environmental background of the problems and what methods you have tried
the packaged antd has more than 600 KB, which is too large, and the webpack requirement is less than 244KB
.related codes
package.json file
{
"name": "react",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --progress --config webpack.config.js",
"start": "webpack-dev-server --config webpack.config.js --progress"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.2.2",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/preset-env": "^7.2.3",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.4",
"babel-minify-webpack-plugin": "^0.3.1",
"babel-plugin-import": "^1.11.0",
"clean-webpack-plugin": "^1.0.0",
"css-loader": "^2.1.0",
"file-loader": "^3.0.1",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.11.0",
"prop-types": "^15.6.2",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"url-loader": "^1.1.2",
"webpack": "^4.28.2",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.14"
},
"dependencies": {
"antd": "^3.12.3",
"axios": "^0.18.0",
"react": "^16.7.0",
"react-dom": "^16.7.0",
"react-router-dom": "^4.3.1"
}
}
webpack configuration file
"use strict";
const path = require ("path");
const HtmlPlugin = require (" html-webpack-plugin");
const CleanPlugin = require ("clean-webpack-plugin");
const MinifyJSPlugin = require ("babel-minify-webpack-plugin");
/ / restart is required after configuration modification
module.exports = {
//
entry: {
main: "./src/index.js"
},
//
output: {
path: path.resolve(__dirname, "./dist/"),
filename: "[name].js?hash=[hash]",
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
include: path.resolve(__dirname, "./src"),
exclude: path.resolve(__dirname, "./node_modules"),
use: {
loader: "babel-loader",
options: {
presets: ["@babel/env", "@babel/react"],
plugins: [
"@babel/plugin-syntax-dynamic-import",
["import", {
//antd
libraryName: "antd",
style: "css" // `style: true` less
}]
]
}
}
},
//SCSSantdcss
{
test: /\.(scss|css)$/,
exclude: /node_modules|antd\.css/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
modules: true
}
},
{
loader: "sass-loader"
}
]
},
//antdcss
{
test: /\.css$/,
include: /node_modules|antd\.css/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader"
}
]
},
//html
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: {
minimize: true,
removeComments: true,
collapseWhitespace: true
}
}
],
},
//
{
test: /\.(png|jpg|jpeg|gif)$/,
use: [
{
loader: "url-loader",
options: {
limit: 10000
}
},
{
loader: "image-webpack-loader",
options: {
//jpeg
mozjpeg: {
progressive: true,
quality: 65
},
//png
optipng: {
enabled: false,
},
pngquant: {
quality: "65-90",
speed: 4
},
//gif
gifsicle: {
interlaced: false,
},
// //JPGPNGwebp
// webp: {
// quality: 75
// }
}
}
]
},
//
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
use: [
{
loader: "url-loader",
options: {
limit: 10000
}
}
]
}
]
},
//
mode: "production",
//
devServer: {
contentBase: "./src",
port: 4000,
open: true,
proxy: {}
},
//
plugins: [
new HtmlPlugin({
template: "./src/index.html"
}),
new CleanPlugin("./dist"),
new MinifyJSPlugin({
removeConsole: true,
removeDebugger: true
}, {
comments: false
})
],
//
resolve: {
//import, js
extensions: [".jsx", ".json", ".js"],
},
//
optimization: {
splitChunks: {
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/](react|react-dom|react-router-dom|axios)/,
name: "vendors",
chunks: "all"
},
}
}
}
};
what result do you expect? What is the error message actually seen?
the packaged antd package is smaller than 244KB