Webpack Code Splitting：它有什么用吗？似乎没有效果

Question

webpack的新手并在此做出反应。我按照这个medium article在反应路由器中创建代码拆分。似乎它没有任何影响，因为我的应用程序仍然必须在初始页面加载时同步加载整个bundle.js文件。减少加载时间的任何提示？ bundle.js在dev中是2.2mb，但是在uglifying它之后，prod大约是400kb。

在网络标签上模拟常规3G连接

router.js

boolean isEmpty(List<E> list) {
    return list.isEmpty();
}

Answer 1

尝试使用这些插件来减少重复代码

plugins: [
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.UglifyJsPlugin()
    ],

Deduce插件会找到重复的文件和代码，并将它们合并为一个单元。 Uglify插件将在生产中使用您的代码。

Answer 2

所以我浏览了webpack文档并使用了几个插件。管理以降低文件大小

  

从2.2mb到92kb，加载时间加快10倍。

现在是我的webpack.config文件。

module.exports = {
  entry: {
    js: [ './src/index.js' ],
    vendor: [
      'react', 'react-router', 'react-redux', 'toastr', 'lodash'
    ]
  },

  output: {
    path: path.join(__dirname, '/dist/prod'),
    publicPath: '/dist/prod',
    filename: 'bundle.js'
  }, 

  plugins: [ 
      new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor',
        filename: 'vendor.js',
        minChunks: Infinity,
      }),
      new ExtractTextPlugin("styles.css"),
      new webpack.optimize.DedupePlugin(),
      new CompressionPlugin({
          asset: "[path].gz[query]",
          algorithm: "gzip",
          test: /\.js$|\.html$/,
          threshold: 10240,
          minRatio: 0.8
      }),
      new webpack.optimize.UglifyJsPlugin(), 
    ],

  module: {
    rules: ...
  }
}

编辑：将字体从谷歌移动到本地字体文件夹后，从简单网格和使用@ font-face等库中删除重复的字体调用，设法真正减少加载时间。

  

现在常规3G上的5.5s与之前的27s相比。负载时间减少80％以上。