Webpack+react+antDesign打包后文件过大

#1

我用webpack+react打包的文件有2.5MB,请求大家指点迷经
antDesign 是按需引入的
webpack.config.js文件如下:


'use strict';
var webpack = require('webpack');
var path = require("path");
module.exports = {
    devtool: false,
	entry: {
		'ime': [
			path.join(__dirname,'src/app/admin/index.js')
		],
        bundle: 'app',
        vendor: ['react']
	},
	output:{
		path: path.join(__dirname, 'dist'),
		filename:'[name].js',
	},
	resolve: {
		alias: {
			'action': path.join(__dirname, 'src/app/admin/action/index.js'),
			'reducer': path.join(__dirname, 'src/app/admin/reducer/index.js'),
			'store': path.join(__dirname, 'src/app/admin/store/index.js'),
			'view': path.join(__dirname, 'src/app/admin/view/index.js'),
			'comp': path.join(__dirname, 'src/component/index.js'),
			'util': path.join(__dirname, 'src/util/index.js'),
			'method': path.join(__dirname, 'src/app/admin/method/index.js'),
			'ime-react': path.join(__dirname, 'src/ime-react/index.js'),
		},
	},
	module: {
		loaders: [
			{
				test: /\.less$/,
				loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!less?outputStyle=expanded&sourceMap'
			},
			{
				test: /\.css$/,
				loader: 'style-loader!css-loader'
			},
			{
				test: /\.js$/,
				loader: 'babel',
				exclude: /node_modules/,
			},
			{
				test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
				loader: 'url-loader?limit=50000&name=[path][name].[ext]'
			}
		]
	},
	externals:{
		'$':true
	},
	plugins:[
        new webpack.optimize.UglifyJsPlugin({
            compress:{
                warnings: false,
                drop_debugger: true,
                drop_console: false
            }
        }),
        new webpack.optimize.CommonsChunkPlugin('vendor',  'vendor.js'),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('production')
        })
	]
};

package.json内容如下:


{
  "name": "XXX",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev-rel": "node ./build/dev-release.js",
    "dev-run": "node ./build/dev-compilation.js",
    "start":"node dev-server.js"
  },
  "author": "XXX",
  "license": "ISC",
  "dependencies": {
    "ajax": "0.0.4",
    "antd": "^2.9.3",
    "draft-js-hashtag-plugin": "^2.0.0-beta1",
    "draft-js-linkify-plugin": "^2.0.0-beta1",
    "draft-js-plugins-editor": "^2.0.0-beta1",
    "jquery": "^3.1.0",
    "lodash": "^4.15.0",
    "moment": "^2.15.1",
    "radium": "^0.18.1",
    "react": "^15.3.1",
    "react-dom": "^15.3.1",
    "react-motion": "^0.4.4",
    "react-redux": "^4.4.5",
    "react-router": "^2.8.1",
    "redux": "^3.5.2",
    "redux-react-router": "^1.0.0-beta3",
    "redux-router": "^2.1.2",
    "redux-thunk": "^2.1.0"
  },
  "devDependencies": {
    "autoprefixer-loader": "^3.2.0",
    "babel-core": "^6.14.0",
    "babel-loader": "^6.2.5",
    "babel-plugin-react-transform": "^2.0.2",
    "babel-plugin-transform-class-properties": "^6.11.5",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2015": "^6.14.0",
    "babel-preset-react": "^6.11.1",
    "babel-preset-stage-0": "^6.5.0",
    "babel-preset-stage-1": "^6.13.0",
    "browser-sync": "^2.15.0",
    "css-loader": "^0.24.0",
    "ejs": "^2.5.1",
    "express": "^4.14.0",
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.0",
    "gulp-rename": "^1.2.2",
    "gulp-rev": "^7.1.2",
    "gulp-rev-collector": "^1.0.5",
    "gulp-sequence": "^0.4.6",
    "gulp-uglify": "^2.0.0",
    "gulp-webpack": "^1.5.0",
    "html-webpack-plugin": "^2.22.0",
    "less": "^2.7.1",
    "less-loader": "^2.2.3",
    "npmlog": "^4.0.0",
    "react-transform-catch-errors": "^1.0.2",
    "redbox-react": "^1.3.0",
    "require-dir": "^0.3.0",
    "rimraf": "^2.5.4",
    "style-loader": "^0.13.1",
    "underscore-template-loader": "^0.7.3",
    "url-loader": "^0.5.8",
    "webpack": "^1.13.2",
    "webpack-dev-middleware": "^1.8.1",
    "webpack-hot-middleware": "^2.12.2",
    "crypto-js":"^3.1.8",
    "async": "^2.3.0"
  }
}

不过还有个开发调试的dev-server.js,开发中,包能有17M,这个只在开发模式
#!/usr/bin/env node

var path = require('path');
var express = require('express');
var webpack = require('webpack');
var webpackConfig = require('./webpack.config.js');
var HtmlWebpackPlugin = require('html-webpack-plugin');

var config = require('./config.js');

// 添加开发服务器配置
for(var entryKey in webpackConfig.entry){
  webpackConfig.entry[entryKey].push('webpack-hot-middleware/client?reload=true&clean=true');
}
//webpackConfig.output.publicPath = '/dist/';
webpackConfig.plugins.push(
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new HtmlWebpackPlugin({
      "filename": 'index.html',
      "template": 'index.html',
      "commonjs": '',
      "inject": true,
      "chunks": ['ime'],
      "hash": true
    })
);
webpackConfig.devtool = 'cheap-module-eval-source-map';


var app = express();
var compiler = webpack(webpackConfig);

app.use(require('webpack-dev-middleware')(compiler, {
  noInfo: true,
  publicPath: webpackConfig.output.publicPath
}));

app.use(require('webpack-hot-middleware')(compiler));

app.use('/resource', express.static('src/resource'));

app.get('*', function(req, res) {
  res.sendFile(path.join(__dirname, 'index.html'));
});

app.listen(config.port, function(err) {
  if (err) {
    console.log(err);
    return;
  }

  console.log('Listening at http://localhost:'+config.port);
});

请求大家帮忙指点下迷津,我也是优化了一上午都没优化成功
在网上参考了很多优化方案,但是都没达到预期目的(压缩包一点都没变小,还是2.5M)

#2

分隔代码,按需引入,服务端渲染

#3

刚开始我也瞎子摸黑,网上教程太散乱。
目前已经配置好了大部分,可以clone下看看。


打包,压缩,分离,开发和构建等,配置文件也清晰,热加载调试。

#5

额,你有没有看antd的get started文档。
按需加载

#6

我是按需加载的哦
import { Progress,List,WhiteSpace,WingBlank,Button,Modal,Popup } from 'antd-mobile';

#7

看了你的package的包,打包之后有2.5M我觉得非常惊讶,antd能占那么大吗?

#8

把一些代码不会变的工具包单独写一个webpack脚本打包吧,通过mainfest.json引入。