bundle.js 加载缓慢答案

【问题标题】：bundle.js slow loadingbundle.js 加载缓慢
【发布时间】：2018-07-06 19:59:10
【问题描述】：

bundle.js (2.4 Mb) 加载需要 40 秒 - 1.5 分钟：

这是我的webpack.config.js：

const webpack = require('webpack');
const config = {
 entry: {
        "App":__dirname + '/js/App.jsx'
},
output: {
    path: __dirname + '/dist',
    filename: 'bundle.js',
},
resolve: {
    extensions: ['.js', '.jsx', '.css']
},
module: {
  rules: [
    {
      test: /\.jsx?/,
      exclude: /node_modules/,
      use: 'babel-loader',
      loader: 'babel-loader?cashezdirectory'
    },
   // { test: /\.css$/, loader: 'style-loader!css-loader' }
  ]
},
externals: {
react: 'React',
jquery: 'jQuery'}
};
module.exports = config;

有什么方法可以加快加载速度吗？

【问题讨论】：

无论使用什么优化方法——一个 2.4 MB 的文件都不会花费 1.5 分钟来加载...控制台中是否有任何错误？开发工具中的内存峰值？另外 - 什么浏览器？过去我在使用 Firefox 和 Sourcemaps 时遇到过问题 - 已经解决。
问题的一部分是与服务器的距离太远，部分是没有足够的优化。虽然底部的答案是迟到的，但它与我之前使用的类似。我还决定分成更小的部分，根据需要下载。

标签： javascript web webpack load bundle

【解决方案1】：

您用于 webpack 的配置似乎是开发版本。尝试使用通常提供额外优化的生产配置，例如 uglification 和提取 CSS 插件。

plugins: [
    new ExtractTextPlugin('styles.css'),
    new webpack.optimize.UglifyJsPlugin({
        sourceMap: true
    })
],

这应该会大大减少包大小（至少一半）。

您还应该检查您的服务器配置以获得进一步的优化，例如 gzipping，它将下载大小减少约 5 倍。

【讨论】：

2.4mb 从本地开发服务器立即加载并没有那么大，是吗？
对于本地开发服务器，绝对不是什么大问题。但对于生产来说，绝对是个问题