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

与angular-cli相比,无法使用webpack + angular实现相同级别的捆绑优化

与angular-cli相比,无法使用webpack + angular实现相同级别的捆绑优化。angular-cli是一个用于Angular项目的命令行工具,它提供了一种简单方便的方式来初始化、开发、构建和测试Angular应用程序。它使用webpack作为默认的构建工具,内置了一些默认的优化配置,使得构建和捆绑过程更加简单和高效。

使用angular-cli,开发人员可以通过简单的命令来创建组件、服务、模块等,并自动完成相关的配置。它还提供了开发服务器、代码热替换等功能,可以方便地进行开发和调试。

而如果不使用angular-cli,使用webpack + angular进行开发,需要手动配置webpack,包括编译TypeScript、加载Angular模块、处理样式、压缩代码等一系列步骤。虽然可以通过手动配置webpack来实现更精细化的优化,但是相对而言,这需要开发人员具备更深入的了解和掌握。

在捆绑优化方面,angular-cli内置了一些常用的优化配置,例如代码分割、按需加载、静态资源压缩等,这些配置可以大大减小应用的体积,并提高加载和执行性能。而使用webpack + angular进行开发,需要开发人员自行配置这些优化,相对来说更加繁琐和复杂。

总之,与angular-cli相比,使用webpack + angular进行开发可以获得更大的灵活性和控制力,但同时需要开发人员具备更深入的技术功底和对优化的理解。对于大多数项目来说,推荐使用angular-cli,它提供了一套简单易用的工具链和默认优化配置,能够帮助开发人员更高效地进行Angular应用程序开发。

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

相关·内容

Angular10配置webpack打包 「详细教程」

对于 Angular 项目,推荐使用 angular-cli 创建打包项目 Angular 会默认帮我们配置。...这包括使用语言环境的功能,但是,它大大增加了整体捆绑软件的大小。这些都是需要我们优化的地方。...当你向应用中添加组件和服务时,这个根组件相关联的视图就会成为视图树的根。 app/app.component.html 定义根组件 AppComponent 关联的 HTML 模板。...}), 复制代码 模块功能:能够查看到你的文件打包压缩后中真正的内容,找出那些模块组成最大的大小,找到错误的模块,优化它!最好的事情是它支持缩小捆绑!它解析它们以获得实际大小的捆绑模块。...需要注意的是,默认angular-cli打包生成的入口文件也被配置成了index.html,所以我们需要更改angular.jaon文件中的配置。

5K20

前端-团队效率-webpack4打包骚操作

需求背景 使用angular-cli打包时当工程较大,引入过多时会出现打包卡顿卡死的情况 使用webpack4自定义工程打包,面临着打包时间的问题 常见解决方案 dll缓存,happypack多核打包,...配置,依然可以实现打包效率提升 在angular-cli中比较麻烦一点,limeii.github.io/2019/08/ang…,亲测由于内置的功能已经比较强大就算加上happyback也不能提升多少打包速度...仔细观察发现 打包卡顿在 production build - 79% chunk modules optimization 例如:https://github.com/angular/angular-cli...www.webpackjs.com/plugins/mod…,说白了做代码资源优化使用,可以减少代码量 angular中的解决方案 简单粗暴不进行作用域提升直接--optimization=false;...显然速度会得到指数提升,同样的代码体积也是暴涨,也有一定的应用场景就是写一个git提交检验时可以使用这一脚本进行配置。

87420
  • angular 2+组件 - 框架 - 集成 - 构建文档 - ckeditor5中文文档

    目前,Angular的CKEditor 5组件仅支持通过构建集成CKEditor 5。 由于缺乏在angular-cli中调整webpack配置的能力,因此无法集成从源构建的CKEditor 5。..." (ready)="onReady($event)"> ngModel整合 该组件实现ControlValueAccessor接口并与ngModel一起使用。...包含编辑器和CKEditor 5失去焦点事件数据的对象一起使用。 focus 聚焦编辑器的编辑视图时触发。 它与editor.editing.view.document#focus事件相对应。...包含编辑器和CKEditor 5focus事件数据的对象一起使用。 样式 Angular的CKEditor 5组件可以使用组件样式表或使用全局样式表进行样式设置。...加载翻译文件 首先,您需要将转换文件添加到捆绑包中。

    3.5K20

    Angular开发实践(二):HRM运行机制

    引言 在angular-start项目中启用了模块热替换(HMR - Hot Module Replacement)功能,关于如何在angular-cli启用HRM,请查看HRM配置 那HMR是个什么东西呢...HMR是webpack提供的一个功能,angular-cli使用了它,它会在应用程序运行过程中替换、添加或删除模块,而无需重新加载整个页面。...通常将这些ID存储在内存中(例如,使用webpack-dev-server时),但是也可能将它们存储在一个JSON文件中。 在模块中 HMR是可选功能,只会影响包含HMR代码的模块。...为了运行追加补丁,style-loader实现了HMR接口;当它通过HMR接收到更新,它会使用新的样式替换旧的样式。 类似的,当在一个模块中实现了HMR接口,你可以描述出当模块被更新后发生了什么。...对于每个无效模块,都需要在模块中有一个更新处理函数,或者在它的父模块们中有更新处理函数。否则,无效标记冒泡,并也使父无效。

    1.7K70

    webpack 热更新(HMR)实现原理

    优点: 代码文件修改到页面内容更新,自动完成 兼容目前市面上主流的开发框架 :react,vue,angular2,如使用angular-cli创建ng项目通过@ngtools/webpack已经内置了...webpack 相比location.reload() 更新方式,不需要刷新页面,可以保存应用的当前状态 HMR相关的中间件 webpack-dev-middleware 本质上是一个容器,将webpack...webpack-hot-middleware 核心是给webpack提高服务端和客户端之间的通信机制,内部使用windoe.EventSocurce实现。...HMR的工作原理 [图片] webpack --watch启动监听模式之后,webpack第一次编译项目,并将结果存储在内存文件系统,相比较磁盘文件读写方式内存文件管理速度更快,内存webpack服务器通知浏览器加载资源...Webpack HMR 原理解析 从零实现webpack热更新HMR

    3.2K20

    Vue学习路线图

    相比Angular.js来说,Vue的核心库只关注视图层,不仅易于上手,还便于第三方库或既有项目整合,是初创项目的前端首选框架。...相比Angular.js和React.js而言,Vue.js一直以轻量级、易上手而被人称道。...不过,如果你选择使用现代 JavaScript,就需要提供一种支持旧版浏览器的方法,否则你的产品可能无法为大多数用户提供服务。 要实现这一目的,您可以使用 Babel。...WebPack Webpack 是模块捆绑器,如果你的代码跨越了不同模块(例如不同的 JavaScript 文件),Webpack 可以将这些零散的代码“构建”到浏览器可读的单个文件中。...很多开发人员觉得 Webpack 难以掌握,配置起来也很麻烦,但如果没有它,将无法使用 Vue 的一些有用的功能(如单文件组件)。

    5.7K20

    走近webpack(0)--正文之前的故事

    在前端工作的过程中,只要你接触过vue,angular,react,gulp就一定知道webpack或者听说过或者使用webpack,但是或许你对webpack使用方法并不是十分了解,只是会用写好的构建项目如...:vue-cli,angular-cli等,那么这一系列的文章就是带你一点点走近webpack,真正弄懂webpack到底可以做什么,怎么做。   ...但是你会发现,所有的文档甚至官方说明都不推荐全局安装webpack,因为全局安装会把webpack锁定到指定的版本,无法自由的根据情况去选择webpack版本,也有可能你从git上clone的webpack...版本你本地安装的版本不同,会产生意想不到的问题。   ...OK,至此,我们的webpack就已经安装成功了。当前的webpack版本已经到了4.1.1,咱们暂时先使用npm install webpack@3.6.0 --save-dev命令。

    70540

    一文带你了解2018年最流行的前端技术

    这种模式在定制框架中重复使用,25.61%的那些拥有CSS专业知识的人表示他们使用自定义框架,而初学者或新手知识的人则只有6.21%说相同的事情。...这些结果中看到的知识水平之间的分歧2016年的结果非常相似。CSS类似,绝大多数受访者认为自己在JavaScript中处于中级或更高水平,超过四分之三(86.85%)的受访者将其评为这一别。...上一次调查相比,受访者认为自己在高级或专家级别的人数略有增加,随后初级或新手级别的受访者人数略有减少。...Vue.js似乎也获得了开发者的大量支持,有17.19%的受访者表示他们觉得使用起来很舒服,比2016年的结果增加了11.71%。 React和Vue.js相比Angular 2+略有减少。...总的来说,使用JS检查的受访者比例上升了8%,达到84.85%。 模块捆绑一样,似乎这个工具领域已经有所解决,而ESLint现在被认为是大多数开发人员的首选工具。

    71530

    前端面试知识点

    和MVC的相同之处在于:Controller/Presenter负责业务逻辑,Model管理数据,View负责显示只不过是将 Controller 改名为 Presenter,同时改变了通信方向。...float属性为img布局 4、解决 ie9 以下浏览器对 html5 新增标签不识别的问题。...缩短页面加载时间 1、减少http请求 2、使用cdn加速 3、添加Expires头 4、将样式css放在头部,脚本script放在底部 5、使用外部的JavaScript和CSS 实现原生ajax的步骤...dispatcher store redux 框架 view store reducer 异步action 如何进行性能优化 虚拟dom react和vue中的diff算法 angular 模块...组件 服务 管道 什么是依赖注入 如何使用路由 参数快照 参数订阅 响应式编程 angular中的模板式表单和响应式表单 如何做表单验证 angular-cli使用方式 如何创建组件 创建服务 创建类

    1.6K10

    2017年前端框架、类库、工具大比拼

    你可以自己实现一个函数,以便选择该函数被调用时是否需要返回一个值。 类库通常提供一种高级别的抽象方法,能够帮助顺利实现项目的细节部分。...例如,Ajax通常依赖于XMLHttpRequest API,只需要几行代码就实现功能,只是浏览器之间存在细微的差异。类库提供了更简单的ajax()函数,因此开发者可以专注于更高级别的业务逻辑上。...学习曲线陡峭 大的代码库 无法升级到Angular 2.x Angular 2.x(现在是Angular 4.x) Angular 类型 框架 网站...缺点: 学习曲线陡峭 大的代码库 不能从Angular 1.x升级 1.x相比Angular 2.x较难理解 React React 类型 框架 网站...虽然Webpack声称是一个模块捆绑程序,但是已经可以用作通用任务运行程序了。

    2.3K10

    走近webpack(0)–正文之前的故事

    在前端工作的过程中,只要你接触过vue,angular,react,gulp就一定知道webpack或者听说过或者使用webpack,但是或许你对webpack使用方法并不是十分了解,只是会用写好的构建项目如...:vue-cli,angular-cli等,那么这一系列的文章就是带你一点点走近webpack,真正弄懂webpack到底可以做什么,怎么做。   ...但是你会发现,所有的文档甚至官方说明都不推荐全局安装webpack,因为全局安装会把webpack锁定到指定的版本,无法自由的根据情况去选择webpack版本,也有可能你从git上clone的webpack...版本你本地安装的版本不同,会产生意想不到的问题。   ...OK,至此,我们的webpack就已经安装成功了。当前的webpack版本已经到了4.1.1,咱们暂时先使用npm install webpack@3.6.0 –save-dev命令。

    25310

    Vue相关的前端面试题,每道题都很经典~

    答案详解 Q 说说Vue和Angular、ReactJS的相同点和不同点 React的相同: ●都使用了Virtual DOM ●提供了响应式和组件化的视图组件 ●将注意力集中保持在核心库,而将其他功能如路由和全局状态管理交给相关的库...Angular相同: Vue早起的灵感是来源于Angular,所以很多语法是类似的,如v-if和ng-if。...Angular的区别: ●Angular 1对比,Vue的性能更加优越,Angular性能会随着watcher的增加而变慢,而且Angular中一些watcher会出触发另一个更新,使得“脏检查循环...●Vue的体积更小,一个包含了 vuex + vue-router 的 Vue 项目 (30kb gzipped) 相比使用了这些优化angular-cli 生成的默认项目尺寸 (~130kb) 还是要小的多...来自vue官网 Q 非父子层级的组件如何实现通信? 简单的应用场景下,可以使用一个空的Vue实例作为中央事件总线。

    11.1K30

    vue.js与其他前端框架的对比

    当然,这可以通过shouldComponentUpdate这个生命周期方法来进行控制,但Vue将此视为默认的优化。 组件化 ReactVue都鼓励组件化应用。...但即使如此,一个包含了 Vuex + Vue Router 的 Vue 项目 (30kb gzipped) 相比使用了这些优化angular-cli 生成的默认项目尺寸 (~130kb) 还是要小的多...不过就算有这么多好处,但是相比Angular2,Vue还是有很多的不足: Angular2原生Form支持: Angular2原生的Form模块功能相当强大。...(如,在desktop和mobile有不同功能,可以通过注入不同service实现,而共用相同的template和directive)。Vue则需要程序员自己规划代码组织,用来支持共享组件。...而在这方面,Vue 可以结合异步组件的特性和 Webpack 的代码分割特性来实现懒加载 (lazy-loaded)。这同时确保了对旧浏览器的兼容且又能更快加载。

    4.2K80

    Vuejs和其他前端框架的对比

    当然,这可以通过shouldComponentUpdate这个生命周期方法来进行控制,但Vue将此视为默认的优化。 组件化 ReactVue都鼓励组件化应用。...但即使如此,一个包含了 Vuex + Vue Router 的 Vue 项目 (30kb gzipped) 相比使用了这些优化angular-cli 生成的默认项目尺寸 (~130kb) 还是要小的多...不过就算有这么多好处,但是相比Angular2,Vue还是有很多的不足: Angular2原生Form支持: Angular2原生的Form模块功能相当强大。...(如,在desktop和mobile有不同功能,可以通过注入不同service实现,而共用相同的template和directive)。Vue则需要程序员自己规划代码组织,用来支持共享组件。...而在这方面,Vue 可以结合异步组件的特性和 Webpack 的代码分割特性来实现懒加载 (lazy-loaded)。这同时确保了对旧浏览器的兼容且又能更快加载。

    3.8K110

    2020 年的 JavaScript 后起之秀

    由 ES 模块提供支持,这是从命令行开始使用 Vue.js 应用程序的最快方法。 Angular 生态 排名前 5 位的 Angular 项目去年基本相同,除了排名第三的新竞争者。...Angular 在 2020 年发布了三个主要版本。 Angular 9 于 2 月发布。主要变化是移至 Ivy 编译器,该编译器带来了更小的捆绑包大小和许多其他构建改进。...Angular 11 正式发布:加入 webpack 5,升级至 TS 4.0,不再支持 IE 9 和 10 下半年,Angular 团队的主要重点是听取社区意见。...Webpack 仍然是实际的构建工具,其新的缓存层可以显着提高构建性能。 Monorepos 成为主流:Yarn 和 Lerna 被广泛使用,支持 npm 7。...更传统的 CSS 框架(如 Bootstrap 或 Bulma)相比,它提供了命名约定,使开发人员可以通过编写类名来设置页面和组件的样式。

    2.4K20
    领券