Angular：是使用* .constant.ts还是.constant.json来存储常量和配置

Question

我正在为我的项目使用angular，我曾经在这里创建constants文件夹，这里有不同的常量文件来保存静态数据和配置，如下所示。

文件：constans / menu.constant.ts

export const menu = [
  { name: 'Dashboard', icon: 'icon-dashboard', routerLink: '/dashboard' },
  { name: 'Members', icon: 'icon-members', routerLink: '/member' },
  {
    name: 'Product',
    icon: 'icon-product',
    routerLink: '/product',
    nestedMenu: [
      { name: 'Product List', icon: 'fa-table', routerLink: '/product/list' },
      { name: 'Category', icon: 'fa-table', routerLink: '/category' },
      { name: 'Collection', icon: 'fa-table', routerLink: '/collection' },
      { name: 'Brand', icon: 'fa-table', routerLink: '/brand' }
    ]
  },
  { name: 'Content', icon: 'icon-content', routerLink: '/content' },
  {
    name: 'Store Mangement',
    icon: 'icon-store',
    routerLink: '/store-management'
  },
  {
    name: 'Settings',
    icon: 'icon-settings',
    nestedMenu: [
      { name: 'Tax Groups', icon: 'fa-table', routerLink: '/tax-groups' }
    ]
  }
];

但是我的一位朋友建议我使用.json文件而不是ts文件来定义常量和配置，因为他说ts文件将合并到最终的build js文件中，最终会增加我的构建大小。但是使用JSON文件时，我的构建js文件大小不会受到影响，因为JSON不会合并到js中。

这是他说的使用方式：

文件：constans / menu.constant.json

{
   "sidebarMenu": [
      {
         "name": "Dashboard",
         "icon": "icon-dashboard",
         "routerLink": "/dashboard"
      },
      {
         "name": "Members",
         "icon": "icon-members",
         "routerLink": "/member"
      },
      {
         "name": "Product",
         "icon": "icon-product",
         "routerLink": "/product",
         "nestedMenu": [
            {
               "name": "Product List",
               "icon": "fa-table",
               "routerLink": "/product/list"
            },
            {
               "name": "Category",
               "icon": "fa-table",
               "routerLink": "/category"
            },
            {
               "name": "Collection",
               "icon": "fa-table",
               "routerLink": "/collection"
            },
            {
               "name": "Brand",
               "icon": "fa-table",
               "routerLink": "/brand"
            }
         ]
      },
      {
         "name": "Content",
         "icon": "icon-content",
         "routerLink": "/content"
      },
      {
         "name": "Store Mangement",
         "icon": "icon-store",
         "routerLink": "/store-management"
      },
      {
         "name": "Settings",
         "icon": "icon-settings",
         "nestedMenu": [
            {
               "name": "Tax Groups",
               "icon": "fa-table",
               "routerLink": "/tax-groups"
            }
         ]
      }
   ]
}

任何人都可以对这些进行更多的探讨，以找到最优化的解决方案吗？

Answer 1

您的朋友错了。

数据是数据。如果使用，则需要从服务器加载它。使其为TS，JSON，纯文本或二进制文件，无论如何都将will加载。

并且为了更直接地回答您的问题，您应该使用与环境有关的environment文件。创建常量文件只是复制已经存在的逻辑。