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

Question

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

需要注意的是我有两个资产文件夹：一个用于链轮，我的所有 css 和大多数 js 都在其中，另一个用于 webpacker，我添加它只是为了使用名为 Upp 的图像上传节点 package。 我打算完全迁移到 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 在控制台 btw 中显示的内容：

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 和 hover 时弹出的新选项卡的内容。

更新

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