如何最小化变量名称但保留Webpack上的换行。

huangapple go评论72阅读模式
英文:

How to Minimize variable names but keep line breaks on Webpack

问题

我正在寻找一种方法来减少变量和其他内容,但保留换行符,以便在我的生产环境中更容易进行调试。

设置 minimize: false 将保留原始文件名。我正在使用一些 Lambda 函数。因此,减小大小预计会增加我的函数调用时间。
在捆绑大小上添加源映射是昂贵的。如果我可以保留换行符并引入一个廉价的源映射,我希望它将减小总体构建大小。

我正在使用 extend 来使用一个基本配置。附加的是我目前使用的基本配置。

const path = require('path');

module.exports = {

  target: 'node',
  mode: 'production',
  resolve: {
    extensions: ['.ts', '.js'],
  },

  entry: handlers.reduce(function (obj, el) {
    obj[(path.parse(el).dir + "/" + path.parse(el).name).replace(/^(.\/)?[^/]+\//, "")] = el;
    return obj;
  }, {}),

  output: {
    path: output_dir,
    filename: "[name].js",
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: [
          {
            loader: 'ts-loader',
            options: {
              transpileOnly: true,
            },
          },
        ],
        exclude: /node_modules/,
      },
    ],
  },
  optimization: {
    minimize: false,
    splitChunks: {
      chunks: 'all', // 分割并共享代码
    },
  },

};

到目前为止,我尝试了完整的源映射和禁用 minimize,还有其他建议吗?

英文:

I am looking a way to minimize the variables and stuff but keep line breaks so the codes are more debugable in my production envirenmnet.

Setting minimize: false will keep original file names. I am working with some Lamda function. So reducing size was expected to increase the invocation time of my fucntions.
Adding source maps is expensive on the bundle size. If I could preserve line breaks and introduce a cheap source map, I hope it will reduce overall build size.

**
I am using extend to use a base cofig. The attched one is the base config I currently use.**

const path = require('path');

module.exports = {

  target: 'node',
  mode: 'production',
  resolve: {
    extensions: ['.ts', '.js'],
  },

  entry: handlers.reduce(function (obj, el) {
    obj[(path.parse(el).dir+"/"+path.parse(el).name).replace( /^(.\/)?[^/]+\//,"")] = el;
    return obj;
  }, {}),

  output: {
    path: output_dir,
    filename: "[name].js",
    clean: true,

  },
  module: {
    rules: [
      {
        test: /\.ts$/,

        use: [
          {
            loader: 'ts-loader',
            options: {
              transpileOnly: true,
            },
          },
        ],
        exclude: /node_modules/,
      },
    ],
  },
  optimization: {
    minimize: false,
    splitChunks: {
      chunks: 'all', // Split and share code among entries
    },
  },

};

I tried full source-maps and minimize disable so far, Any other suggetions.

答案1

得分: 0

你必须使用外部的代码缩小工具(比如已经包含在 webpack 模块中的 Terser 插件),因为核心 webpack 的代码缩小工具是不可配置的。

查看 webpack 文档 获取 terser 插件的配置信息。

使用 Terser,你可以通过两种方式保留换行符:

  • 使用 beautify 格式选项,但似乎已被弃用。
  • 使用 semicolons 格式选项,因为它倾向于在缩小的输出中使用换行符而不是分号作为行尾。

这里是可能的 webpack 配置的一部分:

optimization: {
    minimize: true,
    minimizer: [
        new TerserPlugin({
            terserOptions: {
                format: {
                    semicolons: false
                }
            }
        })
    ]
}

链接到 完整的 terser API 进行精细调整。

英文:

You have to use an external minifier (like Terser plugin which is already included in webpack module) as core webpack minifier is not configurable.

See webpack doc for terser plugin config.

With Terser, you can achieve keeping line breaks in two ways :

  • Use beautify format option but it seems deprecated
  • Use semicolons format option as it tends to use line breaks instead of semi-colons for line ends in minified output

Here's an excerpt of a possible webpack configuration :

optimization: {
    minimize: true,
    minimizer: [
        new TerserPlugin({
            terserOptions: {
                format: {
                    semicolons : false
                }
            }
        })
    ]
}

Link to Full terser API for fine tuning.

huangapple
  • 本文由 发表于 2023年6月8日 13:55:30
  • 转载请务必保留本文链接:https://go.coder-hub.com/76428957.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定