如何缩小knockoutjs代码文件

Question

I have added knockout js files in Javascript Bundles & at release mode these are minified. Everything is working fine in debug mode. But when optimizations are on & JsBundles are minified automatically by Visual Studio it changes parameters name which starts causing issues. Example:

minified file after Prettify

function ProgramViewModel() {
  var n = this;
  n.Programs = ko.observableArray([]);
  n.SelectProgramForDetails = ko.observable('');
  n.SelectedProgramList = ko.observableArray([]);
  n.RequestedPrograms = ko.observableArray([]);
  n.SelectedPrograms = ko.observableArray([]);
  n.SearchSelected = ko.observable(!1);
  n.ProgramName = ko.observable('');
  n.CurrentPage = ko.observable(0);
  n.LastHeight = ko.observable(0);
  n.ProgramCatalog = ko.observableArray([{
    CatalogName: 'Global Catalog',
    CatalogId: 1
  },
  {
    CatalogName: 'Area Catalog',
    CatalogId: 2
  }
  ]);
  n.ColumnClicked = function (n, t) {
    paginationViewModel.ColumnClicked(t);
    programViewModel.GetPrograms()
  };
  n.ShowData = function (n) {
    $('html, body').animate({
      scrollTop: paginationViewModel.offset()
    }, 500);
    paginationViewModel.ShowData(n);
    programViewModel.GetPrograms()
  };
}

File before

function ProgramViewModel() {
    var self = this;
    self.Programs = ko.observableArray([]);
    self.SelectProgramForDetails = ko.observable("");
    self.SelectedProgramList = ko.observableArray([]);
    self.RequestedPrograms = ko.observableArray([]);
    self.SelectedPrograms = ko.observableArray([]);
    self.SearchSelected = ko.observable(false);
    self.ProgramName = ko.observable("");

    self.CurrentPage = ko.observable(0);
    self.LastHeight = ko.observable(0);

    // Default Catalog for now
    self.ProgramCatalog = ko.observableArray([
        { CatalogName: "Global Catalog", CatalogId: 1 },
        { CatalogName: "Area Catalog", CatalogId: 2 }
    ]);

    self.ColumnClicked = function (data, e) {
        paginationViewModel.ColumnClicked(e);
        programViewModel.GetPrograms();
    };

    self.ShowData = function (mode) {
        $('html, body').animate({
            scrollTop: paginationViewModel.offset()
        }, 500);
        paginationViewModel.ShowData(mode);

        programViewModel.GetPrograms();
    };
}

The problem is that minifier is not aware of keywords in scope thus changing name of variable in same scope to existing names. When there is a n named variable in that scope it is renaming other function variable into n again(might can issue or might not too, not so sure).

Any minify tool that can help minify KnockoutJs files more effectively?

Answer 1

Uglifyjs2 有可以关闭的 mangler 选项，单独保留变量名称： https : //github.com/mishoo/UglifyJS2#mangler-options