Пустое миниатюрное приложение React, почему оно уже слишком большое? - PullRequest
0 голосов
/ 05 сентября 2018

Я создал очень простое приложение, которое загружает только json из URL, а затем отображает его. Нет фрагментов, которые можно разделить , все минимизируется, но я все равно получаю сообщение:

«ПРЕДУПРЕЖДЕНИЕ при ограничении размера ресурса: следующие активы превышают рекомендуемый предел размера (244 КиБ). Это может повлиять на производительность сети. Ресурсы: output_react.js (245 КиБ)».

Режим производства включен (сценарий минимизирован, время разработки больше 1 МБ), приложение в основном ничего не делает, а веб-пакет уже сообщает, что он слишком большой? Зачем? И как я могу решить это? (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
}

Ответы [ 2 ]

0 голосов
/ 05 сентября 2018

Спасибо, @hazardous. Я сделал stats.json, и вот что показал webpack-bundle-analyzer: webpack-bundle-analyser result

Так что, похоже, проблема в загрузке. Я действительно думал, что это может быть причиной, поэтому я удалил только импорт 'bootstrap / dist / css / bootstrap.min.css'; из моего index.js и это только уменьшило размер на 40 КБ.

Но теперь (как только я вижу, что загрузчик действительно является проблемой), я также удалил загрузчик из производственных зависимостей (в package.json npm) - после этого он работает как чудо, «всего» 100 КБ для пакета. .js, и это нормально, учитывая, что он включает в себя все Реакты.

Большое спасибо @hazardous, ваш ответ решил проблему.

0 голосов
/ 05 сентября 2018

Ну, вы должны разделить файл min на куски. Просто перейдите на ленивую загрузку на основе маршрутов и разделите ее на куски.

...