问题描述

antd打包jsBundle过大

问题出现的环境背景及自己尝试过哪些方法

打包出来antd有600多KB，太大了，webpack要求小于244KB

相关代码

package.json文件
{
"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配置文件
"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");

//修改配置后需要重启
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 文件
                        }]
                    ]
                }
            }
        },

        //SCSS支持模块化加载，本地开发时使用，antd不可以使用模块化css
        {
            test: /\.(scss|css)$/,
            exclude: /node_modules|antd\.css/,
            use: [
                {
                    loader: "style-loader"
                },
                {
                    loader: "css-loader",
                    options: {
                        modules: true
                    }
                },
                {
                    loader: "sass-loader"
                }
            ]
        },


        //针对antd不启用模块化css
        {
            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,
                        },
                        // //将JPG和PNG转换为webp
                        // 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'
            },
        }
    }
}

};

你期待的结果是什么？实际看到的错误信息又是什么？

打包出来的antd包小于244KB