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

Question

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

需要注意的是我有两个资产文件夹：一个用于我所有 css 和大多数 js 所在的 sprockets，另一个用于 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。我应该吗？

捆绑分析器截图：

Answer 1

如果您说问题出在 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 and https://loadable-components.com/docs/library-splitting/。理想情况下，您应该只在需要的页面上加载文件上传逻辑。在 packs/application 中看到它告诉我您正在加载每个页面。

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

cause of excessively large application.js file in public/packs for rails app? / rack timeout error

ruby-on-rails

sprockets

webpacker