在开发 Angular 单页应用（SPA）时，我们通常使用 webpack 进行打包。然而，随着应用规模的增加，打包时间和文件大小也会急剧增加，影响开发效率和用户体验。本文将介绍一些最佳实践，帮助你优化 Angular SPA 应用的 webpack 打包性能。
1. 使用 Tree Shaking
Tree Shaking 是指通过静态分析，剔除未使用的代码，从而减小打包后的文件大小。在 Angular 应用中，我们可以使用 TypeScript 的静态类型检查和 Angular 的依赖注入机制，配合 webpack 的 UglifyJS 插件，实现 Tree Shaking。
首先，确保 TypeScript 配置中开启了 "removeComments": true 和 "noUnusedLocals": true，以及 Angular 应用中使用了 @Injectable() 注解。然后，在 webpack 配置文件中，开启 UglifyJSPlugin 的 mangle 和 compress 选项，如下所示：
-- -------------------- ---- -------
----- -------------- - -----------------------------------
-------------- - -
-- ---
-------- -
--- ----------------
-------------- -
------- -
------------ -----
--------- ---------- ---- ---------- ----------
--
--------- -
------- -----
---------- -----
--------- -----
-
-
--
-
--2. 拆分代码块
拆分代码块是指将应用中的公共代码和第三方库代码，从业务代码中分离出来，形成单独的代码块，以便浏览器缓存和并行加载。在 Angular 应用中，我们可以使用 webpack 的 CommonsChunkPlugin 插件，实现代码块的拆分。
首先，将 Angular 应用中的公共代码，如路由、服务和组件等，提取到单独的模块中，如下所示：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - ------------ - ---- ------------------
------ - ------------ - ---- --------------------------
------ - ------------- - ---- -------------------
------ - -------------- - ---- --------------------
-----------
-------- -
-------------
-------------
-----------------------
- ----- --- ---------- ------------- --
- ----- -------- ---------- -------------- -
--
--
------------- -
--------------
--------------
-
--
------ ----- ---------- --然后，在 webpack 配置文件中，开启 CommonsChunkPlugin 插件，将公共代码和第三方库代码提取到单独的代码块中，如下所示：
-- -------------------- ---- -------
----- ------------------ - ---------------------------------------------------
-------------- - -
-- ---
-------- -
--- --------------------
----- ---------
---------- -------- -- -------------- -- ---------------------------------------
---
--- --------------------
----- -----------
---------- --------
--
-
--3. 压缩图片和字体
压缩图片和字体可以减小文件大小，提高页面加载速度。在 Angular 应用中，我们可以使用 webpack 的 url-loader 和 image-webpack-loader 插件，实现图片和字体的压缩。
首先，将图片和字体文件放置在 src/assets 目录下，并在 Angular 应用中引用它们。然后，在 webpack 配置文件中，配置 url-loader 和 image-webpack-loader 插件，如下所示：
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
----- ---------------------------------------------------
------- -------------
-------- -
------ ------
----- ------------------------------
-
--
-
----- --------------------------------
------- -----------------------
-------- -----
-
-
-
--4. 启用 AOT 编译
启用 AOT 编译可以提高应用的性能和稳定性，减少启动时间和内存占用。在 Angular 应用中，我们可以使用 @ngtools/webpack 插件，实现 AOT 编译。
首先，安装 @ngtools/webpack 插件和 @angular/compiler-cli 包，如下所示：
npm install @ngtools/webpack @angular/compiler-cli --save-dev
然后，在 webpack 配置文件中，使用 @ngtools/webpack 插件替换原有的 ts-loader，并开启 AotPlugin 插件，如下所示：
-- -------------------- ---- -------
----- - --------- - - ----------------------------
-------------- - -
-- ---
------- -
------ -
-
----- --------
------- ------------------
-
-
--
-------- -
--- -----------
------------- ------------------------
------------ ------------------------------
--
-
--总结
通过使用以上最佳实践，我们可以优化 Angular SPA 应用的 webpack 打包性能，提高应用的加载速度和用户体验。当然，这些实践还有许多细节和注意事项，需要根据具体情况进行调整和优化。希望本文能够对你有所帮助。
完整示例代码：https://github.com/xxx/xxx
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658e69cceb4cecbf2d44237f