我正在学习webpack和Vuejs。我已经按照https://vuejs-templates.github.io/webpack/上的简单说明操作了。
然而,当我运行npm run build
来制作一个生产版本时,它需要12秒!我不明白为什么这一分钟的演示单页,没有功能的应用程序,只有115 kB的整体需要这么长的时间来构建。
我在很多地方读到过关于从webpack配置中排除node_modules
的文章,但我在vue-cli
的webpack模板中看不到这一点--它是在试图缩小所有的库代码还是什么?
我知道这是一个非常菜鸟的问题,所以请对我好!
3条答案
按热度按时间0sgqnhkj1#
正如@CodinCat在评论中指出的,这是因为构建是内存密集型的。
如果你有足够的RAM,它们会很慢,或者如果你没有足够的RAM,它们会退出error code 137,例如在一个小的VPS上运行,Droplet,等等。
为了优化这些构建,您可以更改
build/webpack.prod.conf.js
中的以下行,sourceMap: false
(在我的例子中是38
行),因为 * sourcemap * 是内存密集型的:juud5qan2#
创建源代码Map可能需要很长时间,并且随着源代码的增长而明显增长。因此,对于一个简单的应用程序,您可能会获得几秒钟的时间,但对于一个包含多个库的大型应用程序,可能需要几分钟。
作为@ProfNandaa的补充,您可以通过在vue.config.js中添加以下参数来使用VueJs方法:
参考版本2文档:https://cli.vuejs.org/config/#productionsourcemap
请注意,即使在生产环境中也保留源Map,也可以让您调试应用程序(使用开发工具浏览器),并且不会影响应用程序的执行。
ibps3vxo3#
在我的例子中,我使用了ts-loader。添加transpileOnly后,时间从15分钟减少到5秒:真