有没有办法在 vuejs 中压缩 app.js 文件答案

【问题标题】：Is there any way to compact app.js file in vuejs有没有办法在 vuejs 中压缩 app.js 文件
【发布时间】：2020-02-08 22:25:39
【问题描述】：

我正在使用带有 laravel 刀片文件的 vuejs（laravel 也可以混合）。但是当我在本地运行“npm run watch”时，它构建了大约 13 MB 的 app.js！当我在服务器上运行“npm run pord”时，它会产生 6 mb ！因此，每次我部署新任务时，用户都会面临缓慢的问题。我几乎没有角色权限（主面板和学校面板）。主面板可以完全控制所有内容。但是学校小组的组成部分很少。我们使用调用主组件的刀片文件，主组件可能有一个或多个 SPA 组件（Tab based)。意味着当用户单击其他选项卡时，它会加载另一个组件，但如果用户单击侧边栏菜单页面（laravel 刀片文件) 重新加载并加载另一个带有标签的页面。

我不需要为学校面板加载所有组件，因为此面板的权限有限。有什么办法可以让我加载特定于组件的 js 文件而不是一个 js(app.js) 文件？有没有办法将所有包压缩在单个文件和另一个 js 文件中的组件文件中？（因为每当我部署更改时，用户必须再次下载整个 js 文件）

【问题讨论】：

你有一个 app.js？ app.js+vendor.js?
public/app.js 只有一个js @PetrAveryanov
查看“供应商捆绑包提取”。这就像调用mix.extract() 并在您的视图中添加几个额外的脚本标签一样简单，用于捆绑和清单。更多详情请见laravel.com/docs/5.8/mix#vendor-extraction

标签： vue.js webpack

【解决方案1】：

你从改变你的构建开始，所以它创建了两个包：

app.d1f04bb8.js (your code)
vendor.b9f38bcd.js (libraries)

两者都被缓存了，所以当你做一些小改动时——用户只需要加载新的 app.js。

您可以更进一步，制作更多供应商捆绑包、更多应用捆绑包、延迟加载捆绑包等——您需要哪一个非常具体。

附：当然，请确保您的代码已缩小。

【讨论】：

mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css'); 这是我的 webpack.mix.js，我可以在其中命令 mix 来制作你上面提到的单独的 js 文件？请描述。 @Petr Averyanov
你可以在这里开始尝试方法：medium.com/@sehmbimanvir/… with .extract(['vue'])，或者你可以用 Laravel 标签问另一个问题并将你的配置放在那里，所以我的一些 laravel 专家我帮不了你。