Angular项目打包体积分析

2023-11-21 359 阅读1分钟

安装插件

npm install --save-dev webpack-bundle-analyzer 或者 yarn add -D webpack-bundle-analyzer

修改 `angular.json` 文件，为 `build` 配置添加 `"statsJson": true`，以便生成 webpack stats 文件：

"architect": {
  "build": {
    "configurations": {
      "production": {
        "sourceMap": true,
        "statsJson": true,
        // ...
      }
    }
  }
}

打包

yarn build

分析

npx webpack-bundle-analyzer dist/stats.json

优化vendor.js的大小

比如你项目中使用了exceljs。可以让这个库打包到懒加载中，而不是vendor.js中。

安装库：
- 首先，确保你已经通过 npm 安装了 exceljs 库。
```
npm install exceljs
```

更新代码：

在你的代码中使用动态导入的方式引入 exceljs。例如：

// 在需要使用 exceljs 的地方，使用动态导入
import('exceljs').then((exceljs) => {
  // 使用 exceljs
  const workbook = new exceljs.Workbook();
  // ...
});

配置 Webpack：
- 如果你使用的是 Angular CLI，Webpack 是默认的构建工具。在 tsconfig.app.json 或 angular.json 文件中，确保 module 设置为 "esnext"，以便支持动态导入。
```
"compilerOptions": {
  "module": "esnext",
  // ...
}
```
检查构建结果：
- 在构建完成后，检查生成的文件，确保 exceljs 模块没有被打包到 vendor.js 中。你可以使用 source-map-explorer 工具或类似的工具来分析构建结果，查看模块的分布情况。
```
npx source-map-explorer dist/vendor.js
```