我注意到我们的应用程序中存在内存泄漏。我一直在使用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
让我知道是否需要更多信息来解决它。