javascript - laravel app.js 非常大的文件大小

Question

我已经将 Laravel 5.3 应用程序部署到 Heroku。但是，在加载/login 时，我注意到页面加载时间非常慢。问题似乎是一个非常大的 app.js 文件:/js/app.js。这是 DevTools 中网络资源面板的屏幕截图:screenshot- Network panel .从顶部开始的第 3 个资源是有问题的文件。

我不确定为什么这个文件变得这么大。这是存储库的链接:https://github.com/AshMenhennett/Salon-Pricing .

我无法再发布链接，所以如果您想直接链接到特定文件，请告诉我。

我应该怎么做才能缓解这个问题？

Answer 1

您可以做的最明显的事情是运行 npm run prod。这将编译用于生产的 Assets 。但在大多数情况下，您必须考虑运行 npm run prod 之外的其他解决方案。如果您的生产文件太大，您必须检查您的依赖项。删除不必要的依赖项并确保您不使用大量外部库。例如，如果您使用的是 bootstrap，则应该依靠 Bootstrap 的警报来显示警报，而不是使用 Vue 包来显示警报。我承认有时您需要使用外部库来使您的网站具有交互性，但要实现这一点，您将不得不牺牲性能。因此，为了减少 app.js 文件，最好的办法是在 package.json 中使用最少的外部依赖项。

您可以做的第二件事是在您的组件模板中使用最少的 HTML。许多具有大量 HTML/CSS 的组件将导致更大的 app.js 文件。这是另一种方法，可以生成更小的 app.js 文件。

最后，您应该考虑使用 Vue 的 component slots将 HTML 内容传递给您的组件。这会将 HTML 保留在您的静态文件中，并且只有 javascript 数据(API 调用、 Prop 等)将在 app.js 文件中编译。这是构建较小的 app.js 文件的有效方法。

编辑:您可以从 bootstrap.js 文件中删除 JQuery 和 Bootstrap 脚本，并可以单独包含这些依赖项。拥有更多脚本而不是拥有非常大的脚本总是一个好主意。即浏览器进行并行下载，因此分别使用 JQuery 和 Bootstrap 依赖项是个好主意。