如何捆绑Angular应用进行生产？(1)

📌 相关文章

📜 如何捆绑Angular应用进行生产？(1)

📅 最后修改于: 2023-12-03 15:38:47.648000 🧑 作者: Mango

如何捆绑Angular应用进行生产？

在开发 Angular 应用时，需要将代码捆绑并压缩为一个或多个文件，以便在生产环境中运行。本文介绍如何使用 Angular CLI 和 Webpack 来进行应用程序捆绑。

使用 Angular CLI 进行应用程序捆绑

Angular CLI 已经集成了 Webpack，可以帮助开发者在几秒钟内生成应用程序捆绑。

创建构建版本

可以使用以下命令生成构建版本：

ng build --prod

该命令将捆绑并压缩应用程序代码，并将其输出到 dist 文件夹中。

优化应用程序捆绑

除了使用 ng build --prod 命令，还可以在 angular.json 文件中配置许多其他选项来优化项目的构建版本。例如，可以使用以下配置来最小化构建版本的大小：

"configurations": {
  "production": {
    "optimization": true,
    "outputHashing": "all",
    "sourceMap": false,
    "extractCss": true,
    "namedChunks": false,
    "aot": true,
    "extractLicenses": true,
    "vendorChunk": false,
    "buildOptimizer": true
  }
}

使用 Webpack 进行应用程序捆绑

可以使用 Webpack 从头开始构建 Angular 应用程序捆绑。以下是实现此操作的步骤：

安装 Webpack：

npm install webpack --save-dev

创建一个 webpack.config.js 文件，并添加以下内容：

module.exports = {
  entry: './src/main.ts',
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.ts', '.js']
  },
  output: {
    filename: 'bundle.js'
  }
};

编写 main.ts 文件：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

将 index.html 文件包含 bundle.js：

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Angular App</title>
</head>
<body>
  <my-app>Loading...</my-app>
  <script src="bundle.js"></script>
</body>
</html>

运行打包命令：

webpack

结论

无论您选择使用 Angular CLI 还是 Webpack 进行应用程序捆绑，都应该始终确保您的代码是密封的，并针对生产部署进行了优化。