如何优化vue应用的生产版本

Question

我是(S11*(S22 + 1) - S12*S21)/(S22 + 1)的新手，我正在尝试构建简单的（一个组件）测试应用程序。但是我在构建后得到了1.8 mb的js文件。我已经添加了

vue

到达我的module.exports = { mode: 'production', presets: [ '@vue/app' ] } ，但仍然得到相同的结果

使用babel.config.js版vue和2.6.10版webpack

构建后的js文件大小：

4.28.4 1,355 kb

chunk-vendors.597c8310.js.map 466 kb

chunk-vendors.597c8310 45 kb

app.181cb770.js.map 21 kb

Answer 1

1）*.map由浏览器在关闭DevTools时使用，因此JS的实际大小为 487kb ！

2）很难分析到底是什么导致了这种大小。根据您提供的信息，chunk-vendors.597c8310看起来非常可疑。

我想您应该开始研究依赖项。我想您的捆绑包中有moment，lodash或vee-validate之类的东西。如果是这样，请考虑寻找替代品（google）。

3）要了解整个依赖关系，可以使用捆绑分析器内置的vue cli。

• 在项目目录中打开终端
• 键入vue ui并在浏览器中打开网址（例如http://localhost:8000）
• 确保Vue UI正在使用您的项目
通过点击任务> 构建
• 构建您的应用
• 切换到分析器标签
• 检查并删除“大个子”