【问题标题】:Production compilation with ejected Angular 4 application produces large files使用弹出的 Angular 4 应用程序进行生产编译会产生大文件
【发布时间】:2017-11-08 03:28:06
【问题描述】:

ng build --prodAngular CLI 命令在 Angular4 应用程序中生成高度压缩的 javascript 文件。

当使用ng eject 命令弹出应用程序时,Angular CLI 命令消失了,我们只剩下 npm 脚本(npm run build 命令来构建应用程序),但不幸的是,该命令输出了一个非生产版本。

我尝试直接运行webpack -p 命令,但与ng build --prod 命令的输出相比,输出结果文件略

如何在弹出的应用程序上获得与ng build --prod 命令等效的压缩?什么命令/参数可以产生这样的结果?

【问题讨论】:

    标签: angular production-environment production angular2-aot


    【解决方案1】:

    您可以使用以下命令弹出 webpack 配置的生产版本:

    ng eject --prod
    

    编辑

    如果您想同时使用弹出的 webpack 配置的开发和生产版本,请执行以下操作:

    1. 备份您现有的 package.json
    2. 执行ng eject --prod(这将弹出webpack配置的生产版本)

    3. 重命名 弹出 webpack.config.json 为 webpack.config-prod.json

    4. 恢复您备份的 package.json(实际更改几乎是脚本和一些新包)。您可能还想编辑 .angular-cli.json 并将 ejected 属性更改为 false。
    5. 执行ng eject(这将弹出开发版本)。

    您现在留下了 webpack 配置的生产和开发版本。现在,要编译您的 Angular 项目以进行生产,请执行 webpack --config webpack.config-prod.js,您也可以将其添加到您的 package.json 脚本中以方便使用。

    但是,这可能不是完美的方法,但这就是我在中所做的。如果有更好的版本,请随时编辑。

    【讨论】:

    • 命令有效。弹出后,我运行构建和缩小是我需要的方式。但不幸的是,我不能再在开发模式下运行该应用程序了。当我运行npm start 命令时,我收到一条错误消息webpack-dev-server is not recognized as an internal or external command。那么没有cli就没有办法在两种模式(dev/prod)下使用弹出的应用程序吗?我正在寻找一种无需任何人工干预的解决方案,一种开箱即用的解决方案。
    • 我最终做的是使用ng ejectng eject --prod 生成配置的非产品和产品版本(注意,您可能需要反转您的 package.json在第一次弹出后),然后在构建生产时使用 webpack 配置的生产版本,如下所示:webpack --config <prod-webpack-config>.
    • 这是一个很好的解决方案!谢谢。请更新您的原始答案并在评论中包含您所写的内容,以便观众轻松阅读。有时人们会错过 cmets 部分。
    • 即使我已经弹出了 webpack 配置文件,我可以使用这些步骤吗?
    猜你喜欢
    • 1970-01-01
    • 2016-10-04
    • 2018-06-16
    • 2018-06-04
    • 2015-07-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-03-08
    相关资源
    最近更新 更多