导致rails应用程序的public/packs中的application.js文件过大的原因？ / 机架超时错误

如何解决导致rails应用程序的public/packs中的application.js文件过大的原因？ / 机架超时错误

我的应用程序经常抛出机架超时错误，我想我将问题缩小到编译的 javascript 文件的大小。 public/packs/application-5db30a18f8715133f889.js 是 2.1mb。这是不可行的！

需要注意的是我有两个资产文件夹：一个用于 sprockets，我所有的 css 和大多数 js 都在其中，另一个用于 webpacker，我添加它只是为了使用名为 Upp 的图像上传节点包。我打算完全转向 webpacker，但还没有。这是我的app/assets/application.js：

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require cable
//= require_tree ./channels
//= require semantic-ui/dist/semantic
//= require micromodal/dist/micromodal
//= require local-time
//= require micromodal
//= require init

这是app/webpacker/packs/application.js：

console.log('Hello World from Webpacker')
import fileUpload from 'fileUpload'
    document.addEventListener('turbolinks:load',() => {
      document.querySelectorAll('.upload-file').forEach(fileInput => {
        fileUpload(fileInput)
      })
    })

我是否在 app/assets/application.js 中做错了什么会导致如此巨大的文件大小？

顺便说一下，这是 webpacker 在控制台中显示的内容：

Version: webpack 4.46.0
Time: 5357ms
Built at: 03/01/2021 12:16:43 AM
                                             Asset       Size  Chunks                                Chunk Names
            js/application-62fd5a37239b6e18973d.js    737 KiB       0  [emitted] [immutable]  [big]  application
js/application-62fd5a37239b6e18973d.js.LICENSE.txt   1.08 KiB          [emitted]                     
         js/application-62fd5a37239b6e18973d.js.br    135 KiB          [emitted]                     
         js/application-62fd5a37239b6e18973d.js.gz    182 KiB          [emitted]                     
        js/application-62fd5a37239b6e18973d.js.map   2.16 MiB       0  [emitted] [dev]               application
     js/application-62fd5a37239b6e18973d.js.map.br    424 KiB          [emitted]              [big]  
     js/application-62fd5a37239b6e18973d.js.map.gz    558 KiB          [emitted]              [big]  
                                     manifest.json  364 bytes          [emitted]                     
                                  manifest.json.br  129 bytes          [emitted]                     
                                  manifest.json.gz  142 bytes          [emitted]                     
Entrypoint application [big] = js/application-62fd5a37239b6e18973d.js js/application-62fd5a37239b6e18973d.js.map

值得一提的是，我没有 webpacker.config.js。我应该吗？

捆绑分析器屏幕截图：

解决方法

如果您说问题出在 packs/application，我会添加 https://www.npmjs.com/package/webpack-bundle-analyzer 以查看 webpacker 在该文件中添加的内容。

这是我的 webpack/development.js 的样子：

process.env.NODE_ENV = process.env.NODE_ENV || 'development';
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const environment = require('./environment');

environment.plugins.append('BundleAnalyzerPlugin',new BundleAnalyzerPlugin());

...

其他一切都很简单。查看启动 webpacker 并将鼠标悬停在其内容上时弹出的新选项卡。

更新

uppy 似乎加载了两次。保留一个版本应该会减少包的大小。如果这还不够，那么您可以查看 Lazy Loading、Code Splitting 和 https://loadable-components.com/docs/library-splitting/。理想情况下，您应该只在需要的页面上加载文件上传逻辑。在 packs/application 中看到它告诉我您正在加载每个页面。