"Webpack Series" - подробное объяснение использования внешних

Vue.js Webpack
"Webpack Series" - подробное объяснение использования внешних

Пример проекта, используемый в этой статье, представляет собой проект Vue, созданный с помощью Vue Cli3.

Если вы сделали оптимизацию времени загрузки первого экрана, вы должны столкнуться с файлом chunk-vendors.js, который огромен и долго загружается, это один из виновников долгого времени загрузки первого экрана. экран.

Давайте продемонстрируем на реальном проекте.Во-первых, используйте подключаемый модуль webpack-bundle-analyzer для визуального просмотра содержимого файла chunk-vendors.js.

npm install webpack-bundle-analyzer --save-dev

Внесите этот плагин в vue.config.js

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports={
    configureWebpack:config =>{
        return {
            plugins:[
                new BundleAnalyzerPlugin()
            ]
        }
    }
}

На приведенной выше диаграмме анализа мы видим, что два самых больших файла js содержат некоторые сторонние зависимые пакеты, поэтому, пока эти зависимые пакеты извлекаются, проблема слишком большого размера chunk-vendors.js может быть решена. Следующее научит вас использоватьexternalsФактически, для извлечения этих пакетов зависимостей следует использоватьexternalsдля предотвращения упаковки этих зависимостей.

externalsЗначение - это объект,

module.exports={
    configureWebpack:congig =>{
        externals:{
            key: value
        }
    }
}

где ключ — это имя сторонней зависимой библиотеки, такое же, как в файле package.jsondependenciesКак ключевой объект. Красная рамка, показанная на фиг.Значение может быть строкой, массивом или объектом.

Говоря о внешних характеристиках, в Интернете есть много руководств, но объяснения не очень подробные, особенно объяснение стоимости. Если сообщается об ошибке из-за неправильного значения, я не знаю, как устранить неполадку и исправить ее.

Насколько я понимаю, значение должно бытьСторонняя сторона полагается на файл js, сгенерированный после компиляции и упаковки, а затем присваивает имя глобальной переменной окну после выполнения файла js..

Затем, как найти это имя глобальной переменной, научим вас методу.

Упомянутый выше файл js — это файл js, импортированный CDN. Затем вы можете открыть ссылку CDN через браузер. Поскольку код сжат, найдитеонлайн js форматированиеПосле обработки кода вы можете прочитать код.

Например, чтобы извлечь пакет зависимостей element-ui. Его ссылка CDNПК ООН more.com/element-UI@…, отформатированный код выглядит следующим образом и представляет собой самовыполняющуюся функцию.

function(e, t) {
    "object" == typeof exports && "object" == typeof module ? //判断环境是否支持commonjs模块规范
    module.exports = t(require("vue")) :
    "function" == typeof define && define.amd ? //判断环境是否支持AMD模块规范
    define("ELEMENT", ["vue"], t) :
    "object" == typeof exports ? //判断环境是否支持CMD模块规范
    exports.ELEMENT = t(require("vue")) : 
    e.ELEMENT = t(e.Vue)
} ("undefined" != typeof self ? self: this,function(e){
    //省略...
});

Из кода видно, что element-ui выводится с использованием спецификации модуля UMD, поэтому

  • Совместим со спецификацией модуля commonjs (используется в среде узла).
  • Спецификации модуля, совместимого с AMD (включены при использовании require.js).
  • Совместим со спецификацией модуля CMD (импортирован и используется с sea.js).

Каждая среда оценивается в коде, потому что она представлена ​​в public/index.html с использованием CDN, то есть среды браузера, которая не соответствует вышеуказанным средам, и, наконец, выполняется.e.ELEMENT = t(e.Vue), где e — объект окна, то имя глобальной переменной, присвоенное окну, равноELEMENT.

Настройте следующим образом в vue.config.js

module.exports={
    configureWebpack:{
        externals: {
            'element-ui': 'ELEMENT',
        }
    }
}

Представлено в public/index.html

<body>
    <div id="app"></div>
    <script src="https://unpkg.com/element-ui@2.10.1/lib/index.js"></script>
</body>

Но вы найдете ошибку.

Вернисьe.ELEMENT = t(e.Vue), Вы обнаружили, что вам все еще нужен Vue. Затем также извлеките пакет зависимостей Vue.

Ссылка CDN для Vue для компиляции и упаковки сгенерированного файла js:CDN.boot CDN.net/Ajax/Thursday/V…, Отформатированный код выглядит следующим образом и представляет собой самовыполняющуюся функцию.

function(t, e) {
    "object" == typeof exports && "undefined" != typeof module ? 
    module.exports = e() : 
    "function" == typeof define && define.amd ? 
    define(e) : 
    (t = t || self).Vue = e()
} (this,function(){
    //省略...
})

Выполнять последним в браузере(t = t || self).Vue = e(), где t — это, а это — объект окна. Тогда имя глобальной переменной, присвоенное окну, будетVue. Настройте следующим образом в vue.config.js

module.exports={
    configureWebpack:{
        externals: {
            'element-ui': 'ELEMENT',
            'vue': 'Vue',
        }
    }
}

Представлено в public/index.html

<body>
    <div id="app"></div>
    <script src="https://unpkg.com/element-ui@2.10.1/lib/index.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.runtime.min.js"></script>
</body>

опять такиnpm run devПосле обновления страницы я обнаружил, что она все еще сообщает об ошибке.

Вернемся к public/index.html, vue вводится после element-ui, неудивительно, что он сообщит об ошибке, vue должен быть введен до element-ui, измените его

<body>
    <div id="app"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.runtime.min.js"></script>
    <script src="https://unpkg.com/element-ui@2.10.1/lib/index.js"></script>
</body>

Обновите страницу, ошибок нет.

Это объяснение не очень ясное, знаете, откуда берется значение. Если вы столкнулись с ошибками, знайте, как их устранить и исправить.

Следующий vue-router продолжает полагаться и зависеть от извлеченного xlsx

Ссылка CDN для vue-router для компиляции и упаковки сгенерированного файла js:CDN.boot CDN.net/Ajax/Thursday/V…, Отформатированный код выглядит следующим образом.

 var t, e;
 t = this,
 e = function(){
    //省略...
 },
  "object" == typeof exports && "undefined" != typeof module ? 
  module.exports = e() : 
  "function" == typeof define && define.amd ? 
  define(e) : 
  (t = t || self).VueRouter = e();

Выполнять последним в браузере((t = t || self).VueRouter = e(), где t — это, а это — объект окна. Тогда имя глобальной переменной, присвоенное окну, будетVueRouter. Настройте следующим образом в vue.config.js

module.exports={
    configureWebpack:{
        externals: {
            'element-ui': 'ELEMENT',
            'vue': 'Vue',
            'vue-router': 'VueRouter',
        }
    }
}

Представлено в public/index.html

<body>
    <div id="app"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.runtime.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.2.0/vue-router.min.js"></script>
    <script src="https://unpkg.com/element-ui@2.10.1/lib/index.js"></script>
</body>

опять такиnpm run devПосле обновления страницы обычно не сообщается об ошибке, и продолжайте извлекать пакет зависимостей xlsx.

Ссылка CDN для xlsx для компиляции и упаковки файла js:CDN.boot CDN.net/Ajax/Thursday/Little…, Отформатированный код выглядит следующим образом.

var XLSX = {};
function make_xlsx_lib(e){
    //省略...
}
if (typeof exports !== "undefined") make_xlsx_lib(exports);
else if (typeof module !== "undefined" && module.exports) make_xlsx_lib(module.exports);
else if (typeof define === "function" && define.amd) define(function() {
    if (!XLSX.version) make_xlsx_lib(XLSX);
    return XLSX
});
else make_xlsx_lib(XLSX);
var XLS = XLSX,

Я обнаружил, что на этот раз судить непросто.Имя глобальной переменной, присвоенной окну, таково. Угадай первымXLSX, Представлено в public/index.html

<body>
    <div id="app"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.runtime.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.2.0/vue-router.min.js"></script>
    <script src="https://unpkg.com/element-ui@2.10.1/lib/index.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/xlsx/0.16.1/xlsx.min.js"></script>
</body>

Перетащите файл public/index.html в браузер, чтобы он открылся, а затем введите в консолиwindow.XLSXЧтобы увидеть, если нет значения.

стоило тогоundefined, указывая, что имя глобальной переменной, присвоенное окну,XLSX. Затем настройте следующим образом в vue.config.js

module.exports={
    configureWebpack:{
        externals: {
            'element-ui': 'ELEMENT',
            'vue': 'Vue',
            'vue-router': 'VueRouter',
            'xlsx': 'XLSX'
        }
    }
}

опять такиnpm run devПосле обновления страницы никаких ошибок не выдает.

После извлечения стороннего пакета зависимостей с внешними элементами вы хотите изменить место, где код изначально ввел зависимость? Например в main.js

import ElementUI from 'element-ui';
Vue.use(ElementUI);

Вы можете оставить его в покое, если только вы не поставите<script src="https://unpkg.com/element-ui@2.10.1/lib/index.js"></script>Представлен после app.js. Напишите это в public/index.html

<body>
    <div id="app"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.runtime.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.2.0/vue-router.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/xlsx/0.16.1/xlsx.min.js"></script>
</body>
<script src="https://unpkg.com/element-ui@2.10.1/lib/index.js"></script>

После компиляции и упаковки нашел dist/index.html

<script src="https://unpkg.com/element-ui@2.10.1/lib/index.js"></script>Он был введен после app.js.

Обновите браузер и найдите ошибку

Просто удалите этот код из main.js.

import ElementUI from 'element-ui';
Vue.use(ElementUI);

Обновите браузер, ошибок нет.

Многие туториалы в интернете говорят об удалении этого кода, иначе будет сообщение об ошибке На самом деле причина ошибки тут вовсе не при чем.

Ранее упоминалась ссылка CDN ELEMENT-UI, которая будет представлена ​​позже, но main.js внутри кода будет скомпилирован в app.js, выполнение app.js столкнется с

import ElementUI from 'element-ui';
Vue.use(ElementUI);

Поскольку ссылка CDN вашего element-ui загружается и выполняется после app.js, ElementUI в настоящее время не существует, и, конечно же, будет сообщено об ошибке.

Поэтому просто убедитесь, что ссылка CDN element-ui загружена до app.js. не сообщит об ошибке. Другими словами, поскольку зависимости должны быть введены в main.js, ссылка CDN должна быть загружена до app.js, чтобы код, который первоначально вводил зависимости, не изменялся.

Поскольку app.js является входным файлом, некоторые люди могут спросить, загружая его до того, как app.js не будет блокировать загрузку и выполнение app.js.

На самом деле это не имеет значения, потому что app.js был предварительно загружен с тегом ссылки. Загрузка файлов js происходит одновременно, и тот, кто загрузит первым, будет выполняться первым.

После извлечения третьего пакета зависимостей с внешними элементами выполнитеnpm run build, схема анализа выглядит следующим образом

По сравнению с предыдущим один из двух больших файлов исчез, а оставшийся всего 81,42КБ, что намного меньше прежних 1003,44КБ. Глядя на содержимое внутри, можно заметить, что предыдущие зависимости, такие как elemen-ui, jquery.js, vue.runtime.esm.js и xlsx.js, исчезли. Эффект оптимизации очевиден.

用externals提取第三方依赖包时，需切记中庸之道。虽然我们的最终目的是减少http请求资源大小，但是过犹不及，提取的过细将会增加http请求数量。

Категории