Force génération cli gz angulaire

Question

J'essaie d'obtenir un dossier dist peuplé avec les fichiers standard + la version .gz d'entre eux. J'ai fait ng eject pour obtenir le fichier webpack.config.js afin que je puisse ajouter le plugin de compression https://github.com/webpack-contrib/compression-webpack-plugin. J'ai ajouté le new CompressPlugin({}) comme le dernier plugin et marqué le ejected: false dans le fichier .angular-cli.json.

Lorsque je lance ensuite ng build, je n'obtiens aucun fichier .gzip/.gz généré.

Y at-il quelque chose qui me manque ou qui ne va pas? Le fichier webpack complet (la plupart du temps généré par ng new est:

const fs = require('fs'); 
const path = require('path'); 
const CopyWebpackPlugin = require('copy-webpack-plugin'); 
const ProgressPlugin = require('webpack/lib/ProgressPlugin'); 
const CircularDependencyPlugin = require('circular-dependency-plugin'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const autoprefixer = require('autoprefixer'); 
const postcssUrl = require('postcss-url'); 
const cssnano = require('cssnano'); 
const CompressionPlugin = require("compression-webpack-plugin"); 

const { NoEmitOnErrorsPlugin, SourceMapDevToolPlugin, NamedModulesPlugin } = require('webpack'); 
const { NamedLazyChunksWebpackPlugin, BaseHrefWebpackPlugin } = require('@angular/cli/plugins/webpack'); 
const { CommonsChunkPlugin } = require('webpack').optimize; 
const { AotPlugin } = require('@ngtools/webpack'); 

const nodeModules = path.join(process.cwd(), 'node_modules'); 
const realNodeModules = fs.realpathSync(nodeModules); 
const genDirNodeModules = path.join(process.cwd(), 'src', '$$_gendir', 'node_modules'); 
const entryPoints = ["inline","polyfills","sw-register","styles","vendor","main"]; 
const minimizeCss = false; 
const baseHref = ""; 
const deployUrl = ""; 
const postcssPlugins = function() { 
     // safe settings based on: https://github.com/ben-eb/cssnano/issues/358#issuecomment-283696193 
     const importantCommentRe = /@preserve|@license|[@#]\s*source(?:Mapping)?URL|^!/i; 
     const minimizeOptions = { 
      autoprefixer: false, 
      safe: true, 
      mergeLonghand: false, 
      discardComments: { remove: (comment) => !importantCommentRe.test(comment) } 
     }; 
     return [ 
      postcssUrl({ 
       url: (URL) => { 
        // Only convert root relative URLs, which CSS-Loader won't process into require(). 
        if (!URL.startsWith('/') || URL.startsWith('//')) { 
         return URL; 
        } 
        if (deployUrl.match(/:\/\//)) { 
         // If deployUrl contains a scheme, ignore baseHref use deployUrl as is. 
         return `${deployUrl.replace(/\/$/, '')}${URL}`; 
        } 
        else if (baseHref.match(/:\/\//)) { 
         // If baseHref contains a scheme, include it as is. 
         return baseHref.replace(/\/$/, '') + 
          `/${deployUrl}/${URL}`.replace(/\/\/+/g, '/'); 
        } 
        else { 
         // Join together base-href, deploy-url and the original URL. 
         // Also dedupe multiple slashes into single ones. 
         return `/${baseHref}/${deployUrl}/${URL}`.replace(/\/\/+/g, '/'); 
        } 
       } 
      }), 
      autoprefixer(), 
     ].concat(minimizeCss ? [cssnano(minimizeOptions)] : []); 
    }; 




module.exports = { 
    "resolve": { 
    "extensions": [ 
     ".ts", 
     ".js" 
    ], 
    "modules": [ 
     "./node_modules", 
     "./node_modules" 
    ], 
    "symlinks": true 
    }, 
    "resolveLoader": { 
    "modules": [ 
     "./node_modules", 
     "./node_modules" 
    ] 
    }, 
    "entry": { 
    "main": [ 
     "./src\\main.ts" 
    ], 
    "polyfills": [ 
     "./src\\polyfills.ts" 
    ], 
    "styles": [ 
     "./src\\styles.css" 
    ] 
    }, 
    "output": { 
    "path": path.join(process.cwd(), "dist"), 
    "filename": "[name].bundle.js", 
    "chunkFilename": "[id].chunk.js" 
    }, 
    "module": { 
    "rules": [ 
     { 
     "enforce": "pre", 
     "test": /\.js$/, 
     "loader": "source-map-loader", 
     "exclude": [ 
      /(\\|\/)node_modules(\\|\/)/ 
     ] 
     }, 
     { 
     "test": /\.html$/, 
     "loader": "raw-loader" 
     }, 
     { 
     "test": /\.(eot|svg|cur)$/, 
     "loader": "file-loader?name=[name].[hash:20].[ext]" 
     }, 
     { 
     "test": /\.(jpg|png|webp|gif|otf|ttf|woff|woff2|ani)$/, 
     "loader": "url-loader?name=[name].[hash:20].[ext]&limit=10000" 
     }, 
     { 
     "exclude": [ 
      path.join(process.cwd(), "src\\styles.css") 
     ], 
     "test": /\.css$/, 
     "use": [ 
      "exports-loader?module.exports.toString()", 
      { 
      "loader": "css-loader", 
      "options": { 
       "sourceMap": false, 
       "importLoaders": 1 
      } 
      }, 
      { 
      "loader": "postcss-loader", 
      "options": { 
       "ident": "postcss", 
       "plugins": postcssPlugins 
      } 
      } 
     ] 
     }, 
     { 
     "exclude": [ 
      path.join(process.cwd(), "src\\styles.css") 
     ], 
     "test": /\.scss$|\.sass$/, 
     "use": [ 
      "exports-loader?module.exports.toString()", 
      { 
      "loader": "css-loader", 
      "options": { 
       "sourceMap": false, 
       "importLoaders": 1 
      } 
      }, 
      { 
      "loader": "postcss-loader", 
      "options": { 
       "ident": "postcss", 
       "plugins": postcssPlugins 
      } 
      }, 
      { 
      "loader": "sass-loader", 
      "options": { 
       "sourceMap": false, 
       "precision": 8, 
       "includePaths": [] 
      } 
      } 
     ] 
     }, 
     { 
     "exclude": [ 
      path.join(process.cwd(), "src\\styles.css") 
     ], 
     "test": /\.less$/, 
     "use": [ 
      "exports-loader?module.exports.toString()", 
      { 
      "loader": "css-loader", 
      "options": { 
       "sourceMap": false, 
       "importLoaders": 1 
      } 
      }, 
      { 
      "loader": "postcss-loader", 
      "options": { 
       "ident": "postcss", 
       "plugins": postcssPlugins 
      } 
      }, 
      { 
      "loader": "less-loader", 
      "options": { 
       "sourceMap": false 
      } 
      } 
     ] 
     }, 
     { 
     "exclude": [ 
      path.join(process.cwd(), "src\\styles.css") 
     ], 
     "test": /\.styl$/, 
     "use": [ 
      "exports-loader?module.exports.toString()", 
      { 
      "loader": "css-loader", 
      "options": { 
       "sourceMap": false, 
       "importLoaders": 1 
      } 
      }, 
      { 
      "loader": "postcss-loader", 
      "options": { 
       "ident": "postcss", 
       "plugins": postcssPlugins 
      } 
      }, 
      { 
      "loader": "stylus-loader", 
      "options": { 
       "sourceMap": false, 
       "paths": [] 
      } 
      } 
     ] 
     }, 
     { 
     "include": [ 
      path.join(process.cwd(), "src\\styles.css") 
     ], 
     "test": /\.css$/, 
     "use": [ 
      "style-loader", 
      { 
      "loader": "css-loader", 
      "options": { 
       "sourceMap": false, 
       "importLoaders": 1 
      } 
      }, 
      { 
      "loader": "postcss-loader", 
      "options": { 
       "ident": "postcss", 
       "plugins": postcssPlugins 
      } 
      } 
     ] 
     }, 
     { 
     "include": [ 
      path.join(process.cwd(), "src\\styles.css") 
     ], 
     "test": /\.scss$|\.sass$/, 
     "use": [ 
      "style-loader", 
      { 
      "loader": "css-loader", 
      "options": { 
       "sourceMap": false, 
       "importLoaders": 1 
      } 
      }, 
      { 
      "loader": "postcss-loader", 
      "options": { 
       "ident": "postcss", 
       "plugins": postcssPlugins 
      } 
      }, 
      { 
      "loader": "sass-loader", 
      "options": { 
       "sourceMap": false, 
       "precision": 8, 
       "includePaths": [] 
      } 
      } 
     ] 
     }, 
     { 
     "include": [ 
      path.join(process.cwd(), "src\\styles.css") 
     ], 
     "test": /\.less$/, 
     "use": [ 
      "style-loader", 
      { 
      "loader": "css-loader", 
      "options": { 
       "sourceMap": false, 
       "importLoaders": 1 
      } 
      }, 
      { 
      "loader": "postcss-loader", 
      "options": { 
       "ident": "postcss", 
       "plugins": postcssPlugins 
      } 
      }, 
      { 
      "loader": "less-loader", 
      "options": { 
       "sourceMap": false 
      } 
      } 
     ] 
     }, 
     { 
     "include": [ 
      path.join(process.cwd(), "src\\styles.css") 
     ], 
     "test": /\.styl$/, 
     "use": [ 
      "style-loader", 
      { 
      "loader": "css-loader", 
      "options": { 
       "sourceMap": false, 
       "importLoaders": 1 
      } 
      }, 
      { 
      "loader": "postcss-loader", 
      "options": { 
       "ident": "postcss", 
       "plugins": postcssPlugins 
      } 
      }, 
      { 
      "loader": "stylus-loader", 
      "options": { 
       "sourceMap": false, 
       "paths": [] 
      } 
      } 
     ] 
     }, 
     { 
     "test": /\.ts$/, 
     "loader": "@ngtools/webpack" 
     } 
    ] 
    }, 
    "plugins": [ 
    new NoEmitOnErrorsPlugin(), 
    new CopyWebpackPlugin([ 
     { 
     "context": "src", 
     "to": "", 
     "from": { 
      "glob": "assets/**/*", 
      "dot": true 
     } 
     }, 
     { 
     "context": "src", 
     "to": "", 
     "from": { 
      "glob": "favicon.ico", 
      "dot": true 
     } 
     } 
    ], { 
     "ignore": [ 
     ".gitkeep" 
     ], 
     "debug": "warning" 
    }), 
    new ProgressPlugin(), 
    new CircularDependencyPlugin({ 
     "exclude": /(\\|\/)node_modules(\\|\/)/, 
     "failOnError": false 
    }), 
    new NamedLazyChunksWebpackPlugin(), 
    new HtmlWebpackPlugin({ 
     "template": "./src\\index.html", 
     "filename": "./index.html", 
     "hash": false, 
     "inject": true, 
     "compile": true, 
     "favicon": false, 
     "minify": false, 
     "cache": true, 
     "showErrors": true, 
     "chunks": "all", 
     "excludeChunks": [], 
     "title": "Webpack App", 
     "xhtml": true, 
     "chunksSortMode": function sort(left, right) { 
     let leftIndex = entryPoints.indexOf(left.names[0]); 
     let rightindex = entryPoints.indexOf(right.names[0]); 
     if (leftIndex > rightindex) { 
      return 1; 
     } 
     else if (leftIndex < rightindex) { 
      return -1; 
     } 
     else { 
      return 0; 
     } 
    } 
    }), 
    new BaseHrefWebpackPlugin({}), 
    new CommonsChunkPlugin({ 
     "name": [ 
     "inline" 
     ], 
     "minChunks": null 
    }), 
    new CommonsChunkPlugin({ 
     "name": [ 
     "vendor" 
     ], 
     "minChunks": (module) => { 
       return module.resource 
        && (module.resource.startsWith(nodeModules) 
         || module.resource.startsWith(genDirNodeModules) 
         || module.resource.startsWith(realNodeModules)); 
      }, 
     "chunks": [ 
     "main" 
     ] 
    }), 
    new SourceMapDevToolPlugin({ 
     "filename": "[file].map[query]", 
     "moduleFilenameTemplate": "[resource-path]", 
     "fallbackModuleFilenameTemplate": "[resource-path]?[hash]", 
     "sourceRoot": "webpack:///" 
    }), 
    new CommonsChunkPlugin({ 
     "name": [ 
     "main" 
     ], 
     "minChunks": 2, 
     "async": "common" 
    }), 
    new NamedModulesPlugin({}), 
    new AotPlugin({ 
     "mainPath": "main.ts", 
     "replaceExport": false, 
     "hostReplacementPaths": { 
     "environments\\environment.ts": "environments\\environment.ts" 
     }, 
     "exclude": [], 
     "tsConfigPath": "src\\tsconfig.app.json", 
     "skipCodeGeneration": true 
    }), 
    new CompressionPlugin({}) 
    ], 
    "node": { 
    "fs": "empty", 
    "global": true, 
    "crypto": "empty", 
    "tls": "empty", 
    "net": "empty", 
    "process": true, 
    "module": false, 
    "clearImmediate": false, 
    "setImmediate": false 
    }, 
    "devServer": { 
    "historyApiFallback": true 
    } 
}; 

J'utilise @angular/cli1.4.4

Notez la principale raison pour laquelle je fais qui est d'améliorer certaines recommandations SEO car apparemment mon fournisseur.. css a une taille de 600Ko et est indiqué dans le PageSpeed ​​Ingishts: Votre page contient 1 CSS bloquant les ressources, ce qui retarde le rendu de votre page et contient seulement des css tiers - en fait seulement bootstrap + font-awesome. Pour éviter cela, je pensais à la compression.J'ai aussi pensé que le serveur web compresserait et servirait les fichiers .gz mais je ne sais pas si ce test w ould appliquer.

Toute aide est très appréciée! Merci

Answer 1

Seule la version de l'application éjectée est traitée par exposé sur le fichier racine webpack.config.js. L'application qui n'est pas éjectée (ou définie sur ejected: false) ignorera complètement ce fichier webpack.config.js. Donc, pour utiliser des fichiers gzippés, vous devrez utiliser l'application éjectée et utiliser les nouveaux scripts npm automatiquement ajoutés au package.json.

Au lieu de 'ng build', maintenant vous devez exécuter:

npm run build 

mes réponses connexes qui peuvent aider:

• Angular4 build - gzip missing
• How to undo Angular 2 Cli ng-eject