角:是使用*.constant.ts还是.constant.json来存储常量和信任

Question

我在我的项目中使用了角，我在这里创建了一个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文件将被合并到最终构建的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、纯文本或二进制文件，那么无论如何都会加载它的。

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

编辑

我自己测试了你朋友说的话

import { Component } from '@angular/core';
import * as data from './app.data.json';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = data.some;
}

---- JSON ----

{
  "some": "data"
}

然后输出一个像这样

​

​

我可以确认，这根本不是真的，JSON被视为任何TS。我甚至打开了第一个main.XXX.js文件并找到它：

function(e){e.exports=JSON.parse('{"a":"data"}')}