2016-08-19 57 views
3

私は反応プロジェクトをバンドルするためにwebpackを使用しています。私のプロジェクトは、以下のコンポーネントの素材UIに依存します。material-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エンコーディングをサポートしていないものもある。

+0

どのように解決しましたか?私は大量のuiコンポーネントを使用するアプリケーションに取り組んでいます。そして、別のバンドルでmaterial-uiをpacakingした後、サイズ縮小(Webpack with UglifyJSPlugin)を使用して、サイズは約700kbです。あなたはその数を減らしましたか? – EricSonaron

+0

すべてをインポートするのではなく、material-uiから必要なコンポーネントのみをインポートします。これは多くのスペースを節約します。しかし、700KBは妥当なサイズに似ています。 –

+0

ほとんどのコンポーネントを使用しています。 700kbのサイズはモバイル用には大きすぎます。 – EricSonaron

答えて

1

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

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

私はrequire 'material-ui'ライブラリ全体の使用を避けています。私は私の投稿に記載されているように私が使用するコンポーネントだけをインポートします。私はwebpackを使用しており、browserifyに変更したくありません。 –

2

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

+0

あなたのアプリがどれだけのサイズになっているのか聞いてもよろしいですか?私は単純なテストのための材料UIを使用しており、488 Kb以下のアプリを手に入れることはできません。 – SamuelN

+1

今600KB以上です。 –

関連する問題