空的缩小的 React 应用程序，为啥它已经很大了？

Posted 2023-03-07

【中文标题】空的缩小的 React 应用程序，为啥它已经很大了？

【英文标题】：Empty minified React app, why is it already to big?空的缩小的 React 应用程序，为什么它已经很大了？

【发布时间】：2018-09-05 07:49:30

【问题描述】：

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

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

模式生产开启（脚本被缩小，在开发过程中超过1mb），应用程序基本上没有做任何事情并且webpack已经报告它太大了？为什么？我该如何解决这个问题？ （style.scss 也是空的，只有 150 个字符）。

我的代码： 应用.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

【问题讨论】：

使用此命令生成您的构建webpack --profile --json > stats.json 的配置文件。然后使用webpack-bundle-analyzer 打开并查看配置文件（stats.json）。您也可以上传此文件并在此处共享，但您可能希望删除您不想共享的任何代码，因为此文件将包含代码。

【参考方案1】：

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

【讨论】：

请尝试举例说明如何使其更有用。

对于没有路由的简单应用，也可以是供应商-应用捆绑拆分。

如果您在构建到生产环境后有 .maps.js，请删除它们。

解决了，@hazardous 使用 webpack-bundle-analyzer 的想法表明引导程序很重。在我只从导入中删除它之前，但看到引导程序确实是一个问题，我现在也将它从生产依赖项中删除了。这对你来说可能很傻，但对我来说这并不明显，我只是从 webpack 开始并做出反应（正如你可能注意到的那样），所以即使在从导入中“删除”引导程序之后，我也对它的大小感到惊讶。

【参考方案2】：

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

所以看来引导程序是问题所在。我实际上认为这可能是原因，所以我只删除了 从我的 index.js 导入 'bootstrap/dist/css/bootstrap.min.css'; 这只减少了 40kb 的大小。

但是现在（一旦我看到引导程序确实是问题所在）我还从生产依赖项中删除了引导程序（在 npm 的 package.json 中）——之后它就像一个魅力，“只有”100 kb 用于捆绑.js，考虑到它包含所有 React，这没问题。

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

【讨论】：

很高兴它为你解决了！对全局包的进一步优化是直接使用来自 CDN 的样式，这样它们就不会包含在您的包中，并且所有 CDN 都会受益。其他选择是对支持它的组件使用樱桃采摘。在此处阅读 - bennadel.com/blog/…。