Question

我有一个反应应用程序，其中使用了许多库，如redux，redux-form，react-router，leaflet，react-bootstrap，redux-thunk等等。我的捆绑包大小缩小到531kb，供应商文件缩小到5.32mb。

我使用webpack进行捆绑和优化。我也使用webpack中的代码拆分和反应路由器。还可以做些什么来提高速度和尽可能小的性能。有没有人有任何想法分享？

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const VENDOR_LIBS = [
  'react', 'lodash', 'axios', 'base-64', 'leaflet', 'leaflet-routing-machine',
  'moment', 'react-bootstrap', 'react-dates', 'react-dom', 'react-geosuggest',
  'react-google-places-suggest', 'react-input-range', 'react-intl', 'react-leaflet',
  'react-masonry-component', 'react-redux', 'react-router', 'react-router-redux',
  'react-slick', 'redux', 'redux-form', 'redux-thunk'
];

const config = {
  entry: {
    bundle: './src/index.js',
    vendor: VENDOR_LIBS,
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[chunkhash].js',
  },
  module: {
    rules: [
      {
        loader: ExtractTextPlugin.extract({
          loader: 'css-loader'
        }),
        test: /\.css$/,
      },
      {
        use: 'babel-loader',
        test: /\.js$/,
        exclude: /node_modules/,
      },
      {
        use: [
          {
            loader: 'url-loader',
            options: { limit: 40000 }
          },
          'image-webpack-loader'
        ],
        test: /\.(jpe?g|png|gif|svg|woff|woff2|eot|ttf)$/,
      },
      {
        test: /masonry|imagesloaded|fizzy\-ui\-utils|desandro\-|outlayer|get\-size|doc\-ready|eventie|eventemitter/, // eslint-disable-line
        loader: 'imports-loader?define=>false&this=>window'
    }
    ],
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      names: ['vendor', 'manifest']
    }),
    new HtmlWebpackPlugin({
      template: 'src/index.html'
    }),
    new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    }),
    new ExtractTextPlugin('style.css'),
  ],
  devServer: {
    historyApiFallback: true,
    hot: true
  },
};

if (process.env.NODE_ENV === 'production') {
    config.plugins.push(
        new webpack.optimize.UglifyJsPlugin({
          output: {
            comments: false
          }
        })
    );
}

module.exports = config;

routes.js

const routes = {
  component: App,
  path: '/',
  childRoutes: [
    {
    component: HomeLayout,
    indexRoute: { component: Apartament },
    childRoutes: [
      {
        path: 'apartamentos',
        getComponent(location, cb) {
          System.import('./containers/homescreen/apartament-form')
             .then(module => cb(null, module.default));
        }
      },
      {
        path: 'signup',
        getComponent(location, cb) {
          System.import('./containers/homescreen/signup')
             .then(module => cb(null, module.default));
        }
      },
      {
        path: 'login',
        getComponent(location, cb) {
          System.import('./containers/homescreen/login')
             .then(module => cb(null, module.default));
        }
      }
    ],
  },
  {
  component: ResultLayout,
  childRoutes: [
    {
      path: 'car',
      getComponent(location, cb) {
        System.import('./containers/result/car-result')
        .then(module => cb(null, module.default));
      }
    },
  ]
}
  ]
};

是否有其他提示/想法，例如代码拆分和shouldComponentUpdate？

抱歉我的英语不好。

实施@Tholle想法后更新

Answer 1

您可以使用NoErrorsPlugin并将选项微调到HtmlWebpackPlugin和UglifyJsPlugin以缩小捆绑包：

const config = {
  ...,
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      names: ['vendor', 'manifest']
    }),
    new webpack.NoErrorsPlugin(),
    new HtmlWebpackPlugin({
      inject: true,
      template: 'src/index.html',
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true
      }
    }),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    }),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new ExtractTextPlugin('style.css')
  ]
};

if (process.env.NODE_ENV === 'production') {
  config.plugins.push(
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        screw_ie8: true,
        warnings: false
      },
      mangle: {
        screw_ie8: true
      },
      output: {
        comments: false,
        screw_ie8: true
      }
    })
  );
}

我还能如何优化我的捆绑并提高页面速度？

1 个答案: