Angular6中如何导入Handsontable？寻求更优体积优化方案

嘿，我之前在项目里也碰到过Handsontable打包体积超标的问题，给你几个亲测有效的优化思路：

• 按需导入核心功能与插件
  官方包装器默认的全量导入会包含很多你可能用不到的功能，建议精细控制导入范围。不要直接注册所有模块，只挑你实际需要的功能注册：

  // 仅导入基础表格模块
  import { HotTableModule } from '@handsontable/angular';
  import { registerModule } from 'handsontable/registry';
  import { BaseModule } from 'handsontable/base';
  // 比如需要排序功能，再单独导入对应插件
  import { ColumnSortingModule } from 'handsontable/plugins/columnSorting';
  
  // 只注册用到的模块
  registerModule(BaseModule);
  registerModule(ColumnSortingModule);
  

  这种方式能大幅砍掉打包时的冗余代码。

• 确保Tree Shaking完全生效
  检查你的Angular构建配置，开启完整优化选项，让Tree Shaking能正确剔除未使用的代码。在angular.json的build配置中确认以下设置：

  "optimization": true,
  "buildOptimizer": true,
  "vendorChunk": false,
  "outputHashing": "all"
  

  Handsontable的包本身已经配置了sideEffects，只要开启这些优化，就能自动过滤无用代码。

• 用懒加载拆分表格模块
  如果这个Handsontable表格只在项目的某个特定页面使用，建议把它放到懒加载模块里。这样只有用户访问该页面时，才会加载表格相关代码，不会增加主包体积：

  // 路由配置示例
  const routes: Routes = [
    {
      path: 'data-table',
      loadChildren: () => import('./data-table/data-table.module').then(m => m.DataTableModule)
    }
  ];
  

  在DataTableModule里单独导入HotTableModule并配置表格组件，实现代码分割。

• 业务允许的话，换用轻量替代库
  如果你只需要基础的表格展示、排序、筛选功能，完全可以用Angular Material的MatTable或者ngx-datatable这类轻量库，它们的打包体积远小于Handsontable。但如果必须用到Handsontable的高级功能（比如单元格合并、公式支持、复杂编辑等），那还是优先用前面的优化方案。

内容的提问来源于stack exchange，提问作者Frennetix