Vue-cli3 vue-cli-service build - модерн не работает - PullRequest
Новая
       54

Vue-cli3 vue-cli-service build - модерн не работает

0 голосов
/ 02 сентября 2018

После успешного запуска npm run build --modern в выводе отображается только одно приложение. Разве не должно быть два? enter image description here

Ответы [ 2 ]

0 голосов
/ 03 сентября 2018

После успешного запуска npm run build --modern в выводе отображается только одно приложение. Разве не должно быть двух?

На самом деле, команда build --modern создает два приложения в dist/js (см. dist/js/app.4e3aeb0e.js и dist/js/app-legacy.10b7d753.js): 

➜ ls -al dist/js
total 1840
drwxr-xr-x  10 tony  staff     320 Sep  2 19:25 .
drwxr-xr-x   7 tony  staff     224 Sep  2 19:25 ..
-rw-r--r--   1 tony  staff    4772 Sep  2 19:25 app-legacy.10b7d753.js                    <-- LEGACY
-rw-r--r--   1 tony  staff   23682 Sep  2 19:25 app-legacy.10b7d753.js.map
-rw-r--r--   1 tony  staff    4718 Sep  2 19:25 app.4e3aeb0e.js                           <-- MODERN
-rw-r--r--   1 tony  staff   23625 Sep  2 19:25 app.4e3aeb0e.js.map
-rw-r--r--   1 tony  staff   80454 Sep  2 19:25 chunk-vendors-legacy.df5f2e07.js          <-- LEGACY
-rw-r--r--   1 tony  staff  397535 Sep  2 19:25 chunk-vendors-legacy.df5f2e07.js.map
-rw-r--r--   1 tony  staff   63276 Sep  2 19:25 chunk-vendors.4fd390fb.js                 <-- MODERN
-rw-r--r--   1 tony  staff  326296 Sep  2 19:25 chunk-vendors.4fd390fb.js.map

Приложения выборочно загружаются в index.html. Во-первых, сценарии современного режима предварительно загружаются с <link rel="modulepreload"> в <head>: 

<link href=/js/app.4e3aeb0e.js rel=modulepreload as=script>
<link href=/js/chunk-vendors.4fd390fb.js rel=modulepreload as=script>

Эти сценарии позднее загружаются в <body> ( Примечание: только браузеры, поддерживающие <script type="module">, могут загружать сценарий ): 

<script type=module src=/js/chunk-vendors.4fd390fb.js></script>
<script type=module src=/js/app.4e3aeb0e.js></script>

Наконец, существует nomodule откат к сценариям устаревшего режима ( Примечание: атрибут nomodule указывает браузеру загружать сценарий, только если сценарии модуля не поддерживаются ): 

<script>!function () { var e = document, t = e.createElement("script"); if (!("noModule" in t) && "onbeforeload" in t) { var n = !1; e.addEventListener("beforeload", function (e) { if (e.target === t) n = !0; else if (!e.target.hasAttribute("nomodule") || !n) return; e.preventDefault() }, !0), t.type = "module", t.src = ".", e.head.appendChild(t), t.remove() } }();</script>
<script src=/js/chunk-vendors-legacy.df5f2e07.js nomodule></script>
<script src=/js/app-legacy.10b7d753.js nomodule></script>

Я сравниваю размер между --modern и no modern, разницы нет?

Я не уверен, как вы сравниваете размеры, но современная сборка на самом деле больше по размеру. В следующем примере я дважды сгенерировал приложение, сгенерированное Vue-CLI (с предустановкой default) (один раз без --modern и снова с --modern), и переименовал выходные каталоги. См увеличение размера dist-modern из index.html и js/: 

➜ ls -al dist*
dist-default:
total 16
drwxr-xr-x   7 tony  staff   224 Sep  2 19:25 .
drwxr-xr-x  13 tony  staff   416 Sep  2 19:27 ..
drwxr-xr-x   3 tony  staff    96 Sep  2 19:25 css
-rw-r--r--   1 tony  staff  1150 Sep  2 19:25 favicon.ico
drwxr-xr-x   3 tony  staff    96 Sep  2 19:25 img
-rw-r--r--   1 tony  staff   724 Sep  2 19:25 index.html
drwxr-xr-x   6 tony  staff   192 Sep  2 19:25 js

dist-modern:
total 16
drwxr-xr-x   7 tony  staff   224 Sep  2 19:25 .
drwxr-xr-x  13 tony  staff   416 Sep  2 19:27 ..
drwxr-xr-x   3 tony  staff    96 Sep  2 19:25 css
-rw-r--r--   1 tony  staff  1150 Sep  2 19:25 favicon.ico
drwxr-xr-x   3 tony  staff    96 Sep  2 19:25 img
-rw-r--r--   1 tony  staff  1213 Sep  2 19:25 index.html        <-- LARGER
drwxr-xr-x  10 tony  staff   320 Sep  2 19:25 js                <-- LARGER
0 голосов
/ 02 сентября 2018

Я не смог найти документы, которые вы вставили в изображение, но из документов написано:

--modern создает ваше приложение с использованием Modern Mode, отправляя собственный код ES2015 в современные браузеры, которые его поддерживают, с автоматическим откатом к устаревшему пакету.

Тогда я бы интерпретировал это как одно гибкое приложение.

Из документов, которые вы упомянули в комментарии, я нашел соответствующую часть:

Самое интересное, что особых требований к развертыванию нет. Сгенерированный HTML-файл автоматически использует методы, описанные в превосходном посте Филиппа Уолтона:

Современный комплект загружается с <script type="module">, в браузерах, которые его поддерживают ; они также предварительно загружаются с использованием <link rel="modulepreload">.

Устаревший комплект загружается с <script nomodule>, , который игнорируется браузерами, поддерживающими модули ES .

Исправление для <script nomodule> в Safari 10 также вводится автоматически.

Благодаря этому я могу интерпретировать одно и то же приложение, которое в зависимости от браузера ведет себя по-разному.

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

...