Question

我创建了一个非常基本的应用，该应用仅从url加载json，然后显示它。 没有要分割的块，事情变小了，但我仍然收到消息：

“警告资产大小限制：以下资产超过了建议的大小限制（244 KiB）。这可能会影响Web性能。资产：output_react.js（245 KiB）”。

模式生产处于打开状态（脚本最小化，在其超过1mb的开发期间），应用基本上不执行任何操作，并且webpack已经报告它太大了？为什么？我该如何解决呢？（style.scss也为空，仅150个字符）。

我的代码： App.js

import React, {Component} from 'react';
require('../styles/style.scss');

class App extends Component {
  constructor(){
    super();
    this.state = {
      orders : []
    }

      this.getOrders();
  }
  getOrders (){
    fetch('http://localhost/supplier/get_orders.php')
    .then(results =>{
      return results.json();
    }).then(data =>{
      let orders = data.orders.map((order) => {
        return( 
          <div key={order.order_index} className={order.status}>
            {order.sizes}
          </div>
        )
      })
      this.setState({orders: orders})
    })
  }
  render() {
    return  <div className="orders_container">{this.state.orders}</div> ;
  }
}

export default App;

我的webpack.config.js：

const webpack = require('webpack')
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.join(__dirname, '/dist'),
        filename: 'output_react.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: [/node_modules/, /git/],
                use: {
                    loader: 'babel-loader'
                }
      },
            {
                test: /\.scss$/,
                exclude: /git/,
                use: [
                "style-loader", // creates style nodes from JS strings
                "css-loader", // translates CSS into CommonJS
                "sass-loader" // compiles Sass to CSS, using Node Sass by default
            ]
        },
            {
                test: /\.css$/,
                exclude: /git/,
                use: [
                  "style-loader", // creates style nodes from JS strings
                  "css-loader" // translates CSS into CommonJS
              ]
          }
    ]
    },
    plugins: [
    new HtmlWebpackPlugin({
            template: './src/index.html'
        })
  ],
    watch: true
}

Answer 1

好吧，您必须将min文件分成多个块。只需根据路由进行延迟加载，然后将其分成大块即可。

Answer 2

谢谢@hazardous。我已经完成了stats.json，这就是webpack-bundle-analyser显示的内容：

所以看来引导程序是问题所在。我以为这可能是原因，所以我只删除了 从index.js导入“ bootstrap / dist / css / bootstrap.min.css”； 但这只会将大小减少40kb。

但是现在（一旦我看到引导程序确实是个问题），我还从生产依赖项中删除了引导程序（在npm的package.json中）-在此之后，它就像一个符咒一样，“仅” 100 kb的捆绑包.js，考虑到它包含了所有的React，没关系。

非常感谢@hazardous，您的回答解决了问题。

空的缩小版React应用程序，为什么已经很大了？

2 个答案: