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

Angular production构建可以不缩短类名吗?

在Angular中,production构建是指将应用程序准备好部署到生产环境的构建过程。默认情况下,Angular会对类名进行缩短以减小文件大小并提高加载性能。但是,如果你希望保留类名的完整性,可以通过配置来禁用类名缩短。

要禁用类名缩短,你可以在Angular项目的tsconfig.json文件中进行配置。在"compilerOptions"下添加"namedChunks"和"mangleNames"两个选项,并将它们的值设置为false。具体配置如下:

代码语言:txt
复制
"compilerOptions": {
  ...
  "namedChunks": true,
  "mangleNames": false
}

禁用类名缩短可能会导致生成的文件大小增加,加载性能略有下降。因此,建议只在特定情况下禁用类名缩短,例如需要在生产环境中进行调试或需要确保类名的可读性。

关于Angular的production构建和类名缩短的更多信息,你可以参考腾讯云的Angular部署文档:Angular部署

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

相关·内容

AngularJS入门心得3——HTML的左右手指令

指令就是一些附加在HTML元素上的自定义标记(可以是属性A、元素E、cssC),可以通过AngularJS的HTML编译器($compile)对这些标记附加指定的行为,或者操作DOM、改变DOM元素等...1.指令的规范化   在HTML命名规范中,因为区分大小写,所以类似myCustomer和mycustomer是一样的,那么如何在HTML定义指令呢,常见的可以通过   (1)     加前缀:”x-...2.指令匹配   AngularJS的$complie编译器可以基于元素、属性、以及注释来匹配指令。...-- directive: my- customer exp -->//注释 // 注意:虽然上面的4种形式都可以进行指令匹配...,但是,最好通过标签名和属性来使用指令而不要通过注释和

3.2K50
  • 2020前端性能优化清单(三)

    借助 Webpack 和 Rollup,我们还可以实现 scope hoisting [10],这两个工具都可以检测到 import 链可以在哪个位置打平并转换为一个内联函数,而破坏代码。...如果想要做的更好,你还可以使用 Webpack 缩短,并在编译时在独立作用域范围内动态重命名 CSS [13]。...这个想法是编译并提供两个单独的 JavaScript 包:“常规”构建构建方式是,一个包含 Babel 转换和 polyfills,仅提供给实际需要它们的旧版浏览器,另一个包(相同功能)包含 Babel...33 你有用预测方式提取 JavaScript 块? 我们可以使用预测方式来决定何时预加载 JavaScript 块。...避免过时和昂贵的样式: https://benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/ [13] 动态重命名 CSS

    2.2K20

    2020前端性能优化清单(三)

    借助 Webpack 和 Rollup,我们还可以实现 scope hoisting [10],这两个工具都可以检测到 import 链可以在哪个位置打平并转换为一个内联函数,而破坏代码。...如果想要做的更好,你还可以使用 Webpack 缩短,并在编译时在独立作用域范围内动态重命名 CSS [13]。...这个想法是编译并提供两个单独的 JavaScript 包:“常规”构建构建方式是,一个包含 Babel 转换和 polyfills,仅提供给实际需要它们的旧版浏览器,另一个包(相同功能)包含 Babel...33 你有用预测方式提取 JavaScript 块? 我们可以使用预测方式来决定何时预加载 JavaScript 块。...避免过时和昂贵的样式: https://benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/ [13] 动态重命名 CSS

    2.1K10

    如何在 ASP.NET MVC 中集成 AngularJS(2)

    捆绑可以很容易地将多个文件合并或捆绑到一个文件中。您可以创建 CSS,JavaScript 和其他包。压缩可以优化脚本和 CSS 代码,如去除不必要的空格和注释,缩短变量到一个字符。...下面的 BundleConfig 是内置的 ASP.NET 捆绑功能的配置文件。在 BundleConfig ,我决定通过功能模块来组织我的文件。...对于标准的渲染脚本标签格式包含追加版本号来说,这也算是个小弥补。 从 Visual Studio 中启动应用程序时,您可能会遇到浏览器缓存的问题。...在浏览器中按 F5 可以解决这个问题。为了避免这个问题一起发生,应用程序版本号会被附加到脚本标签中。使用自动版本插件,版本号会在每次构建中自动递增。...// CodeProjectRouting-production.js ​angular.module("codeProject").config( ['$routeProvider', '$locationProvider

    8.3K100

    Vue.js 首次屈居第二,JavaScript 2020 年度“新起之秀”都有谁?谁是第一呢?

    值得一提的是,前五中有个新面孔——Alpine.js,一个由 Laravel LiveWire 为浏览器设计的极简反应框架,借鉴了 Vue.js 和 Angular 中自定义 HTML 指令和双向绑定等特点...通过减少客户端包大小和缩短启动时间,React Server Components 将改变构建 React 应用程序的方式。此外,它们将简化数据获取和对数据源(如数据库和文件系统)的访问。...Angular 9 在 2 月份发布,主要变化是转向了 Ivy 编译器,带来了更小的包大小和许多其他构建改进。...与 Bootstrap 或 Bulma 等更传统的 CSS 框架相比,Tailwind CSS 提供了命名约定,开发者可通过编写名为页面和组件设置样式。...前端开发人员现在可以使用诸如 esbuild,Snowpack 和 Vite 之类的解决方案来更快、更简单地构建工具。

    2.2K20

    2020 年的 JavaScript 后起之秀

    在前端框架方面,Vue.js、React 和 Angular 一直占据着前三的位置。出自前端界“轮子哥”Rich Harris 的 Svelte 也在 2020 年收获了 1.2 万的 star。...React Server Components 将通过减少客户端捆绑包大小和缩短启动时间来改变我们构建 React 应用程序的方式。此外,它们将简化数据获取和对数据源(如数据库和文件系统)的访问。...Angular 在 2020 年发布了三个主要版本。 Angular 9 于 2 月发布。主要变化是移至 Ivy 编译器,该编译器带来了更小的捆绑包大小和许多其他构建改进。...Webpack 被一些开发者吐槽说它过于复杂,而同时诸如 Parcel 和 Rollup 之 的替代品也已经成熟,所以开发者可以根据项目需求和自己的习惯选择更适合的工具。...与更传统的 CSS 框架(如 Bootstrap 或 Bulma)相比,它提供了命名约定,使开发人员可以通过编写来设置页面和组件的样式。

    2.4K20

    React背后的工具化体系

    ES Module静态的模块机制要求import与export必须按匹配,否则编译构建就会报错 bundle size上的优势 ES Module可以通过tree shaking让bundle更干净,...环境/配置构建出的bundle都不一样 bundle性能有优化空间:用打包App的方式构建库不太合适,性能上有提升余地 不利于实验性优化尝试:无法对散文件模块应用打包、压缩等优化手段 React 16...调整了bundle形式: 不再提供CJS散文件,从npm拿到的就是构建好的,统一优化过的bundle 提供UMD单文件与CJS单文件,分别用于Web环境与Node环境(SSR) 以不可再分的库姿态,把优化环节都收进来...compilation_level): WHITESPACE_ONLY:去除注释,多余的标点符号和空白字符,逻辑功能上与源码完全等价 SIMPLE_OPTIMIZATIONS:默认模式,在WHITESPACE_ONLY的基础上进一步缩短变量...– 张云龙的回答 – 知乎 P.S.可以在repl.it – try-jest by @amasad在线试玩 preventing Infinite Loops 即死循环检查,希望测试过程被死循环阻塞

    1.5K20

    Angular 结合 Git Commit 版本处理

    后面有介绍 上图表示的是每次提交的Git Commit的信息,当然,这里我是每次提交都记录,你可以在每次构建的时候记录。...So,我们接下来用 Angular 实现下效果,React 和 Vue 同理。 搭建环境 因为这里的重点不是搭建环境,我们直接用 angular-cli 脚手架直接生成一个项目就可以了。...生成版本信息 有了上面的铺垫,我们可以通过 commit 的信息,生成指定格式的版本信息version.json了。 在根目录中新建文件version.js用来生成版本的数据。...结合 Angular 在页面中展示版本信息 最后一步,在页面中展示版本信息,这里是跟 angular 结合。.../config/default.json" } 使用 scripts 一是为了方便管理,而是方便 jenkins 构建方便调用。对于 jenkins 部分,感兴趣者可以自行尝试。

    1K30

    Agile, CICD,DevOps

    Agile Development 拥抱变化 快速迭代 CI /CD CI/CD 都体现了如今快节奏市场中的文化和发展原则,旨在缩短开发周期、提高软件交付效率以及实现全流程的自动化。...最新版本真的解决了预期的问题?是否满足了用户的需求?用户就可以快速地验收并作出判断,而IT团队也可以在问题影响到开发周期之前就解决反馈的问题。...CI可以实现代码的自动构建与测试,减少开发中的Bug。因此,CI适用于那些过度依赖手动任务和复杂构建过程的企业。 持续交付适用于需要缩短开发周期,更快地为目标用户提供软件的企业。..., resulting in many production deployments every day....对持续交付与持续部署的关系,Martin也承认两个概念容易造成困惑,持续部署代表将所有变更自动通过流水线推到生产环境,持续交付则意味着你有能力这样做,但可以基于业务选择这样做。

    27860

    Webpack 4正式发布,实现零配置启动

    Webpack 4 正式发布,代号为 Legato,包括多项重要更新,特别是增加了 0 配置特性,可以视为对前阵子大火的 Parcel 的有力回击。...新增 mode 配置,可选择设置为 development 或 production,默认值为 production,它们的主要区别是 development 更重视构建时间,production 更重视尺寸...现在开发者可以更简单的实现代码分割和提取公共代码等操作。 支持 WebAssembly,现在可以导入入 WebAssembly 支持的其它语言文件。...支持 CommonJS, AMD, ESM 等模块系统,可以直接导入.mjs 扩展的模块文件,对 wasm 模块也有实验性的支持。...众多主流前端框架的 CLI 工具将积极跟进这一升级,数周内将发布的 Angular 新版本将直接集成 Webpack 4.

    27820
    领券