存储在内存中的样式表的多个副本(泄漏)

时间:2019-06-12 06:34:30

标签: angular typescript webpack memory-leaks less

我注意到我们的应用程序中存在内存泄漏。我一直在使用Firefox的about:memory页面来尝试解决问题。我注意到我们的样式表有多个副本(.less),例如:

230.01 MB (18.89%) -- string(length=415887, copies=230, "/**/n * Applies styles for users in high contrast mode. Note that this only applies/n * to Microsoft browsers. Chrome can be included by checking for the `html[hc]`/n * attribute, however Chrome handles high contrast differently./n * @param target Which kind of high contrast setting to target. Defaults to `active`, can be/n *    `white-on-black` or `black-on-white`./n *//n/* Theme for the ripple elements.*//n/* stylelint-disable material/no-prefixes *//n/* stylelint-enable *//n.mat-badge-content {/n  font-weight: 600;/n  font-size: 12px;/n  font-family: Roboto, "Helvetica Neue", sans-serif; }/n.mat-badge-small .mat-badge-content {/n  font-size: 6px; }/n.mat-badge-large .mat-badge-content {/n  font-size: 24px; }/n.mat-h1, .mat-headline, .mat-typography h1 {/n  font: 400 24px/32px Roboto, "Helvetica Neue", sans-serif;/n  margin: 0 0 16px; }/n.mat-h2, .mat-title, .mat-typography h2 {/n  font: 500 20px/32px Roboto, "Helvetica Neue", sans-serif;/n  margin: 0 0 16px; }/n.mat-h3, .mat-subheading-2, .mat-typography " (truncated))
│  │  │  │    ├──230.00 MB (18.89%) ── malloc-heap/two-byte
│  │  │  │    └────0.01 MB (00.00%) ── gc-heap/two-byte

〜15小时后,样式表占用1GB的内存,并且副本数量不断增加!我只是不明白为什么会这样?

页面组件看起来像这样:


    <div *ngIf="!showSSNInput">
        <div class="msg msg-error" *ngIf="showNotFoundError">text</div>
        <iframe id="nemid_iframe" name="nemid_iframe" ontouchstart="" scrolling="no" frameborder="0" style="width:300px;height:460px;border:0px;margin:0px;padding:0px;overflow:hidden;"></iframe>
    </div>
    <div *ngIf="showSSNInput">
        <div class="col-xs-12">
            <h4>text</h4>
            <div class="field-input">
                <input class="cpr-input" type="text" required name="cpr" [(ngModel)]="ssnInput" (ngModelChange)="cleanSsnMask()"
                       (keyup.enter)="loginWithSsn()" [class.missing-input]="ssnInput == null || ssnInput.length === 0" [textMask]="{mask: CPRmask}" />
                <span class="floating-label">text</span>
            </div>
            <div class="field-input">
                <button class="btn btn-success btn-login" (click)="loginWithSsn()" [disabled]="cleanSsn == null || cleanSsn.length != 10 || loading"
                        [class.loading]="loading" type="button">
                    <span>text</span>
                </button>
            </div>
            <div class="msg msg-error" *ngIf="showSSNError">text</div>
            <div class="msg msg-error" *ngIf="showNotFoundError">text</div>
        </div>
    </div>
    <div class="msg msg-error" *ngIf="showError">
        <b>text {{errorCode}}</b>
        text
    </div>

    @import "../../../../../assets/styles/app/functions.less";

    .btn-login {
        margin-top: 15px;
        margin-left: 15px;
        padding: 12px 20px 11px;
    }

    .cpr-input{
        width: 200px; 
        .extraSmallDevice({
            width: 100%;
        })
    }

    .msg {
        width: 100%;
    }

webpack.config.js:

const path = require('path');
const nodeExternals = require('webpack-node-externals');
const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  mode: 'none',
  entry: {
    server: './server.ts'
  },
  resolve: {
    extensions: ['.ts', '.js']
  },
  target: 'node',
  externals: [/(node_modules|main\..*\.js)/],
  node: {
    __dirname: true
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js'
  },
  module: {
    rules: [
        { test: /\.ts$/, loader: 'awesome-typescript-loader', options: { useCache: true } },
        { test: /.less$/, exclude: /node_modules/, loader: 'raw-loader!less-loader' }
    ]
  },
  plugins: [
    new webpack.ContextReplacementPlugin(
      /(.+)?angular(\\|\/)core(.+)?/,
      path.join(__dirname, 'src'), // location of your src
      {} // a map of your routes
    ),
    new webpack.ContextReplacementPlugin(
      /(.+)?express(\\|\/)(.+)?/,
      path.join(__dirname, 'src'),
      {}
    ),
    new CopyWebpackPlugin([
        { from: 'src/iisnode.yml', to: 'iisnode.yml' },
        { from: 'src/web.config', to: 'web.config' }
    ])
  ]
}

角度版本:7.0.1

让我知道是否需要更多信息来解决它。

0 个答案:

没有答案