Как разделить пользовательскую библиотеку в vendor.js и загрузить ее в виде отдельного файла специально по нажатию на ссылку

Question

Я добавляю пользовательскую библиотеку в файл vendor.js, из-за которой размер файла увеличивается, как более чем на 10 МБ, и, следовательно, необходимо найти решение для отдельной загрузки этой пользовательской библиотеки.поэтому, когда я думаю о загрузке этой пользовательской библиотеки, возникает вопрос, как ее отделить и как ее загрузить?

Answer 1

Я нашел ссылку полезной для моего сценария. Этот фрагмент кода ниже помог

new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor',
        minChunks: (m) => /node_modules/.test(m.context)
    }),
new webpack.optimize.CommonsChunkPlugin({
            name: 'react-router',
            minChunks: (m) => /[\\/]node_modules[\\/](react-router)[\\/]/.test(m.context)
        })

Answer 2

Разделение кода - одна из самых привлекательных функций веб-пакета, которая мне нравится:

у нас есть модули в ключе entry здесь:

webpack.config.js

const path = require('path');

module.exports = {
  mode: 'development',
  entry: {
    index: './src/index.js',
    another: './src/another-module.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

Webpack автоматически создаст отдельный файл для ваших модулей:

        Asset     Size   Chunks             Chunk Names
another.bundle.js  550 KiB  another  [emitted]  another
  index.bundle.js  550 KiB    index  [emitted]  index

проверьте эту ссылку для более подробной информации: