laravel app.js文件非常大

Question

我已经向Heroku部署了一个Laravel 5.3应用程序.但是,在加载/登录时,我注意到页面加载时间非常慢.问题似乎是一个非常大的app.js文件:/js/app.js.以下是DevTools中网络资源面板的屏幕截图:screenshot- Network面板.顶部的第三个资源是违规文件.

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

我无法发布更多链接,如果您想直接链接到特定文件,请告诉我.

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

Answer 1

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

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

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

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

Answer 2

从你的链接的外观你没有创建你的资产的生产版本,目前所有的源地图都在你的app.js文件中,这将添加大量的文件大小,css和js输出也不是压缩/缩小了.

假设你正在使用laravel elixir,你只需要运行gulp --production,这将删除源地图,压缩js和css输出等.

Answer 3

您需要异步加载组件

Webpack 有一个很棒的功能来创建代码块。关键是使用异步组件。只要组件出现在您刚刚加载的页面上，这些组件就会完全异步加载。

我们开始做吧。

在resources/js/app.js。

我变了：

Vue.component('jobs', require('./pages/employer/jobs/Index.vue').default);

到：

Vue.component('jobs', () => import('./pages/employer/jobs/Index.vue'));

并在webpack.mix.js：

mix.webpackConfig({
    output:{
        chunkFilename:'js/vuejs_code_split/[name].js',
    }
});

现在，通过运行npm run watch or prod每个组件文件都被保存下来public/js/vuejs_code_split/[name].js ，并且主程序app.js会在需要时自动调用这些组件。

Answer 4

对于使用 Laravel Mix 的人，您只需要运行npm run prod以压缩和删除源映射app.js本身。