如何缩小 knockoutjs 代码文件

Posted 2023-03-27

【中文标题】如何缩小 knockoutjs 代码文件

【英文标题】：How to minify knockoutjs code files

【发布时间】：2016-07-05 01:48:32

【问题描述】：

我在 javascript Bundles 中添加了淘汰赛 js 文件，在发布模式下这些文件被缩小了。在调试模式下一切正常。但是，当优化和 JsBundles 被 Visual Studio 自动缩小时，它会更改参数名称，这会导致问题。示例：

美化后的缩小文件

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()
  ;

之前的文件

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();
    ;

问题在于 minifier 不知道范围内的关键字，因此将同一范围内的变量名称更改为现有名称。当该范围内有 n 命名变量时，它会将其他函数变量重命名为 n 再次（可能会发出也可能不会发出，不太确定）。

任何可以帮助更有效地缩小 KnockoutJs 文件的缩小工具？

【问题讨论】：

有什么问题？ self 不是 Knockout 关键字（Knockout 没有任何关键字）。

@RoyJ，我的坏自我不是那里的关键字，但仍然存在问题是由于将相同范围内的变量名称更改为现有名称。

【参考方案1】：

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

【讨论】：

谢谢比利。让我检查一下，这似乎是我要找的。​​span>

Mangler 是真正的问题，它将相同范围内的变量名称更改为现有名称。解决方案效果很好。