Автор оригинала: Anthony Gore.
WebPack – это необходимый инструмент для разработки приложений одной страницы Vue.js. Он делает ваш рабочий процесс разработки намного проще, управляя сложными шагами сборки и может оптимизировать размер и производительность ваших приложений.
В этой статье я объясню четыре способа, что WebPack может улучшить ваше VUE-приложение, в том числе:
- Один файловые компоненты
- Оптимизация постройки Vue
- Управление браузером Cache
- Расщепление кода
Примечание: эта статья была первоначально опубликована здесь на блоге разработчиков Vue.js на 2017/06/19.
Как насчет Vue-cli?
Если вы используете шаблон, чтобы создать свое приложение из Vue-Cli Предоставляется предварительно сделанная конфигурация WebPack. Они хорошо оптимизированы, и никаких улучшений я могу предложить!
Но так как они так хорошо работают из коробки, у вас, вероятно, не так много идеи о том, что они действительно делают, верно? Рассмотрим эту статью Обзор конфигурации WebPack, используемый в шаблонах Vue-CLI, поскольку они включают в себя те же оптимизации, которые я здесь обсуждаю.
1. Один файловые компоненты
Одной из идентификационных функций VUE является использование HTML для шаблонов компонентов. Они поставляются с внутренней проблемой, хотя: либо ваша разметка HTML должна быть в неловкой строке JavaScript, или ваш шаблон и определение компонента должны быть в отдельных файлах, что делает их трудно работать.
Vue обладает элегантным решением, называемым одним файловым компонентами (SFCS), которые включают в себя шаблон, определение компонента и CSS все в одном аккуратере .vue файл:
Mycomponent.vue.
...
SFC становятся возможными возможными по Vue-loader WebPack Plugin. Этот загрузчик расщепляется вверх по языковым блокам SFCS и трубы каждому в соответствующем погрузчике, например, Блок сценария отправляется на Babel-Loader , пока шаблон блок отправляется в собственный Vue-шаблон-погрузчик который преобразует шаблон в JavaScript оказывать функция.
Окончательный выход Vue-Loader – это модуль JavaScript, который готов к включению в вашем пакете WebPack.
Типичная конфигурация для Vue-loader составляет:
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
// Override the default loaders
}
}
},
]
}
2. Оптимизация постройки Vue
Только построить
Если вы используете только визуальные функции в вашем приложении Vue *, и нет HTML-шаблонов, вам не нужно компилятор шаблона Vue. Вы можете уменьшить размер вашего пучка, опуская компилятор из сборки WebPack.
* Помните, что шаблоны одного файловых компонентов предварительно составлены в разработке для выполнения функций!
Есть Только время выполнения Создание библиотеки Vue.js, которая включает в себя все функции vue.js, кроме шаблона компилятора, называемого vue.runtime.js Отказ Это около 20 КБ меньше, чем полная сборка, поэтому стоит использовать, если вы можете.
Создание только в среду выполнения используется по умолчанию, поэтому каждый раз, когда вы используете Импорт Vue от «VUE»; В вашем проекте это то, что вы получите. Вы можете изменить на другой сборку, хотя, используя псевдоним Параметр конфигурации:
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js' // Use the full build
}
},
Умение предупреждений и сообщений об ошибках в производстве
Другим способом уменьшения размера сборки VUE.JS – удалить любые сообщения об ошибках и предупреждения в производстве. Это раздувается ваш размер выходных пучков с ненужным кодом, а также не понесет стоимость выполнения, вы лучше всего избежать.
Если вы проверяете исходный код Vue, вы увидите, что блоки предупреждения условны на значении переменной среды process.env.node_env например.:
if (process.env.NODE_ENV !== 'production') {
warn(("Error in " + info + ": \"" + (err.toString()) + "\""), vm);
}
Если process.env.node_env установлен на Производство Тогда такие блоки предупреждения могут быть автоматически выделены из кода по минимуму в процессе сборки.
Вы можете использовать Офиниругин установить значение process.env.node_env и UGLifyjsplugin Чтобы домирить код и раздеть неиспользуемые блоки:
if (process.env.NODE_ENV === 'production') {
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin()
])
}
3. Управление кэшем браузера
Браузер пользователя будет кэш файлам вашего сайта, чтобы они загружали только, если браузер еще не имеет локальной копии, или истек срок действия локальной копии.
Если весь ваш код находится в одном файле, то крошечное изменение будет означать, что весь файл должен быть заново загружен. В идеале вы хотите, чтобы ваши пользователи загружали как можно меньше, поэтому он будет умным отделить редко меняющий код вашего приложения из его часто меняющегося кода.
Файл поставщика
Общие куски Плагин может отделить ваш поставщик код (например, зависимости, такие как библиотека Vue.js, которые вряд ли будут изменяться очень часто) от вашего Приложение код (код, который может измениться на каждом развертывании).
Вы можете настроить плагин, чтобы проверить, является ли зависимость от node_modules Папка, и если да, выведите его в отдельный файл Vendor.js :
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function (module) {
return module.context && module.context.indexOf('node_modules') !== -1;
}
})
Если вы сделаете это, у вас сейчас будут два отдельных файла в вашем выходе сборки, которые будут кэшированы браузером независимо:
Отпечаток пальца
Когда файл сборки меняется, как мы размещаем кэш браузера?
По умолчанию только тогда, когда кэшированный файл истекает или когда пользователь вручную очищает кэш, будет запросить браузер снова с сервера. Файл будет загружен, если сервер указывает, что файл изменился (в противном случае сервер возвращает HTTP 304 не изменен).
Чтобы сохранить ненужный запрос сервера, мы можем изменить имя файла каждый раз, когда его содержимое изменяется, чтобы заставить браузер повторно загрузить его. Простая система для этого – это добавить «отпечаток пальца» на имя файла, добавив HASH E.G.:
Общие плагин кусков выделяют «Chunkhash», который обновляется, если содержимое файла изменилось. WebPack может добавить эту хеш к именам файлов, когда они выводятся:
output: {
filename: '[name].[chunkhash].js'
},
Когда вы это сделаете, вы увидите, что ваши выводные файлы будут иметь имена, такие как App 3b80b7c17398c31e4705.js Отказ
Автоматические файлы сборки
Конечно, если вы добавите хеш, вам придется обновить ссылку на файл в своем файле индекса, в противном случае браузер не узнает об этом:
Это было бы чрезвычайно утомительной задачей вручную, поэтому используйте HTML WebPack Plugin Чтобы сделать это для вас. Этот плагин может Авто ввод Ссылки на файлы сборки в файл HTML в процессе соединения.
Начните с удаления ссылок на ваш файл сборки:
index.html.
test-6
И добавьте HTML WebPack Plugin К вашим веб-стране конфигурации:
new HtmlWebpackPlugin({
filename: 'index.html'
template: 'index.html',
inject: true,
chunksSortMode: 'dependency'
}),
Теперь ваши файлы сборки с хэшей будут автоматически добавлены в ваш файл индекса. Кроме того, ваш index.html Файл теперь будет включен в ваш вывод пакета, поэтому вам может потребоваться сообщить веб-серверу, что его местоположение изменилось.
4. Разделение кода
По умолчанию WebPack выкроет все ваши приложения в один большой пакет. Но если у вашего приложения есть несколько страниц, было бы более эффективно разделить код, поэтому каждый код отдельных страниц находится в отдельном файле, и загружается только при необходимости.
WebPack имеет функцию под названием «Code Spliting», который имеет значение именно так. Достижение этого в Vue.js также требует асинхронные компоненты и сделан еще проще с Vue Router Отказ
Async компоненты
Вместо того, чтобы иметь объект определения как их второй аргумент, асинхронные компоненты Имейте функцию обещания, которая решает объект определения, например:
Vue.component('async-component', function (resolve, reject) {
setTimeout(() => {
resolve({
// Component definition including props, methods etc.
});
}, 1000)
})
Vue будет вызывать функцию только тогда, когда компонент на самом деле должен быть представлен. Это также будет кэшировать результат для будущих повторных рендеров.
Если мы архитектором нашим приложением, поэтому каждая «страница» – это компонент, и мы храним определение на нашем сервере, то мы на полпути до достижения разделения кода.
требовать
Чтобы загрузить код ASYNC с сервера, используйте WebPack требуется синтаксис. Это будет проинструктировать WebPack Bundle асинхронный компонент В отдельном пакете, когда он строит, и еще лучше, WebPack справится с загрузкой этого связки с AJAX, поэтому ваш код может быть таким же простым, как это:
Vue.component('async-component', function (resolve) {
require(['./AsyncComponent.vue'], resolve)
});
Ленивая загрузка
В приложении Vue.js Vue-маршрутизатор Как правило, будет модуль, который вы используете для организации вашего SPA на несколько страниц. Ленивая загрузка Является ли формализованным способом для достижения кодового расщепления с Vue и WebPack.
const HomePage = resolve => require(['./HomePage.vue'], resolve);
const rounter = new VueRouter({
routes: [
{
path: '/',
name: 'HomePage',
component: HomePage
}
]
})
Стать старшим Vue Developer в 2020 году.
Учитесь и осваивайте, какие профессионалы знают о строительстве, тестировании и развертывании, полностью стековых Vue Apps в нашем последнем курсе.
Учить больше