怎么合理拆分Angular项目

这篇“怎么合理拆分Angular项目”文免费云主机、域名章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“怎么合理拆分Angular项目”文章吧。Angular 让人诟病的一点就是打包后体积很大，一不小心 main.js就大的离谱，其实遇到类似的问题，不管是体积大、数据大、还是流量大，就一个思路：拆分。再配合浏览器的缓存机制，能很好的优化项目访问速度。整个项目包括：强依赖库(Angular框架本身)、UI组件库及第三方库、业务代码部分；用户行为维度：用户的所有访问基于路由，一个路由一个页面；从以上两点可以进行拆分，基于第 1 点可以把强依赖库和几乎不会变动的库打包成一个 vendor_library，里面可以包含@angular/common、@angular/core、@angular/forms、@angular/router等类似的包，UI组件库或lodash这类库不建议一起打包，因为我们要运用 TreeShaking ，没必要把不用的代码也打包进来，否则只会增加体积。强依赖包搞定了，下面基于第 2 点思路打包业务代码。我们使用基于路由的 code spliting来打包。思路很简单，用户访问哪个页面，就把该页面对应的 js 下载下来，没必要把没访问的页面一起打包，那样不仅造成体积增大，还会增加下载时间，用户体验也会随之变差。我们要想使用 DLL 将强依赖包打进一个 vendor 里就要使用 webpack 的功能，Angular CLI 中已经内嵌了 webpack，但这些配置对我们来说是黑盒子。Angular 允许我们自定义 webpack 配置，步骤如下安装@angular-builders/custom-webpack和@angular-devkit/build-angular新建一个 webpack.extra.config.ts 用于 webpack 配置在 angular.json 中做如下修改可以自定义 webpack 配置后，新建 webpack.dll.js 文件来写 DLL 的配置：然后在 webpack.extra.config.ts 中进行 dll 引入最后在 package.json 中添加一条打包 dll 的命令："dll": "rm -rf dll && webpack --config webpack.dll.js"，执行 npm run dll后在项目根部就会有 dll 的文件夹，里面就是打包的内容：打包完成后，我们要在项目中使用 vendor.dll.js，在 angular.json 中进行配置：打包后可以看到讲 vendor_library.js 已经引入进来了：DLL 的用处是将不会频繁更新的强依赖包打包合并为一个 js 文件，一般用于打包 Angular 框架本身的东西。用户第一次访问时浏览器会下载 vendor_library.js并会将其缓存，以后每次访问直接从缓存里拿，浏览器只会下载业务代码的 js 而不会再下载框架相关的代码，大大提升应用加载速度，提升用户体验。ps: vendor_library 后面的 hash 只有打包时里面代码有变动才会重新改变 hash，否则不会变。DLL 把框架部分的代码管理好了，下面我们看看如何在 Angular 中实现路由级别的页面按需加载。这里打个岔，在 React 或 Vue 中，是如何做路由级别代码拆分的？大概是这样：这里的 home 指向的是对应的 component，但在 Angular 中无法使用这种方式，只能以 module 为单位进行代码拆分：然后在具体的模块中使用路由访问具体的组件：虽然不能直接在 router 中 import() 组件，但 Angular 提供了组件动态导入的功能：这样在路由访问某个页面时，只要让被访问的页面内容使用 import() 配合组件动态导入，不就能达到页面 lazyLoad 的效果了吗？答案是可以的。但是这样会有一个大问题：被 lazyLoad 的组件中，其内容仅仅是当前组件的代码，并不包含引用的其他模块中组件的代码。原因是 Angular 应用由多个模块组成，每个模块中需要的功能可能来自其他模块，比如 A 模块里要用到 table 组件，而 table 需取自于 ng-zorro-antd/table 模块。打包时 Angular 不像 React 或 Vue 可以把当前组件和用到的其他包一起打包，以 React 为例：在 A 组件引入 table 组件，打包时 table 代码会打包到 A 组件中。而 Angular 中，在 A 组件中使用 table 组件时，并且使用 imprt() 对 A 组件进行动态加载，打包出来的 A 组件并不包含 table 的代码， 而是会把 table 代码打包到当前模块中去，如果一个模块中包含多个页面，这么多页面用了不少UI组件，那么打包出来的模块肯定会很大。那么就没有别的方法了吗？答案是有的，那就是把每个页面拆成一个 module，每个页面所用到的其他模块或组件由当前页面对应的模块所承担。上图中 dashboard 作为一个模块，其下有两个页面，分别是 monitor 和 welcomedashboard.module.ts:在模块中使用路由 loadChildren 来 lazyLoad 两个页面模块，现在再看看 WelcomeModule：就是这么简单，就把页面级的 lazyLoad 完成了。当需要使用外部组件时，比如 table 组件，只要在 imports 引入即可：以上就是关于“怎么合理拆分Angular项目”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注云技术行业资讯频道。

相关推荐: vue对象的侦听属性怎么表示

这篇文章主要介绍“vue对象的侦听属性怎么表示”，在日常操作中，相信很多人在vue对象的侦听属性怎么表示问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue对象的侦听属性怎么表示”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！…