Webpack 代码拆分：它有什么作用吗？好像没有效果

Question

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

在网络选项卡上模拟常规 3G 连接

router.js

export default [
  {
    path: '/',
    component: App,
    childRoutes: [
      {
        path: 'signup',
        getComponent(location, cb) {
          System.import('./modules/App/components/Authentication/Login.js')
            .then(loadRoute(cb))
            .catch(errorLoading);
        }
      }
    ]
  }  
]

Answer 1

所以我浏览了 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: ...
  }
}

编辑：在将字体从 google 移动到本地字体文件夹后，从 simple-grid 等库中删除重复的字体调用并使用 @font-face，设法真正减少了加载时间。

现在普通 3G 为 5.5 秒，而之前为 27 秒。加载时间减少 80% 以上。

Answer 2

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

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

演绎插件会找到重复的文件和代码并将它们合并为一个单元。 Uglify 插件 会在生产环境中对您的代码进行 uglify。