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 будет забит в окончательный файл 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"}')}