我已经为 Heroku 部署了一个 Laravel 5.3 应用程序。但是，在加载 /login 时，我注意到页面加载时间非常慢。问题似乎是一个非常大的app.js 文件：/js/app.js。这是 DevTools 中网络资源面板的屏幕截图：screenshot- Network panel。从顶部算起的第三个资源是有问题的文件。
我不知道为什么这个文件变得这么大。这是存储库的链接：https://github.com/AshMenhennett/Salon-Pricing。
我无法发布更多链接，所以如果您想要指向特定文件的直接链接，请告诉我。
我应该怎么做才能缓解这个问题？
【问题讨论】：
标签： javascript laravel webpack
您可以做的最明显的事情是运行npm run prod。这将编译资产以供生产使用。但在大多数情况下，除了运行npm run prod 之外，您还必须寻找其他解决方案。如果您的生产文件太大，您必须检查您的依赖项。删除不必要的依赖项，并确保您不使用大量外部库。例如，如果您使用的是引导程序，则应该依靠引导程序的警报来显示警报，而不是使用 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 依赖项是一个好主意。
【讨论】：
从您的链接的外观来看，您尚未创建资产的生产版本，目前所有源地图都在您的 app.js 文件中，这将增加很多文件大小、css 和 js输出也不会压缩/缩小。
假设你使用的是 laravel elixir，你只需要运行 gulp --production 这将删除源映射，压缩 js 和 css 输出等。
【讨论】：
对于使用 Laravel Mix 的人，您只需要运行 npm run prod 即可从 app.js 本身压缩和删除源映射。
【讨论】：
您需要异步加载组件
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 会在需要时自动调用这些组件。
【讨论】：