Есть ли способ улучшить производительность загрузки scss-файлов в NativeScript?

Question

Я унаследовал приложение NativeScript, которое при запуске выбирает свой корневой файл .scss. Загрузка и обработка этого занимает около 10 секунд на iPhone 6 и около 5 секунд на iPhone XR. Кто-нибудь есть какие-либо предложения о том, как я могу сократить это?

Я использую последний NativeScript CLI (6.1.2).

Я профилировал его с помощью Inspector, и, похоже,Вниз при оценке регулярного выражения (это было сделано на iPhone XR, где это заняло около 5 секунд):

https://i.imgur.com/NufRd6u.png

Вот код, который занимает время:

import * as app from "tns-core-modules/application";
...
if (DeviceSettings.isTablet) {
    app.setCssFileName('./app.tablet.scss');
} else {
    app.setCssFileName('./app.default.scss');
}

Answer 1

Мне удалось вдвое сократить время загрузки моего файла .scss с помощью шага postcss-loader, который пропускает css через cssnano следующим образом:

1. Добавьте следующие пакеты npm впроект:
   • npm install postcss-loader --save-dev
   • npm install postcss-import --save-dev
   • npm install postcss-preset-env --save-dev
   • npm install cssnano --save-dev
2. Добавьте файл postcss.config.js на том же уровне, что и основной файл package.json, со следующим содержимым:

module.exports = {
    plugins: {
      'postcss-import': {},
      'postcss-preset-env': {},
      'cssnano': {
        preset: ['default', {
            normalizeUrl: false
        }]        
      }
    }
  }

В webpack.config.js добавьте postcss-loader после css-loader в список загрузчиков для файлов .css и .scss:

                {
                    test: /\.css$/,
                    use: [
                        { loader: "css-loader", options: { url: false } },
                        "postcss-loader"
                    ]
                },

                {
                    test: /\.scss$/,
                    use: [
                        { loader: "css-loader", options: { url: false } },
                        "postcss-loader",
                        "sass-loader"
                    ]
                },

Примечание :Мне пришлось использовать параметр normalizeUrl: false на cssnano, чтобы он не мешал URL ресурсов, например, background-image: url("res://background");, иначе фоновое изображение не появилось бы.

Чтобы получить какие-либо дальнейшие улучшения, я планирую принятьлюбые специфичные для страницы файлы .scss из глобальных app.???.scss файлов и добавляйте их при загрузке страницы, т. е. с помощью this.page.addCssFile().