ホームページ  >  記事  >  ウェブフロントエンド  >  Angular10 で Webpack パッケージを構成するにはどうすればよいですか?手法の紹介

Angular10 で Webpack パッケージを構成するにはどうすればよいですか?手法の紹介

青灯夜游
青灯夜游転載
2021-04-12 10:36:222405ブラウズ

この記事では、Angular10 で Webpack パッケージ化を構成する方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

Angular10 で Webpack パッケージを構成するにはどうすればよいですか?手法の紹介

Angular プロジェクトでは、angular-cli を使用してパッケージ化されたプロジェクトを作成することをお勧めします。Angular はデフォルトで構成に役立ちます。 ただし、特別なニーズがある場合には、明らかに柔軟性が高くありません。たとえば、いくつかの大きなパッケージング ファイルを分割し、各パッケージング ファイルの構成を分析し、webpack のいくつかのパラメータをカスタマイズしたい場合、次のような方法がありません。始める。 多くのプロジェクトに共通する依存関係は、日付ライブラリ moment.js です。これにはロケールを使用する機能も含まれますが、バンドル全体のサイズが大幅に増加します。これらはすべて最適化する必要がある領域です。

1. ngx-build-plus は追加の構成を作成します


推奨されるツール ライブラリは次のとおりですngx-build-plus ではなく、多くのことを変更したり、既存のプロジェクトに統合したりできます。次に使い方を説明しますが、具体的な詳細についてはgithubにあるドキュメントを参照してください。公式ドキュメントには利用可能なバージョンは 9 としか記載されていませんが、Angular 10 も使用できます。

1. CLI を使用して新しい Angular プロジェクトを作成します

Angular10 プロジェクトを最初から構築します

2. ngx-build-plus を追加します: ng add ngx-build-plus

: projects フォルダー内の特定のサブプロジェクトに追加する場合は、次のようにしてください。 --project スイッチを使用してそれを指します: ng add ngx-build-plus --project Getting-started

Remark:このステップでは、Angular >= 7 および CLI >= 7 バージョンの NPM インストール パッケージを渡します。プロジェクトでカスタム ジェネレーターを使用して、angular.jsonngserve および ng build# # を更新します。 #。ただし、バージョン 6 ではインストールが成功しない可能性があります。この場合は、yarn ngx-build-plus --dev を直接追加し、angular.json 内の次の 2 つの場所を変更してください。 ファイル:

 "build": {
   - "builder": "@angular-devkit/build-angular:browser"
   + "builder": "ngx-build-plus:build"
   ...
 },
 "serve": {
  - "builder": "@angular-devkit/build-angular:dev-server"
   + "builder": "ngx-build-plus:dev-server"
   ...
 }
推奨される関連チュートリアル: "

angular チュートリアル"

3. ファイル

webpack.partial.js を作成し、次の内容を追加します(サブ) プロジェクトのルート ディレクトリ:
  const webpack = require('webpack');
  
  module.exports = {
      plugins: [
          new webpack.DefinePlugin({
              "VERSION": JSON.stringify("4711")
          })
      ]
  }

4.

app.component.ts でグローバル変数 VERSION を使用します:
  import { Component } from '@angular/core';
  
  declare const VERSION: string;
  
  @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
  })
  export class AppComponent {
      title = 'Version: ' + VERSION;
  }

5.

を使用します。 --extra-webpack -config アプリケーションを開始するための Webpack 構成の一部を指すスイッチ:
ng serve --extra-webpack-config webpack.partial.js -o

プロジェクトが CLI ベースのサブプロジェクトの場合は、その

-- project switch:

ng serve --project getting-started -o --extra-webpack-config webpack.partial.js

ヒント: このコマンド用の npm スクリプトの作成を検討してください。

6. Webpack 設定によって提供されるバージョンが表示されていることを確認してください。

印刷結果が表示された場合は、プロジェクトで Angular10 で Webpack パッケージを構成するにはどうすればよいですか?手法の紹介webpack.partial.js ファイルの構成が有効になったことを意味します。 .js には必要な機能が追加されていますが、筆者は主に 2 つの主要な部分に焦点を当てました。

パッケージ化されたファイルを分析するために BundleAnalyzerPlugin を追加します
  1. サードパーティ ライブラリ モジュールの分離最適化 SplitChunks、より大きなファイルを分割します
  2. 以下で説明します

2. webpack-bundle-analyzer パッケージ ファイル分析ツール

##1. インストール

#
$ yarn add  webpack-bundle-analyzer --dev

2. Configuration

webpack.partial.js

#3 の文 module.exports = webpackConfig の上に <pre class="brush:php;toolbar:false">const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin module.exports = {   plugins: [     new BundleAnalyzerPlugin({       analyzerMode: 'static',     }),     new webpack.DefinePlugin({       &quot;VERSION&quot;: JSON.stringify(&quot;4711&quot;)     })   ] }</pre>## を追加します。

#サービスの開始:

実稼働環境の表示:npm run build --report

または通常のビルドでビューアを開始

開発環境ビュー:

webpack -p --progress または、通常の devServer サービスを開始してビューアを開始します!

4. 結果

5. このプラグインのデフォルト設定

Angular10 で Webpack パッケージを構成するにはどうすればよいですか?手法の紹介

new BundleAnalyzerPlugin({
      // openAnalyzer: true,
      // reportFilename: path.join(__dirname, 'report.html')
      //  可以是`server`,`static`或`disabled`。
      //  在`server`模式下,分析器将启动HTTP服务器来显示软件包报告。
      //  在“静态”模式下,会生成带有报告的单个HTML文件。
      //  在`disabled`模式下,你可以使用这个插件来将`generateStatsFile`设置为`true`来生成Webpack Stats JSON文件。
      analyzerMode: 'static',
      //  将在“服务器”模式下使用的主机启动HTTP服务器。
      // analyzerHost: '127.0.0.1',
      //  将在“服务器”模式下使用的端口启动HTTP服务器。
      // analyzerPort: 8888,
      //  路径捆绑,将在`static`模式下生成的报告文件。
      //  相对于捆绑输出目录。
      // reportFilename: 'report.html',
      //  模块大小默认显示在报告中。
      //  应该是`stat`,`parsed`或者`gzip`中的一个。
      //  有关更多信息,请参见“定义”一节。
      // defaultSizes: 'parsed',
      //  在默认浏览器中自动打开报告
      // openAnalyzer: true,
      //  如果为true,则Webpack Stats JSON文件将在bundle输出目录中生成
      // generateStatsFile: false,
      //  如果`generateStatsFile`为`true`,将会生成Webpack Stats JSON文件的名字。
      //  相对于捆绑输出目录。
      // statsFilename: 'stats.json',
      //  stats.toJson()方法的选项。
      //  例如,您可以使用`source:false`选项排除统计文件中模块的来源。
      //  在这里查看更多选项:https:  //github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21
      // statsOptions: null,
      // logLevel: 'info' // 日志级别。可以是'信息','警告','错误'或'沉默'。
    }),

モジュール関数: ファイルをパッケージ化して圧縮した後、ファイルを表示できます。コンテンツを確認し、どのモジュールが最大のサイズを構成しているかを調べ、間違ったモジュールを見つけて最適化します。最も優れているのは、縮小バンドルをサポートしていることです。それらを解析して、バンドルされたモジュールの実際のサイズを取得します。 gzip 圧縮されたサイズも表示されます。

三、使用webpack把第三方库模块分离 - optimization + splitChunks


在 webpack4.x 中,我们使用 optimization.splitChunks 来分离公用的代码块。SplitChunks插件简单的来说就是Webpack中一个提取或分离代码的插件,主要作用是提取公共代码,防止代码被重复打包,拆分过大的js文件,合并零散的js文件。

这里说的分离,当然只是针对一些第三方库(一般来自 node_modules),以及我们自己定义的工具库(或公用方法)。

不知如何下手?首先,我们来看官网给的一份

1. 默认配置:

splitChunks: {
    chunks: "async",
    minSize: 30000,
    minChunks: 1,
    maxAsyncRequests: 5,
    maxInitialRequests: 3,
    automaticNameDelimiter: '~',
    name: true,
    cacheGroups: {
        vendors: {
            test: /[\\/]node_modules[\\/]/,
            priority: -10
        },
    default: {
            minChunks: 2,
            priority: -20,
            reuseExistingChunk: true
        }
    }
}

接着,我们再来看下它们的含义:

  • chunks: 该属性值的数据类型可以是 字符串 或者 函数。如果是字符串,那它的值可能为 initial | async | all 三者之一。默认值的数据类型为 字符串,默认值为 async,但推荐用 all。它表示将哪种类型的模块分离成新文件。字符串参数值的作用分别如下:

    • initial:表示对异步引入的模块不处理
    • async:表示只处理异步模块
    • all:无论同步还是异步,都会处理
  • minSize: 该属性值的数据类型为数字。它表示将引用模块分离成新代码文件的最小体积,默认为 30000,单位为字节,即 30K(指min+gzip之前的体积)。这里的 30K 应该是最佳实践,因为如果引用模块小于 30K 就分离成一个新代码文件,那页面打开时,势必会多增加一个请求。

  • maxSize: 把提取出来的模块打包生成的文件大小不能超过maxSize值,如果超过了,要对其进行分割并打包生成新的文件。单位为字节,默认为0,表示不限制大小。

  • minChunks: 该属性值的数据类型为数字。它表示将引用模块如不同文件引用了多少次,才能分离生成新代码文件。默认值为 1

  • maxAsyncRequests: 该属性值的数据类型为数字,默认值为 5。它表示按需加载最大的并行请求数,针对异步。

  • maxInitialRequests: 该属性值的数据类型为数字,默认值为 3。它表示单个入口文件最大的并行请求数,针对同步。

  • automaticNameDelimiter: 该属性值的数据类型为字符串,默认值为。它表示分离后生成新代码文件名称的链接符,比如说 app1.js 和 app2.js 都引用了 utils.js 这个工具库,那么,最后打包后分离生成的公用文件名可能是 xxapp1~app2.js 这样的,即以 ~ 符号连接。

  • name: 该属性值的数据类型可以是 布尔值 或者 函数(返回值为字符串),其中布尔值得为 true,此时,分离文件后生成的文件名将基于 cacheGroups 和 automaticNameDelimiter。如果设置为 false,则不会进行模块分离。

  • cacheGroups: 该属性值的数据类型为对象,它的值可以继承 splitChunks.* 中的内容。如果 cacheGroups存在与 splitChunks.* 同名的属性,则 cacheGroups 的属性值则直接覆盖 splitChunks.* 中设置的值。

  • test: 该属性值的数据类型可以为 字符串 或 正则表达式,它规定了哪些文件目录的模块可以被分离生成新文件。

  • priority: 该属性值的数据类型可以为数字,默认值为 0。它表示打包分离文件的优先

  • reuseExistingChunk: 该属性值的数据类型可以为布尔值。它表示针对已经分离的模块,不再重新分离。

2.分离第三方库

要将第三方库分离出来,我们需要调整配置文件,设置 chunks: 'all',即表示让所有加载类型的模块在某些条件下都能打包。

3.分离工具函数

打包中,我们发现,工具函数模块(utils)的源码被分别打包到了两个文件中,这显然是不对。之所以出现这种情况,是因为我们设置了 minSize: 30000,即分离成独立文件的最小体积为 30K,而这里的 工具函数(utils.js)只有几KB,所以,没被分离成单独的文件。

4.第三方库合并打包并重命名

有的时候,我们希望将所有来自 node_modules 的第三方库都打包到同一个文件中。显然,上面的打包配置并没有满足这个条件。并且,我们还希望可以对打包后的文件名进行重命名。

要完成,只需要在 cacheGroups 设置 name 属性即可。这里,笔者还把项目中使用到的momenthandsontableangular库单独分离出来了。

// webpack.config.js
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      name: true,
      cacheGroups: {
        moment: {
          name: 'moment',
          test: /[\\/]node_modules[\\/]moment[\\/]/,
          priority: -6						// 两个cacheGroup.priority相同时,先定义的会先命中
        },
        handsontable: {
          name: 'handsontable',
          test: /[\\/]node_modules[\\/]handsontable[\\/]/,
          priority: -7
        },
        angular: {
          name: 'angular',
          test: /[\\/]node_modules[\\/]@angular[\\/]/,
          priority: -9
        },
       vendors: {
          name: 'vendors',
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          name: 'default',
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }
}

5.SplitChunks插件配置选项

  • chunks选项,决定要提取那些模块。

    默认是async:只提取异步加载的模块出来打包到一个文件中。 异步加载的模块:通过import('xxx')require(['xxx'],() =>{})加载的模块。

    initial:提取同步加载和异步加载模块,如果xxx在项目中异步加载了,也同步加载了,那么xxx这个模块会被提取两次,分别打包到不同的文件中。 同步加载的模块:通过 import xxxrequire('xxx')加载的模块。

    all:不管异步加载还是同步加载的模块都提取出来,打包到一个文件中。

  • minSize选项:规定被提取的模块在压缩前的大小最小值,单位为字节,默认为30000,只有超过了30000字节才会被提取。

  • maxSize选项:把提取出来的模块打包生成的文件大小不能超过maxSize值,如果超过了,要对其进行分割并打包生成新的文件。单位为字节,默认为0,表示不限制大小。

  • minChunks选项:表示要被提取的模块最小被引用次数,引用次数超过或等于minChunks值,才能被提取。

  • maxAsyncRequests选项:最大的按需(异步)加载次数,默认为 6。

  • maxInitialRequests选项:打包后的入口文件加载时,还能同时加载js文件的数量(包括入口文件),默认为4。

  • 先说一下优先级 maxInitialRequests / maxAsyncRequests maxSizeminSize。

  • automaticNameDelimiter选项:打包生成的js文件名的分割符,默认为~

  • name选项:打包生成js文件的名称。

  • cacheGroups选项,核心重点,配置提取模块的方案。里面每一项代表一个提取模块的方案。下面是cacheGroups每项中特有的选项,其余选项和外面一致,若cacheGroups每项中有,就按配置的,没有就使用外面配置的。

  • test选项:用来匹配要提取的模块的资源路径或名称。值是正则或函数。

  • priority选项:方案的优先级,值越大表示提取模块时优先采用此方案。默认值为0。

  • reuseExistingChunk选项:true/false。为true时,如果当前要提取的模块,在已经在打包生成的js文件中存在,则将重用该模块,而不是把当前要提取的模块打包生成新的js文件。

  • enforce选项:true/false。为true时,忽略minSizeminChunksmaxAsyncRequestsmaxInitialRequests外面选项

四、HtmlWebpackPlugin


HtmlWebpackPlugin简化了HTML文件的创建,以便为你的webpack包提供服务。这对于在文件名中包含每次会随着编译而发生变化哈希的 webpack bundle 尤其有用。 你可以让插件为你生成一个HTML文件,这个插件有两个重要作用。

  1. 创建HTML页面文件到你的输出目录
  2. 将webpack打包后的chunk自动引入到这个HTML中

1.安装

npm install --save-dev html-webpack-plugin

使用yarn

yarn add --dev html-webpack-plugin

2.基本用法

该插件将为你生成一个 HTML5 文件, 其中包括使用 script 标签的 body 中的所有 webpack 包。 只需添加插件到你的 webpack 配置如下:

const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      "VERSION": JSON.stringify("4711")
    }),
    new HtmlWebpackPlugin({
      filename: 'index.html',												 // 根据模板文件生成的html的文件名
      template: path.join(__dirname, 'src/index.html'), 
      chunksSortMode: 'manual',
      chunks: ['styles', 'runtime', 'polyfills', 'scripts', 'vendors', 'main']
    })
  ]
}

这将会产生一个包含以下内容的文件 dist/index.html

nbsp;html>


  <meta>
  <meta>
  <meta>
  <meta>
  <meta>
  <meta>
  <meta>
  <meta>
  <title>test</title>
  <base>
  <link>
  <link>


<app-root></app-root>
<div>
  <div>
    <div></div>
  </div>
</div>
<script></script>
<script></script>
<script></script>
<script></script>
<script></script>
<script></script>
<script></script>

如果你有多个 webpack 入口点, 他们都会在生成的HTML文件中的 script 标签内。

需要注意的是,默认angular-cli打包生成的入口文件也被配置成了index.html,所以我们需要更改angular.jaon文件中的配置。并且,由于Angular单页面应用的入口文件为main.ts 所以!chunks配置中,main 一定一定要放在最后,否则运行会出错,笔者因为没有放在最后找了一晚上的bug~~

Angular10 で Webpack パッケージを構成するにはどうすればよいですか?手法の紹介

改为:

Angular10 で Webpack パッケージを構成するにはどうすればよいですか?手法の紹介

3.HtmlWebpackPlugin插件配置选项

您可以将配置选项的哈希值传递给html-webpack-plugin。允许的值如下:

#名前タイプデフォルト説明#filename です。ここでサブディレクトリを指定できます (例: template テンプレートへの相対パスまたは絶対パス。デフォルトでは、(templateContenttemplate独自のテンプレートの作成」#templateParametersfalseExample# を参照してください。 publicPath {'ブロック', 'defer'}最新のブラウザでは、ページの起動を改善するためにノンブロッキング JavaScript の読み込み (`` タグの挿入を許可します。例: basefalse##minifytrue を参照してください。 ##{ブール値}falsetrueエラーの詳細は HTML ページに書き込まれますchunks#?##一部のブロックのみ (たとえば、単体テスト ブロックのみ) を追加できます{ブール値}falsetruelink
##title##{文字列} Webpack アプリ タイトル生成された HTML ドキュメントに使用する
{String} 'index.html' HTML を書き込むファイル。デフォルトは index.htmlassets/admin.html)
{String} `` webpacksrc/index.ejs (存在する場合)) が使用されます。詳細については、Documentation を参照してください。
##{string, Function, false} false の代わりに使用して、インライン テンプレートを提供できます。「 セクションをお読みください。
##{ブール値、オブジェクト、関数} テンプレートで使用されるパラメーターをオーバーライドできるようにします - inject
##{ブール値、文字列}true `true
{String,'auto'}'auto' スクリプトとリンク タグの publicPath #scriptLoading
##'blocking''defer') がサポートされています。パフォーマンス。 #ファビコン ##{文字列}
指定されたアイコン アイコン パスを出力 HTML meta { オブジェクト} に追加します。
{}metameta: {viewport: 'width=device-width、initial-scale=1、shrink-to-fit=no'} {オブジェクト、文字列、false}
インジェクションベース タグ。たとえば、base: "https://example.com/path/page.html {ブール値、オブジェクト}
mode'production' の場合、それ以外の場合false 出力を最小化するかどうか、およびその方法を制御します。詳細については、以下の Minify ハッシュ
はいの場合、true含まれるすべてのスクリプトと CSS ファイルに一意の webpack コンパイル ハッシュを追加します。これはキャッシュをクリアするのに役立ちます cache {ブール値}
ファイルを出力 showErrors {Boolean}## ファイルが変更された場合のみ #true
{?}
chunksSortMode ##{String, Function} auto 次の制御を許可しますHTML に含める前にブロックをどのように並べ替える必要があるか。許可される値は「none」です
excludeChunks {Array.<string>}</string> `` を使用すると、一部のチャンクをスキップできます (単体テスト ブロックを追加せずになど)
xhtml If
タグを自動終了タグとしてレンダリングします (XHTML 準拠)

最后奉上完整的webpack.partial.js

const webpack = require('webpack')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')

module.exports = {
  externals: {        // 打包除外的文件
    echarts: 'echarts'
  },
  optimization: {
    splitChunks: {
      chunks: "all",
      minSize: 20000,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      name: true,
      cacheGroups: {
        moment: {
          name: 'moment',
          test: /[\\/]node_modules[\\/]moment[\\/]/,
          priority: -6
        },
        handsontable: {
          name: 'handsontable',
          test: /[\\/]node_modules[\\/]handsontable[\\/]/,
          priority: -7
        },
        angular: {
          name: 'angular',
          test: /[\\/]node_modules[\\/]@angular[\\/]/,
          priority: -9
        },
        vendors: {
          name: 'vendors',
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          name: 'default',
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  },
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'static',
    }),
    new webpack.DefinePlugin({
      "VERSION": JSON.stringify("4711")
    }),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: path.join(__dirname, 'src/index.html'),
      chunksSortMode: 'manual',
      chunks: ['styles', 'runtime', 'polyfills', 'scripts', 'vendors', 'main']      // 限定顺序,main.js必须在最后
    })
  ]
}

希望大家打包顺利,项目运行快快滴。

demo地址:
https://github.com/qinqing3761/webpack-build-demo

更多编程相关知识,请访问:编程入门!!

以上がAngular10 で Webpack パッケージを構成するにはどうすればよいですか?手法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事はjuejin.cnで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。