Подробное объяснение правильного способа извлечения сторонних библиотек в webpack

Когда мы используем webpack для打包, часто хотим извлечь сторонние библиотеки в отдельные файлы стабильной версии, чтобы использовать кэширование браузера и уменьшить количество запросов.

1. CommonsChunkPlugin
2. DLLPlugin

Разница: первый метод требует打包 библиотек каждый раз, а второй метод-packит только проектные файлы, и мы можем использовать сжатые библиотеки,打包一次

Краткое описание метода CommonsChunkPlugin

Рассмотрим пример с vue

const vue = require('vue')
{
 entry: {
 // Bundle это имя файла проекта, который мы будем打包, app это входной js файл
 bundle: 'app'，
 // Поставщики это имена файлов, которые мы будем打包, массив содержит библиотеки, которые нужно打包, если они не в node——modules, можно указать конкретный адрес библиотеки
 поставщики: ['vue']
 },
 output: {
  путь: __dirname + '/bulid/',
 // Имя файла
 filename: '[name].js'
 },
 plugins: {
 // Здесь инстанцируется конструктор функции webpack.optimize.CommonsChunkPlugin
 // После打包 создается файл vendor.js
 new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js')
 }
}

Затем打包 созданные файлы и включите их в html-файл

<script src="/build/vendor.js"></script>
 <script src="/build/bundle.js"></script>

Краткое описание метода DLLPlugin

Сначала подготовьте два файла

1. webpack.config.js
2. webpack.dll.config.js

Конфигурация файла webpack.dll.config.js приведена ниже

const webpack = require('webpack')
const библиотека = '[name]_lib'
const path = require('path')
module.exports = {
 entry: {
 поставщики: ['vue', 'vuex']
 },
 output: {
 filename: '[name].dll.js',
 path: 'dist/',
 библиотека
 },
 plugins: [
 new webpack.DllPlugin({
  путь: path.join(__dirname, 'dist/[name]-manifest.json'),
  // Это должно соответствовать опции output.library выше
  name: library
 }),
 ],
}

Затем конфигурация файла webpack.config.js выглядит следующим образом

const webpack = require('webpack')
module.exports = {
 entry: {
 app: './src/index'
 },
 output: {
 filename: 'app.bundle.js',
 path: 'dist/',
 },
 plugins: [
 new webpack.DllReferencePlugin({
  context: __dirname,
  manifest: require('./dist/vendors-manifest.json')
 }
 ]
}

Затем запустите

$ webpack --config webpack.dll.config.js
$ webpack --config webpack.config.js

Способ использования в html

<script src="/dist/vendors.dll.js"></script>
<script src="/dist/app.bundle.js"></script>

Это все, что есть в этой статье, надеюсь, это поможет вам в изучении, также希望大家多多支持呐喊教程。

Заявление: контент этой статьи был взят из интернета, авторские права принадлежат соответствующему автору. Контент был предложен и загружен пользователями Интернета. Этот сайт не обладает правами собственности, не做过人工编辑处理，也不承担相关法律责任。 Если вы обнаружите контент,涉嫌侵犯版权， пожалуйста, отправьте письмо по адресу: notice#oldtoolbag.com (во время отправки письма, пожалуйста, замените # на @) для жалоб и предоставьте соответствующие доказательства. Как только будет подтверждено, этот сайт немедленно удаляет涉嫌侵权的内容。