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配置文件：

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来优化我的捆绑文件，但它仍然需要超过1MB。如何减小尺寸？我不想使用gzip，因为我的应用程序在移动设备上的webview上运行，其中一些不支持gzip编码。

Answer 1

最后我弄明白了什么问题。在我的webpack配置文件中，我将所有供应商js分成不同的js包文件。我在那里列出了'material-ui'。打包我的应用程序时，整个'material-ui'库将被打包到vendor.js中。我必须从供应商列表中删除material-ui，这样只会打包源代码所需的组件。

Answer 2

您可以采取一些措施来缩小尺寸：

确保您只需要material-ui所需的组件，而不是整个库
尝试使用Minifyify
在this GitHub问题中查看更多建议。

Answer 3

我会选择此处的文档中列出的选项2：Minimizing Bundle Size。他们建议这为开发人员和用户都提供了更好的体验，我认为两者的加载时间都快得多。

使用babel-plugin-import或babel-plugin-transform-imports设置Babel配置。这些配置可确保仅将您在Material-UI中使用的文件包括在构建中。
将所有Material-UI import语句转换为：

-import Button from '@material-ui/core/Button';
-import TextField from '@material-ui/core/TextField';
+import { Button, TextField } from '@material-ui/core';

为什么material-ui占用太多空间？

3 个答案: