如何打包Angular应用到生产环境?

2021年3月30日12:19:07 发表评论 285 次浏览

介绍

在部署Web应用程序之前, Angular提供了一种通过一些CLI命令检查Web应用程序行为的方法。通常, ng serve命令用于从本地内存构建, 监视和服务应用程序。但是对于部署, 通过运行ng build命令可以看到应用程序的行为。

ng服务和ng构建之间的区别

ng服务 ng构建
ng serve命令有意用于快速, 本地和迭代式开发, 还用于从本地CLI开发服务器构建, 监视和服务应用程序。 ng build命令专门用于构建应用程序和部署构建工件。
该命令不会生成输出文件夹。 输出文件夹是– dist /。
ng serve可以从内存中构建工件, 从而获得更快的开发体验。 ng build命令仅生成一次输出文件, 不提供输出文件。

步骤

在执行部署应用程序的步骤之前,请确保系统中已经安装了Angular CLI,如果没有安装,请运行以下命令。

npm install -g @angular/cli

第一步将是在部署应用程序之前将其捆绑用于生产。

导航到项目目录。

cd project-folder

在Angular CLI中运行ng build命令

ng build --prod
如何打包Angular应用到生产环境?

要获取应用程序的预览, 请运行以下命令:

ng serve --prod

这将启动带有生产文件的本地HTTP服务器。导航到http//localhost:4200 /以查看该应用程序。

通过这些步骤, 就可以部署应用程序了。

方法

ng build命令将Angular应用编译到一个名为dist/的输出目录中。这个命令必须在工作目录中执行。Angular中的应用构建器使用webpack构建工具,并在工作空间的配置文件(Angular .json)中指定配置选项,或者使用一个命名的替代配置。使用CLI创建项目时,默认会创建一个生产配置,您可以指定configuration="production"或——prod="true"选项来使用该配置。

–prod标志激活许多优化标志。其中之一是–aot for Ahead of Time编译。你的组件模板是在构建期间进行编译的, 因此TypeScript可以检测代码中的更多问题。你可以在开发人员模式下进行编译, 但如果要在生成产品之前看到此错误, 仍可以激活–aot标志。

dist/文件夹

dist文件夹是build文件夹, 其中包含可以托管在服务器中的所有文件和文件夹。

dist文件夹包含JavaScript格式的angular应用程序的已编译代码, 以及所需的HTML和CSS文件。

内部dist /文件夹

资料夹/档案 描述
assets 该文件夹包含从Angular CLI资产配置复制的资源。
index.html index.html文件是应用程序的入口点。
main.[hash].js 该文件包含捆绑的应用程序。
polyfill.[hash].bundle.js 它包含polyfill依赖项
runtime- [es-version]。[hash] .bundle.js 它包含webpack加载器
style[hash].bundle.css 它包含样式定义
如何打包Angular应用到生产环境?

缺点

  • 性能:动态应用程序并非总是能达到理想的效果。复杂的SPA可能会因为大小不便而使用起来不便。
  • 陡峭的学习曲线:由于AngularJS是一种多功能工具, 因此, 完成任何任务总是有不止一种方法。这在工程师之间引起了一些混乱。

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: