уменьшить размер файла JS

Question

файл js на моем сайте имеет размер 1,5 МБ. Я предполагаю, что это может быть уменьшено. этот файл генерируется путем компиляции многих модулей с использованием gulp version "3.9.1" и webpack "4.8.2"

Я попытался уменьшить файл js с помощью gulp-uglify, но разница очень мала.

ниже код моего webpack.config.js

const path = require('path'),
UglifyJsPlugin = require('uglifyjs-webpack-plugin'),
settings = require('./settings');

module.exports = {
  entry: {
    App: settings.themeLocation + "scripts/app.js"
  },
  output: {
    path: path.resolve(__dirname, settings.themeLocation + "scripts"),
    filename: "app-fin.js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },


  mode: 'development'
}

в моем gulpfile.js файле У меня есть этот код для вызова webpack

gulp.task('scripts', function(callback) {
  webpack(require('./webpack.config.js'), function(err, stats) {
    if (err) {
      console.log(err.toString());
    }

    console.log(stats.toString());
    callback();
  });
});

мои вопросы:

1. Может ли js 1,5 МБ вызвать проблемы с производительностью?
2. автоматически ли webpack минимизирует мои js в результате, когда я использовал gulp-uglify не было никакого воздействия?
3. любое предложение о том, как еще больше уменьшить размер файла

Answer 1

Может ли js 1,5 МБ вызвать проблемы с производительностью?

В зависимости от вашей цели производительности, это определенно окажет влияние. Это не только время загрузки, но и ваше «время взаимодействия» пострадает из-за долгого времени выполнения JavaScript. Если вы хотите добиться времени <1 с на интерактивность, этот файл, вероятно, потеряет вас на 100-500 мс (в хороших устройствах). Гораздо больше в медленных устройствах. </p>

webpack автоматически минимизирует мои js в результате, когда я использовал gulp-uglify, не было никакого влияния?

Webpack использует оптимизации по умолчанию в зависимости от цели сборки (production / dev). Вы можете добиться хорошего прироста производительности, изменив конфигурацию. Пожалуйста, обратитесь сюда: https://webpack.js.org/configuration/

любые предложения по дальнейшему уменьшению размера файла

• Разделите свой пакет. В успешном проекте вы хотите загружать только те файлы js, которые будете использовать.
• Попробуйте удалить неиспользуемые или ненужные модули больших узлов. Несколько примеров: вместо moment.js вы можете проверить date-fns. Вам не нужен целый lodash для нескольких функций, вы можете реализовать их самостоятельно или использовать такие пакеты, как lodash.set, lodash.get и т. Д.
• Вы можете взглянуть на компилятор Google Closure, чтобы устранить мертвый код: https://github.com/google/closure-compiler

Answer 2

+ 1 до этот ответ и для расширения существуют различные подходы, которые вы можете использовать для уменьшения размера вашего комплекта.

---

В качестве введения встоимость вашего JS, У Адди Османи есть одно из лучших вступлений .

Практические методы улучшения Perf:

1. Убедитесь, что при сборке для производствачто вы установили mode: 'production'
2. Используйте Анализатор пакетов Webpack , чтобы найти пакеты, наиболее способствующие раздутию
3. Использование разделения кода с помощью динамический импорт , поэтомузагружается только тот код, который необходим.Используйте React Lazy + Suspense или что-то вроде React Loadable
4. Убедитесь, что вы используете встряхивание дерева путем импорта модулейкак это: import { module } from 'package'
5. Исследования плагинов Babel , которые могут помочь в дальнейшей оптимизации вашего пакета для размера и скорости

---

Прежде чем начать, этоЛучше всего ставить цели путем сопоставления с конкурентами или другими подобными приложениями, используя что-то вроде SpeedCurve или WebPageTest .