更廣泛地修改terser-webpack-plugin？

Question

有沒有辦法徹底解決與webpack捆綁在一起的vue組件？

當通過將terser-webpack-plugin的mangle.properties設置為true來應用重整時，並非所有屬性名都被重整，例如：

location: {
  lng: -.134281,
  lat:51.513508,
  zoom:13,
  pitch:1,
  bearing:60
}

變成

location:{
  k:-.134281,
  M:51.513508,
  zoom:13,
  pitch:1,
  V:60
}

編輯

根據要求：Webpack配置文件的相關部分，在這種情況下，默認的vie-cli配置以及手動添加的mangle.properties項目：

minimizer: [
      {
        options: {
          test: /\.m?js(\?.*)?$/i,
          chunkFilter: () => true,
          warningsFilter: () => true,
          extractComments: false,
          sourceMap: false,
          cache: true,
          cacheKeys: defaultCacheKeys => defaultCacheKeys,
          parallel: true,
          include: undefined,
          exclude: undefined,
          minify: undefined,
          terserOptions: {
            output: {
              comments: /^\**!|@preserve|@license|@cc_on/i
            },
            compress: {
              arrows: false,
              collapse_vars: false,
              comparisons: false,
              computed_props: false,
              hoist_funs: false,
              hoist_props: false,
              hoist_vars: false,
              inline: false,
              loops: false,
              negate_iife: false,
              properties: false,
              reduce_funcs: false,
              reduce_vars: false,
              switches: false,
              toplevel: false,
              typeofs: false,
              booleans: true,
              if_return: true,
              sequences: true,
              unused: true,
              conditionals: true,
              dead_code: true,
              evaluate: true
            },
            mangle: {
              safari10: true,
              properties: true
            }
          }
        }
      }
    ],

Answer 1

碰巧這兩個屬性（ zoom ， pitch ）被包括在reserved名稱列表中，看看這個默認的domprops.json文件，UglifyJS在處理時會在內部使用它。

tools/domprops.json提供了一個默認排除文件，該文件應涵蓋在各種瀏覽器中定義的大多數標准JS和DOM屬性。 傳遞--mangle-props domprops禁用此功能

如果您想保留此默認列表，則可以在插件的自定義minify選項中執行以下任一操作：

1. 創建您的自定義保留名稱列表，
2. 加載默認列表（ domprops.json ），並傳入一個函數/過濾器以刪除那些不需要的名稱，
3. 如果您確定沒有名稱沖突，只需合並這兩個文件。

webpack.config.js

{
  optimization: {
    minimizer: [
      new TerserPlugin({
        minify(file, sourceMap) {
          const uglifyJsOptions = {
            mangle: {
              properties: {
                reserved: require('your_custom_list')
              }

              // Or filter them

              properties: {
                reserved: require('uglify-js/tools/domprops.json')
                  .filter(name => ![
                    'zoom',
                    'pitch'
                  ]
                  .includes(name))
              }
            }
          };

          return require('uglify-js').minify(file, uglifyJsOptions);
        },
      }),
    ],
  },
}

另外，在執行此mangle.properties.reserved時，請注意mangle.reserved和mangle.properties.reserved之間的相似之處，因為后者可能正是您所需要的。 查看最小化選項結構 。