react 打包体积过大_【React】webpack+antd打包后文件体积过大(16.4M),如何优化

本文探讨了在React项目中遇到webpack打包体积过大的问题,分析了可能的原因,并提出了一系列优化措施,包括按需引入antd、删除sourceMap、启用UglifyJsPlugin进行压缩、配置CommonsChunkPlugin提取公共模块、以及考虑按需加载。通过这些方法,可以在生产环境中显著减小打包后的文件体积。
摘要由CSDN通过智能技术生成

请输入代码项目是react全站的单页应用,主要的库是antd+自己写的scss和一些表单,cookie等处理逻辑,.jsx大概有15个左右.用webpack构建的,在开发环境用的webpack-dev-server启动的,webpack.config.js如下图:'”use strict”;

let webpack = require('webpack');

let path = require('path');

// let HtmlWebpackPlugin = require('html-webpack-plugin');

// let ExtractTextPlugin = require("extract-text-webpack-plugin");

const WebpackBrowserPlugin = require('webpack-browser-plugin');

module.exports = {

devtool: 'cheap-eval-source-map',

devServer: {

hot: true,

inline: true,

contentBase: "./src",

proxy: {

'/sms-web/*': {

target: 'http://localhost:9099',

changeOrigin: true,

secure: false

}

}

},

//

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值