material-uiの容量が大きすぎますか？

Question

私は反応プロジェクトをバンドルするためにwebpackを使用しています。私のプロジェクトは、以下のコンポーネントの素材UIに依存します。

material-ui/Dialog 
material-ui/styles/getMuiTheme 
material-ui/styles/MuiThemeProvider 
material-ui/FlatButton 
material-ui/TextField 

webpack-bundle-size-analyzerレポートmaterial-uiのサイズは1.07MBです。以下は私のWebPACKの設定ファイルである：私はすでに私のバンドルファイルを最適化するためにCompressionPlugin、UglifyJsPluginを使用しようとしましたが、それはまだ1メガバイト以上かかる

const webpack = require('webpack'); 
const path = require('path'); 
const NpmInstallPlugin = require('npm-install-webpack-plugin'); 
const WebpackShellPlugin = require('webpack-shell-plugin'); 
var CompressionPlugin = require("compression-webpack-plugin"); 

const PATHS = { 
    react: path.join(__dirname, 'node_modules', 'react', 'dist', 'react.min.js'), 
    app: path.join(__dirname, 'src'), 
    build: path.join(__dirname, './dist') 
}; 

module.exports = { 
    entry: { 
    app: './app/index.jsx', 
    android: './app/utils/platform_android.js', 
    ios: './app/utils/platform_ios.js', 
    web: './app/utils/platform_web.js', 
    vendor: [ 
     'axios', 
     'react', 
     'react-dom', 
     'react-redux', 
     'react-router', 
     'react-router-redux', 
     'redux', 
     'redux-thunk', 
     'react-alert', 
     'sha1', 
     'moment', 
     'nuka-carousel', 
     'react-cookie', 
     'material-ui', 
     'react-spinkit', 
     'react-tap-event-plugin', 
     'react-tappable', 
     'history', 
    ], 
    }, 
    output: { 
    path: PATHS.build, 
    filename: '[name].bundle.js', 
    }, 
    watch: false, 
    devtool: 'source-map', 
    relativeUrls: true, 
    resolve: { 
    extensions: ['', '.js', '.jsx', '.css', '.less'], 
    modulesDirectories: ['node_modules'], 
    alias: { 
     normalize_css: __dirname + '/node_modules/normalize.css/normalize.css', 
    } 
    }, 
    module: { 
    preLoaders: [ 

     { 
     test: /\.js$/, 
     loader: "source-map-loader" 
     }, 
     // { 
     // test: /\.js$/, 
     // exclude: /node_modules/, 
     // loader: 'jshint-loader' 

     // } 
    ], 
    loaders: [ 

     { 
     test: /\.html$/, 
     loader: 'file?name=[name].[ext]', 
     }, 
     { 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loader: 'babel-loader?presets=es2015', 
     }, 
     { 
     test: /\.less$/, 
     loader: "style!css!less", 
     }, 
     {test: /\.css$/, loader: 'style-loader!css-loader'}, 
     {test: /\.png$/, loader: "url-loader?limit=100000"}, 
     // {test: /\.(jpe?g|png|gif|svg)$/i, loader: "file-loader?name=/public/icons/[path]/[name].[ext]"}, 
     { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loaders: ['babel-loader?presets=es2015'] 
     }, 
     { 
     test: /\.svg$/, 
     loader: 'svg-sprite', 
     include: /public\/icons/ 
     } 
    ] 
    }, 
    plugins: [ 
    new webpack.optimize.UglifyJsPlugin({ 
     compress: { 
     warnings: false, 
     }, 
     output: { 
     comments: false, 
     }, 
     minimize: true 
    }), 
    new NpmInstallPlugin({ 
     save: true // --save 
    }), 
    new webpack.DefinePlugin({ 
     "process.env": { 
     NODE_ENV: JSON.stringify("production") 
     } 
    }), 
    new WebpackShellPlugin({ 
     onBuildStart: ['echo "Webpack Start"'], 
     onBuildEnd: [ 
     'cp ./dist/*.js ../assets/dist/;rm -fr dist/web;' + 
     'mkdir -p dist/web/dist;cp ./dist/*.js ./dist/web/dist/;cp ./index.html ./dist/web/;cp -r public dist/web/', 
     ] 
    }), 
    new CompressionPlugin({ 
     asset: "[path].gz[query]", 
     algorithm: "gzip", 
     test: /\.js$|\.html$/, 
     threshold: 10240, 
     minRatio: 0.8 
    }), 
    new webpack.optimize.CommonsChunkPlugin(/* chunkName= */["vendor"], /* filename= */"[name].bundle.js", Infinity), 
    ], 
    devServer: { 
    colors: true, 
    contentBase: __dirname, 
    historyApiFallback: true, 
    hot: true, 
    inline: true, 
    port: 9093, 
    progress: true, 
    stats: { 
     cached: false 
    } 
    } 
} 

。どのようにサイズを小さくすることができますか？私のアプリはモバイルデバイス上でwebview上で動作しているのでgzipを使用したくないし、gzipエンコーディングをサポートしていないものもある。

Answer 1

あなたのサイズを減らすために行うことができ、物事のカップルがあります：

1. は全体のライブラリー
2. がMinifyify
を使用してみてください、あなただけ material-uiから必要なコンポーネントで必要とされていることを確認していないしてください
3. this GitHub号でさらに提案を見る。

Answer 2

最後に、私は問題を理解しました。私のwebpack設定ファイルでは、すべてのベンダjsを別のjsバンドルファイルに分けています。そして、私はそこに 'material-ui'を掲載しました。私のアプリをパッケージ化すると、 'material-ui'ライブラリ全体がvendor.jsにパッケージ化されます。私はベンダーリストからmaterial-uiを削除する必要があります。このようにして、ソースコードで必要なコンポーネントだけがパッケージ化されます。