Более обширный mangling terser-webpack-plugin? - PullRequest
Новая
       26

Более обширный mangling terser-webpack-plugin?

0 голосов
/ 13 февраля 2019

Есть ли способ тщательно исказить vue компоненты, которые были в комплекте с webpack?

При применении каландрирования через 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
}

Редактировать

По запросу: соответствующая часть веб-пакетафайл конфигурации, в данном случае по умолчанию vie-cli config с добавленным вручную элементом 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
            }
          }
        }
      }
    ],

1 Ответ

0 голосов
/ 13 февраля 2019

Эти два свойства (zoom, pitch), которые оказались включены в список имен reserved, посмотрите на файл по умолчанию domprops.jsonкоторый UglifyJS использует внутренне во время искажения.

В tools/domprops.json предусмотрен файл исключения по умолчанию, который должен охватывать большинство стандартных свойств JS и DOM, определенных в различных браузерах.Передайте --mangle-props domprops, чтобы отключить эту функцию

Если вы хотите сохранить этот список по умолчанию, вы можете выполнить любое из следующих действий в пользовательской опции минимизации плагина:

  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.reserved и mangle.properties.reserved при этом, так как последний может быть тем, что вам нужно здесь.Ознакомьтесь со структурой параметров minify .

...