Question

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

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

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

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

Answer 1

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

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

Answer 2

对于使用Laravel Mix的人，您只需要运行npm run prod即可从app.js本身压缩和删除源地图。

Answer 3

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

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

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

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

Answer 4

您需要异步加载组件

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在需要时会自动调用这些组件。

laravel app.js文件非常大

4 个答案: