Javascript laravel app.js文件大小非常大

我已经在Heroku部署了一个Laravel5.3应用程序。然而，当加载/登录时，我注意到页面加载时间非常慢。问题似乎是一个非常大的

app.js

文件：

/js/app.js

。以下是DevTools中网络资源面板的屏幕截图：。顶部的第三个资源是有问题的文件

我不知道为什么这个文件变得这么大。以下是指向存储库的链接：

我无法发布更多的链接，所以如果你想直接链接到特定的文件，请告诉我

---

我应该做些什么来缓解这个问题？

从你的链接看，你还没有创建资产的生产版本，目前所有源地图都在你的

app.js

文件中，这将增加很多文件大小，css和js输出也没有压缩/缩小

---

假设您使用的是laravel elixir，您只需要运行

gulp--production

，这将删除源映射，压缩js和css输出，等等。

对于使用Laravel Mix的用户，您只需运行

npm run prod

即可从

app.js

本身压缩和删除源地图。

您可以做的最明显的事情就是运行

npm run prod

。这将汇编用于生产使用的资产。但在大多数情况下，除了运行

npm-run-prod

之外，您还必须考虑其他解决方案。如果生产文件太大，则必须检查依赖项。删除不必要的依赖项并确保不使用大量外部库。例如，如果您使用的是引导，则应该依靠引导的警报来显示警报，而不是使用Vue包来显示警报。我承认，有时候你需要使用一个外部库来使你的网站具有交互性，但要实现这一点，你必须牺牲性能。因此，减少app.js文件的最佳方法是在package.json中使用最小的外部依赖项

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

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

---

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

您需要异步加载组件

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

我们开始吧。

在

resources/js/app.js

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

我变了

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

到

在

webpack.mix.js中

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

现在，通过运行
npm run watch或prod
保存每个组件文件
public/js/vuejs\u code\u split/[name].js
主
app.js
会在需要时自动调用这些组件
 链接到有问题的文件：您的文件将大量库捆绑到一个文件中，但我看到的主要问题是您在.js文件中包含源地图。尝试将一些库文件移动到它们自己的文件中，和删除源地图。@wader我也有类似的问题，但在我的情况下，我运行了“gulp--production”，但我的app.js文件仍然有600kb大……请告诉我如何解决这个问题？通过拆分我的代码，页面加载所需的时间要长得多，因为所有组件都是轮流获取的。你知道为某个页面预加载所有必需脚本的方法吗？我通过加载这样的组件节省了大约2mb。。。但现在我是8mb lol。。。请记住，我还没有运行npm运行生产，所以我希望它会低很多。应该标记为答案。这解决了构建问题以及进一步减少文件实际内容的实用方法。