首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

我想知道为什么在angular中dist文件夹的大小比src大?

在Angular中,dist文件夹的大小通常比src文件夹大的原因是因为dist文件夹是用于存放编译后的生产环境代码的文件夹,而src文件夹则是存放开发环境的源代码的文件夹。

在开发过程中,我们通常会使用各种开发工具和框架来编写源代码,包括但不限于HTML、CSS、JavaScript等。这些源代码文件通常是人类可读的,并且包含了很多注释、空格和格式化的内容,以便于开发者理解和维护代码。

然而,在将应用程序部署到生产环境之前,我们需要对源代码进行编译和优化,以提高应用程序的性能和加载速度。Angular提供了一个强大的编译器和优化工具,可以将源代码转换为高度优化的、机器可读的代码。

dist文件夹中的代码是经过编译和优化后的代码,它们通常会被压缩、混淆和精简,以减少文件大小并提高加载速度。此外,dist文件夹中还包含了一些额外的文件,如引用的第三方库、图片、字体等资源文件,这些文件在开发过程中可能并不会被直接使用,但在生产环境中是必需的。

因此,dist文件夹的大小比src文件夹大是正常的现象,这是由于编译和优化过程中的文件压缩、混淆和精简等操作所导致的。通过这些优化措施,可以显著提高应用程序的性能和加载速度。

推荐的腾讯云相关产品:腾讯云对象存储(COS) 产品介绍链接地址:https://cloud.tencent.com/product/cos

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

为生产环境编译 Angular 2 应用

为生产环境编译 Angular 2 应用 Angular 2 已经发布了 2.1.2 版本, 相信很多人已经使用(试用)了, 相比 AngularJS 1.x , Angular 2 性能上有了长足进步...接下来就介绍如何为生产环境编译 Angular 2 应用, 本文中, 我们将 Angular 2 官方文档 Hello Angular 应用编译到 50K 以下, 以用于生产环境。...未经优化应用 根据 Angular2 官方 QuickStart 快速创建一个 Hello Angular 应用, 没有任何优化情况下, 运行情况如下图所示: ?... package.json 文件添加这两个 npm 命令: { "scripts": { "bundle": "browserify -s main app/main.js > dist..., 包含了一个即时编辑器 (JIT) , 预编译好应用不是必需, 使用 Angular2 AOT 编译可以移除即时编译器 (JIT) , 因此需要先安装 Angular 编译器: npm

1.2K30

Angular2学习笔记

虽然这套框架个人觉得可能的确比较适合做移动端Web开发,但是由于网站开发经验明显不足,加上这套技术还不是相当成熟,在学习过程走了很多弯路。...现在基本上都是用angular-cli来组织文件,这个项目对Angular2提供了强大支持,我们用起来也以前方便了很多。...包括属性绑定、事件绑定、插值绑定以及双向绑定,主要用于组件内变量页面显示以及页面等。 服务。这包括两方面,一个是访问RESTFUL服务,另一个是用来保存本地变量。...但是,用测试环境你会发现项目非常巨大,一个啥依赖都没有的'Hello world'就足足有3MB大小,这显然是用户无法接受。 那么为什么他会有这么呢?...不过对于真正生产环境我们显然不能用node服务器,这里用是nginx来部署,具体步骤如下: 使用命令ng build --prod --aot来生成dist/文件夹

2K10

electron 将pc端(vue)页面打包为桌面端应用

打包桌面端,跟前端框架无关,只是想夸一下vue构建项目上体验真的好,简单方便,会以yes or no形式让你完成一个主流前端框架(回想以前构建angular应用,还要打开help,看一堆api.../dist/index.html'), protocol: 'file:', slashes: true })) package.json文件增加一条指令,用来启动electron...经过这样处理,命令行,运行 npm run electron_dev之后,就会将之前electron-quick-start显示桌面应用,再次显示出来。...在看到有相关问题出现谈论下,看到解决方案是没有把package.json放入文件夹,开始还搞不明白为什么还要一个package.json ,后来翻回头来才发现自己太想当然了,以为dist/下是去拿index.html...于是先手动dist文件夹下增加electron.js和package.json。 ?

2.1K20

同一基准下对前端框架进行比较

我们量化唯一文件夹是每个程序 src/。...结论 大多数应用程序得分都高于90,性能方面,你可能感觉不到太多差异。 指标 #2:大小 传输大小来自 Chrome network 标签。GZIPped 响应头加上服务器提供响应主体。...指标 #3:代码行数 我们用了 cloc 计算每个 repo src 文件夹代码行数。空行和注释行不计入在内。...注意 Angular + ngrx: /libs 文件夹内完成代码行数计算,仅包括*.ts 和 *.html 文件。如果你觉得这是错,请告诉正确值是多少,以及你是如何计算。...其中一些托管 GitHub 上,一些托管 Now,还有一些托管 Netlify。你还想知道哪一个是最好吗?最好应该是能够满足你需求那个! 问:你喜欢类型吗?

94820

Angular 工具篇之分析包大小

本文将介绍如何使用 webpack-bundle-analyzer 和 source-map-explorer 这两款工具来分析 Angular Bundle 大小。...--prod --stats-json 当项目构建完成后,根目录下 dist 文件夹下会生成一个 stats.json 文件,然后我们可以通过以下命令来查看 webpack 打包文件大小信息:...prod --source-map 构建完成后,根目录下 dist 文件夹下会生成 main bundle 文件,这时我们可以命令行执行下列命令来查看结果: $ node_modules/.bin.../source-map-explorer dist/main.d72e9d91fd17f9fe7b8c.js 成功执行上述命令后,浏览器你将会看到以下内容: ?...dist/main.d72e9d91fd17f9fe7b8c.js" 其实除了本文介绍两个插件之外,还有其它第三方工具,也提供了分析 bundle 包大小功能,比如 webpack-visualizer

2.3K40

Angular 多项目管理

平常开发,我们一个项目建立一个仓库,不仅维护起来难,而且那个"无穷" node_modules 也太尴尬了吧,多个项目多份 node_modules,要是同类型项目,使用同份 node_modules...我们来看看 build 之后目录结构,如下: 是的,这个导出目录,也可以 angular.json 中找到答案: "outputPath": "dist/jimmy-demo" 整个 angular.json...文件见项目初始化默认 angular.json 文件 我们简单 run 一下打包文件: http-server -p 8081 dist/jimmy-demo 多项目配置 ,上面我们已经知道了,是通过配置...调整后 jimmy-demo 目录如下: 然后我们更改下 app01 angular.json 中文件,完整文件见 app01 项目的 angular.json 文件 然后更改下 app01/...那么,我们依瓢画葫芦, angular.json 中进行配置项目 app02(感兴趣读者自行尝试)。

22030

webpack

webpack4.x 和 5.x 版本: 默认打包入口文件为 src/index.js 默认输出文件路径为 dist/main.js 找不到入口文件会报错,如更改 src 文件夹和更改 index.js...为什么要放在内存呢? 因为可能会需要频繁保存源代码,需要频繁读写文件,放在内存,可以提高实时打包输出性能,因内存物理磁盘快很多。...limit=300", }, ]; } limie 用来指定图片格式大小,单位是字节 只有<=limit 大小图片,才会被转成 base64 格式图片 练习用图片大小:337 字节...文件都直接放在 dist 文件夹下。...只定位行数,不暴露源码:在生产环境下,只想知道报错地方源码具体行数,而且不想暴露源码,将 devtool 值设置为nosources-source-map。

1.5K30

使用这 3 个技巧升级您 NodeJS Dockerfile

您可以通过两种方式解决这个问题: 为每个文件/文件夹指定一系列 COPY 指令。 .dockerignore 文件中指定不想要复制内容列表。 更喜欢指定想要复制到镜像文件/文件夹列表。...此外,出于安全原因,您应该使用 root 权限更少用户,默认情况下 Docker 镜像是由 root 用户运行(取决于您正在使用基础镜像)。...您可以 Dockerfile 运行 whoami 来检查这一点。...3- 多阶段构建 为什么?安全性和大小大小:您最终镜像是否需要包含 package-lock.json,甚至 package.json?...可能不需要,NodeJS 应用程序需要是 node_modules 文件夹和位于 src 文件夹 JS 源代码,通常在 JS 项目中,如果是 TS 项目,则位于 dist 文件夹,那是从 TS

40810
领券