angular - 使用 Angular cli 7 在生产包中添加延迟/异步

Question

我在使用专门针对移动浏览器的 Angular cli 7 制作的新网站中遇到了一些性能问题，经过检查，我发现性能不佳的主要原因是在为 Angular cli 生成的 javascript 包中缺少 pre/async 。

我想知道是否有任何替代方案可以使用 Angular cli 7 以便在最终 bundle 中添加延迟/异步，我尝试搜索，发现旧 Angular cli 版本的许多替代方案包括一个功能建议，但不包括对于新版本，因为从 Angular 版本 6 开始，不可能弹出 webpack 配置和自定义、添加插件等。

Answer 1

Angular cli 部分没有神奇的解决方案，但是我发现了适合我的自定义构建器。

https://www.npmjs.com/package/@angular-builders/custom-webpack#custom-webpack-config-object

angular-cli.json

  "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "outputPath": "dist/browser",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.app.json",
            "polyfills": "src/polyfills.ts",
            "assets": [
              "src/assets",
              "src/favicon.ico"              
            ],
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/photoswipe/dist/photoswipe.css",
              "node_modules/photoswipe/dist/default-skin/default-skin.css",
              "src/styles.scss"
            ],
            "scripts": [],
            "customWebpackConfig": {
              "path": "./webpack-extra.config.js",
              "mergeStrategies": {"plugins": "replace"}             
            }
          },

webpack-extra.config

const HtmlWebpackPlugin = require('html-webpack-plugin');
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
                 "template": "./src\\index.html",
                 "filename": "./index.html",
                 "hash": false,
                 "inject": true,
                 "compile": true,
                 "favicon": false,
                 "minify": {
                   "caseSensitive": true,
                   "collapseWhitespace": true,
                   "keepClosingSlash": true,
                   "removeComments": true,
                   "removeRedundantAttributes": true
                 },
                 "cache": true,
                 "showErrors": true,
                 "chunks": "all",
                 "excludeChunks": [],
                 "title": "Webpack App",
                 "xhtml": true,
                 "chunksSortMode": "none"
               }),
        new ScriptExtHtmlWebpackPlugin({
            defaultAttribute: 'defer'
          }),
        new CompressionPlugin({
          test: /\.js(\?.*)?$/i          
        })
    ]
};