你可以做的最明显的事情就是运行npm run prod。这将编译资源以供生产使用。但在大多数情况下，你必须考虑运行npm run prod之外的其他解决方案。如果你的生产文件太大，你必须检查你的依赖项。删除不必要的依赖项并确保你没有使用很多外部库。例如，如果你使用的是bootstrap，你应该依靠Bootstrap的alerts来显示警报，而不是使用Vue包来显示警报。我承认有时你需要使用外部库来使你的网站具有交互性，但为了实现这一点，你将不得不牺牲性能。所以为了减少app.js文件，你最好的办法是在package.json中使用最小的外部依赖。
你可以做的第二件事是在你的组件模板中使用最少的HTML。大量带有大量HTML/CSS的组件会导致一个更大的app.js文件。这是另一种导致更小的app.js文件的方法。
最后，你应该考虑使用Vue的component slots将HTML内容传递给你的组件。这将把HTML留在你的静态文件中，只有javascript数据（API调用，props等）将被编译在app.js文件中。这是构建一个较小的app.js文件的有效方法。
编辑：您可以从bootstrap.js文件中删除jQuery和Bootstrap脚本，并可以单独包含这些依赖项。拥有更多脚本而不是拥有非常大的脚本总是一个好主意。即浏览器进行并行下载，因此单独使用JQuery和Bootstrap依赖项是一个好主意。

从你的链接来看，你还没有创建你的资源的生产版本，目前所有的源Map都在你的app.js文件中，这将增加很多文件的大小，css和js输出也没有压缩/缩小。
假设你正在使用laravel elixir，你只需要运行gulp --production，这将删除源代码Map，压缩js和css输出等。

需要异步加载组件
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 Mix的人，你只需要运行npm run prod来压缩和删除app.js本身的源Map。