Typescript 识别网页包构建中的内存泄漏
我想知道是否有人能给我指出正确的方向 当我运行我的开发服务器,有时甚至是生产服务器时,构建偶尔崩溃,说javascript堆内存不足。我曾尝试将调试器附加到Web包,但据我所知,它无法解析较少的文件,但我也看到它在不同阶段运行 我完全不知道如何继续解决这个问题,但有些事情告诉我必须解决这个问题,与标准“只需增加节点的--最大旧空间大小”相比。我已经将堆空间增加了两倍,但仍有几次出现错误。目前,我已经将其设置为使用8gb的ram,但仍然失败 我已附加了一个从调试器因可能出现内存不足崩溃而停止时开始的。正如您可能猜到的,我对Webpack还比较陌生,如果您能给我一些提示,告诉我如何找到这个问题的根源,我将不胜感激,因为它确实影响了我的工作流程 webpack.config.jsTypescript 识别网页包构建中的内存泄漏,typescript,webpack,sass,memory-leaks,less,Typescript,Webpack,Sass,Memory Leaks,Less,我想知道是否有人能给我指出正确的方向 当我运行我的开发服务器,有时甚至是生产服务器时,构建偶尔崩溃,说javascript堆内存不足。我曾尝试将调试器附加到Web包,但据我所知,它无法解析较少的文件,但我也看到它在不同阶段运行 我完全不知道如何继续解决这个问题,但有些事情告诉我必须解决这个问题,与标准“只需增加节点的--最大旧空间大小”相比。我已经将堆空间增加了两倍,但仍有几次出现错误。目前,我已经将其设置为使用8gb的ram,但仍然失败 我已附加了一个从调试器因可能出现内存不足崩溃而停止时开始
// Path to the output folder
const rootFolder = "wwwroot";
const bundleFolder = `${rootFolder}/bundle`;
const customers = [
// ### Removed
];
let entry = {
load: "./ClientApp/load.ts",
main: "./ClientApp/main.ts",
};
customers.forEach((e) => {
entry[e] = `./ClientApp/www_files/${e}/${e}.ts`;
});
module.exports = (env, args) => {
const devMode = args.mode !== "production";
return {
entry: entry,
output: {
path: path.resolve(__dirname, bundleFolder),
publicPath: " ### Removed",
filename: "[name].js",
chunkFilename: "[id].[name].[chunkhash].js",
},
module: {
rules: [
{
test: /\.vue$/,
loader: "vue-loader",
},
{
test: /\.js$/,
loader: "babel-loader",
query: {
presets: ["es2015"],
compact: devMode,
},
},
{
test: /\.ts?$/,
use: [
{
loader: "awesome-typescript-loader",
},
],
},
{
test: /\.css$/,
use: [
devMode ? "vue-style-loader" : MiniCssExtractPlugin.loader,
"css-loader",
],
},
{
test: /\.scss$/,
use: [
devMode ? "vue-style-loader" : MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader",
],
},
{
test: /\.less$/,
use: [
devMode ? "vue-style-loader" : MiniCssExtractPlugin.loader,
"css-loader",
"less-loader",
],
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: "file-loader",
options: {
name: "[name].[ext]?[hash]",
},
},
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
loader: "file-loader",
},
{
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
loader: "file-loader",
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: "file-loader",
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: "file-loader",
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: "file-loader",
},
{
test: /\.(html)$/,
use: {
loader: "html-loader",
options: {
attrs: [":data-src"],
},
},
},
{
resourceQuery: /blockType=i18n/,
type: "javascript/auto",
loader: "@kazupon/vue-i18n-loader",
},
],
},
resolve: {
extensions: [".ts", ".js", ".vue", ".json"],
alias: {
vue$: "vue/dist/vue.esm.js",
},
},
devServer: {
contentBase: bundleFolder,
// Added because of bug: https://github.com/webpack/webpack-dev-server/issues/1604
disableHostCheck: true,
hot: true,
overlay: true,
headers: {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods":
"GET, POST, PUT, DELETE, PATCH, OPTIONS",
"Access-Control-Allow-Headers":
"X-Requested-With, content-type, Authorization",
},
port: 8080,
},
optimization: {
minimizer: [
new TerserPlugin(),
new OptimizeCssAssetsPlugin({}),
],
},
plugins: [
new CleanWebpackPlugin([bundleFolder]),
new webpack.HotModuleReplacementPlugin(),
new VueLoaderPlugin(),
new CheckerPlugin(),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].[name].[chunkhash].css",
}),
new HardSourceWebpackPlugin(),
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
],
};
};