Javascript 我还可以如何优化我的包并提高页面速度？

我有一个react应用程序，其中使用了许多库，如redux、redux表单、react路由器、传单、react引导、redux thunk等。我的包大小缩小到531kb，供应商文件缩小到5.32mb

我使用webpack进行捆绑和优化。另外，我在网页包和react路由器中使用了代码拆分。还可以做些什么来提高速度和尽可能小的尺寸。有人有什么想法可以分享吗

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 idea后更新

---

您可以使用

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

---

首先，非常感谢你关于缩小的想法。我实现了你的想法，bundle.js的大小从531kb减少到413kb，供应商的大小从5.33mb减少到1.56mb。但是，我收到了关于重复数据消除的警告，我在问题中更新了该警告。@学徒：没问题。啊，我错了。我以为你在用Webpack1。如果只是删除

新网页包.optimize.dedueplugin（），

，是否会收到任何警告？删除dedueplugin（）时，我没有收到任何错误。我从entrypoint size limit中的开始警告中只得到关于大小的警告：以下entrypoint组合资产大小超过了建议的限制（250 kB）。这会影响web性能。@学徒我明白了。这是一个棘手的情况。您没有任何只在某些页面或弹出窗口等中使用的库。您可以将这些库分解为单独的块？react Massey组件仅在homepage中使用（destinos.js及其HomeLayout的子组件，您可以在routes.js中看到）。此外，传单和传单路由机器仅用于结果页，如（汽车、公寓，它们是ResultLayout的子组件）。