왜 material-ui가 너무 많은 공간을 차지합니까?

Question

webpack을 사용하여 반응 프로젝트를 묶습니다. 내 프로젝트는 구성 요소 아래에 대한 재료 UI에 따라 달라집니다

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

웹팩-번들 크기 분석기 보고서의 재료 UI는 1.07MB 크기를합니다. 다음은 내 웹팩 설정 파일입니다

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 
    } 
    } 
} 

나는 이미 내 번들 파일을 최적화 할 수 CompressionPlugin, UglifyJsPlugin을 사용하려고하지만 여전히 1메가바이트보다 더 걸립니다. 크기를 줄이려면 어떻게해야합니까? 내 응용 프로그램이 모바일 장치에서 webview에서 실행되고 일부는 gzip 인코딩을 지원하지 않기 때문에 gzip을 사용하고 싶지 않습니다.

Answer 1

, • 크기 줄이기 위해 할 수있는 것들 중 몇 가지가 있습니다 : 당신이 단지 당신이 material-ui에서 필요한 구성 요소에 필요로하는지 확인

1. 을하지 전체 라이브러리는
2. 사용해보십시오 Minifyify
3. this에 더 많은 의견보기 GitHub 문제.

Answer 2

마지막으로 나는이 문제를 파악했습니다. webpack 설정 파일에서 모든 벤더 js를 다른 js 번들 파일로 분리합니다. 그리고 나는 'material-ui'를 거기에 열거했다. 내 앱을 패키징 할 때 전체 'material-ui'라이브러리가 vendor.js에 패키징됩니다. 공급 업체 목록에서 material-ui를 제거해야합니다. 이렇게하면 내 소스 코드에 필요한 구성 요소 만 패키지됩니다.