webpack 使用angular cli 7在生产捆绑包中添加延迟/异步

gkl3eglg 于 2022-11-13 发布在 Webpack

关注(0)|答案(2)|浏览(171)

我在新网站中使用angular cli 7生产时遇到了一些性能问题，特别是针对移动的浏览器，检查后我发现性能不佳的主要原因是我的javascript包中缺少为angular cli生成的预/异步。
我想知道，如果有任何替代使用Angular cli 7，以添加延迟/异步在最终捆绑包，我试图搜索，我发现了许多替代旧的Angular cli版本包括一个功能建议，但不是为新的版本，因为因为从Angular 版本6它不可能弹出webpack配置和自定义，添加插件等。

webpack

来源：https://stackoverflow.com/questions/54786607/add-defer-async-in-production-bundle-using-angular-cli-7

2条答案

按热度按时间

2wnc66cl1#

有没有神奇的解决方案，从角cli部分，但我发现了自定义建设者，以及为我工作。
https://www.npmjs.com/package/@angular-builders/custom-webpack#custom-webpack-config-object

角倾斜角

"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.配置文件

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          
        })
    ]
};

赞(0）回复(0）举报 2022-11-13

4dbbbstv2#

你可以使用一个postbuild脚本来为脚本添加“defer”属性。

赞(0）回复(0）举报 2022-11-13