web-dev-qa-db-ja.com

PURGECSをAngular CLIプロジェクトで統合する方法

Angular CLIで作成されたAngularプロジェクトがありますので、ビルドを設定するためのangular.jsonファイルがあります。

私たちのCSSバンドルのサイズを減らすための素晴らしいツールのように思われるので、私はPurgecsを統合したいと思いました。

Purgecss Webサイト 、WebPackと統合する方法を説明します。追加する方法を説明するチュートリアルが見つかりました Angular CLI 。

Angular CLIプロジェクトと統合されたPurgecsの正常な例を持っていましたか？

angularwebpackangular-clicss-purge
10
Tonio

この設定は私にとって機能し、私の126kbから34kbからstyles.[hash].cssまでの生産ビルドの結果を与えます。

まず、これをインストールします。

npm install -D @angular-builders/custom-webpack purgecss-webpack-plugin

次に、プロジェクトのルートにwebpack.config.jsを作成します。

const glob = require('glob');
const PurgeCSSPlugin = require('purgecss-webpack-plugin');

module.exports = {
  plugins: [
    new PurgeCSSPlugin({ paths: glob.sync('./src/**/*.html', { nodir: true }) })
  ]
};

そして、次のようにangular.json構成を編集します。

"architect": {
   "build": {
     "builder": "@angular-builders/custom-webpack:browser",
       "options": {
         "customWebpackConfig": {
           "path": "webpack.config.js"
         },
         ...

このプラグインのない私の結果：

styles.ca3c7399cc89e60cfa2d.css   | styles        | 128.99 kB

そして今purgecss-webpack-pluginと一緒に：

styles.ca3c7399cc89e60cfa2d.css   | styles        |  34.46 kB

私がこの出力を見たとき最初にこれは私がブラウザで私のアプリをチェックし、すべてのスタイルが適切に含まれていた:-)になっています。

angularコンポーネントであれば、これはインライン化されたHTMLでは機能しないということです。

1
Jan Kuri