Webpack - оптимизация узловых модулей и импорт - PullRequest
Новая
       11

Webpack - оптимизация узловых модулей и импорт

0 голосов
/ 20 июня 2019

Настройка веб-пакета Мне было интересно что-то для оптимизации. У меня есть два файла JS index.js и helper.js. Я импортирую helper.js в index.js так: 

import * as helper from 'helper.js';

В этих двух файлах JS я импортирую несколько узлов node_modules.

Относительно этого , для предотвращения дублирования кода и кэширования вы можете сделать это: 

  const path = require('path');
  const { CleanWebpackPlugin } = require('clean-webpack-plugin');
  const HtmlWebpackPlugin = require('html-webpack-plugin');

  module.exports = {
    entry: {
      index: './src/index.js'
    },
    output: {
      filename: '[name].[contenthash].js',
      path: path.resolve(__dirname, 'dist')
    },
    optimization: {
      runtimeChunk: 'single',
      splitChunks: {
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendors',
            chunks: 'all'
          }
        }
      }
    }
  };

  • Если я хорошо понимаю для оптимизации, он только создал один файл вендора из папки node_modules? Он будет импортировать все из папки node_modules, даже если я не буду использовать все (например, devDependencies)?

  • Учитывает ли импорт файл helper.js, выполненный в index.js у поставщика?

  • Почему они используют runtimeChunk в предоставленной ссылке?

Или я должен сделать что-то подобное: 

optimization: {
  splitChunks: {
    chunks: 'all'
  }
}

Надеюсь, вы могли бы помочь мне

1 Ответ

1 голос
/ 20 июня 2019

Вам не нужно test, так как по умолчанию это node_modules. Он будет компилировать только те, которые вы используете. Не забудьте сначала включить этот файл перед вашим приложением, если вы включаете их в html.

Он разделит все модули вендоров независимо от того, из какого файла они включены.

Стоит отметить, что, так как вы импортируете helper.js в index.js и создаете один пакет, webpack уже не будет дублировать node_modules, а будет делиться ими, пока helper.js не является сторонним модулем, скомпилированным как модуль не-es6.

Другими словами, веб-пакет будет автоматически трясти вещи в ваших собственных исходных файлах и модули es2016 в node_modules (не CJS / UMD, что является наиболее распространенным).

Вам нужно разделить на комплект поставщика, только если:

a) Комплект вашего поставщика меняется с гораздо меньшей частотой, чем ваш код src (не так часто, если вы часто запускаете npm update)

b) Вы создаете несколько выходных файлов, и вы хотите, чтобы они делились vendor.js / вы не хотите объявлять их как внешние и заставлять потребителя устанавливать их (например, библиотеку компонентов)

P.S. Не совсем уверен, для чего нужен runtimeChunk, но лично я бы не стал его указывать (оставьте его по умолчанию), если у вас нет веских причин.

...