laravel app.js 非常大的文件大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41138146/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
laravel app.js very large file size
提问by AshMenhennett
I have deployed a Laravel 5.3 application to Heroku. However, when loading /login, I noticed a very slow page load time. The problem seems to be a very large app.jsfile: /js/app.js. Here is a screenshot of the Network resource panel in DevTools: screenshot- Network panel. The 3rd resource from the top is the offending file.
我已将 Laravel 5.3 应用程序部署到 Heroku。但是，在加载 /login 时，我注意到页面加载时间很慢。问题似乎是一个非常大的app.js文件：/js/app.js. 这是 DevTools 中网络资源面板的屏幕截图：screenshot- Network panel。顶部的第三个资源是有问题的文件。
I am not sure why this file has gotten so large. here is a link to the repository: https://github.com/AshMenhennett/Salon-Pricing.
我不知道为什么这个文件变得这么大。这是存储库的链接：https: //github.com/AshMenhennett/Salon-Pricing。
I wasn't able to post anymore links, so do let me know if you would like direct links to specific files.
我不能再发布链接了，所以如果你想直接链接到特定文件，请告诉我。
What should I be doing to mitigate this issue?
我应该怎么做才能缓解这个问题？
采纳答案by Wader
From the looks of your link you've not created a production version of your assets, and currently all the source maps are in your app.jsfile, which will be adding a lot of the file size, the css and js output are also not compress/minified either.
从链接的外观来看，您还没有创建资产的生产版本，目前所有源映射都在您的app.js文件中，这将增加很多文件大小，css 和 js 输出也未压缩/缩小。
Assuming you're using laravel elixir, you just need to run gulp --productionand this will remove the source maps, compress the js and css outputs, etc.
假设您使用的是 laravel elixir，您只需要运行gulp --production，这将删除源映射，压缩 js 和 css 输出等。
回答by Rehmat
The most obvious thing you can do is to run npm run prod. This will compile the assets for production use. But in most cases, you must be looking at other solutions beyond running npm run prod. If your production file is too large, you must check your dependencies. Remove unnecessary dependencies and ensure that you don't use a lot of external libraries. For example, if you are using bootstrap, you should rely on Bootstrap's alerts in order to show alerts rather than using a Vue package to show alerts. I admit that sometimes you will need to use an external library to make your website interactive but to achieve that, you will have to sacrifice the performance. So your best bet in order to reduce the app.js file is to use the minimal external dependencies in your package.json.
您可以做的最明显的事情是运行npm run prod. 这将编译资产以供生产使用。但在大多数情况下，除了运行npm run prod. 如果您的生产文件太大，您必须检查您的依赖项。删除不必要的依赖项并确保您不使用大量外部库。例如，如果您使用 bootstrap，您应该依赖 Bootstrap 的警报来显示警报，而不是使用 Vue 包来显示警报。我承认有时您需要使用外部库来使您的网站具有交互性，但要实现这一点，您将不得不牺牲性能。因此，减少 app.js 文件的最佳选择是在 package.json 中使用最少的外部依赖项。
The second thing you can do is use minimum HTML in your components' templates. A lot of components with heavy HTML/CSS will contribute to a larger app.js file. This is yet another approach that will result in a smaller app.js file.
您可以做的第二件事是在组件的模板中使用最少的 HTML。许多带有大量 HTML/CSS 的组件将导致更大的 app.js 文件。这是另一种可以生成更小的 app.js 文件的方法。
Lastly, you should consider using Vue's component slotsto pass HTML contents to your components. This will leave the HTML in your static files and only javascript data (API calls, props, etc.) will be compiled in the app.js file. This is an effective approach to build a smaller app.js file.
最后，您应该考虑使用 Vue 的组件槽将 HTML 内容传递给您的组件。这会将 HTML 保留在您的静态文件中，并且只有 javascript 数据（API 调用、道具等）将在 app.js 文件中编译。这是构建更小的 app.js 文件的有效方法。
Edit: You can remove JQuery and Bootstrap scripts from the bootstrap.js file and can include these dependencies separately. It is always a good idea to have a few more scripts rather than having a very large script. i.e. browsers do parallel downloading and thus using JQuery and Bootstrap dependencies separately is a good idea.
编辑：您可以从 bootstrap.js 文件中删除 JQuery 和 Bootstrap 脚本，并且可以单独包含这些依赖项。拥有更多脚本总是一个好主意，而不是拥有一个非常大的脚本。即浏览器进行并行下载，因此分别使用 JQuery 和 Bootstrap 依赖项是一个好主意。
回答by user7329321
For people that are using Laravel Mix you just need to run npm run prodto compress and remove source maps from app.jsitself.
对于使用 Laravel Mix 的人，您只需要运行npm run prod以压缩和删除源映射app.js本身。
回答by Afraz Ahmad
You need to load the components asynchronously
您需要异步加载组件
Webpack has an awesome feature to create chunks of code. The key to this is to use async components. These components get loaded completely asynchronously whenever the component is present on the page you just loaded.
Webpack 有一个很棒的功能来创建代码块。关键是使用异步组件。只要组件出现在您刚刚加载的页面上，这些组件就会完全异步加载。
Let's do it.
我们开始做吧。
In resources/js/app.js
在 resources/js/app.js
I changed
我变了
Vue.component('jobs', require('./pages/employer/jobs/Index.vue').default);
To
到
Vue.component('jobs', () => import('./pages/employer/jobs/Index.vue'));
and in webpack.mix.js
并在 webpack.mix.js
mix.webpackConfig({
output:{
chunkFilename:'js/vuejs_code_split/[name].js',
}
});
Now by running npm run watch or prodeach component file is saved public/js/vuejs_code_split/[name].jsAnd the main app.jsis automatically calling those components when required.
现在通过运行npm run watch or prod每个组件文件被保存public/js/vuejs_code_split/[name].js并且主要app.js是在需要时自动调用这些组件。
