Прежде всего, позвольте мне прояснить это при использовании современного подхода для связывания Javascript с Webpack с использованием модулей ES6 [ES2015].
- Наиболее важное различие между текущими форматами модулей JS (CommonJS, AMD) и модулями ES6 заключается в том, что модули ES6 разработаны с учетом статического анализа.
- Это означает, что при импорте модулей импорт разрешается во время компиляции, то есть до начала выполнения скрипта.
- Это позволяет нам удалять экспорты, которые не используются другими модулями, до запуска программы.
- Удаление неиспользованного экспорта может привести к значительной экономии места и снижению нагрузки на браузер.
Чем это отличается от удаления мертвого кода, которое происходит, когда вы используете что-то вроде UglifyJS для минимизации своего кода?
Ответ - это зависит. Устранение мертвого кода - это шаг оптимизации, при котором неиспользуемый код удаляется, а переменные воспринимают его как удаление лишнего багажа, который не нужно запускать в комплекте, после того, как он был упакован .
Иногда устранение мертвого кода может работать точно так же между модулями UglifyJS и ES6, а иногда нет.
Современный подход для объединения JavaScript с Webpack
Webpack - современный инструмент для пакетирования статических файлов. В случае связывания файлов JavaScript это помогает устранить неявную зависимость от отсортированных тегов в нашей разметке. Вместо включения множества отдельных скриптов мы включаем один или несколько пакетов, использующих один и тот же тег.
Для этого мы должны сначала создать эти связки. И для создания комплекта нам нужно настроить Webpack. Конечно, Webpack должен быть установлен на машине, например, командой npm install webpack --save-dev.
Как минимум, все, что нужно Webpack, - это точка входа и выход. Затем его можно вызвать, просто выполнив команду.
./node_modules/.bin/webpack app/entry.js dist/output.js
В этом случае Webpack загрузит файл entry.js и найдет в нем ключевые слова import или require, чтобы определить, следует ли загружать больше зависимостей. Если зависимости найдены, они будут рекурсивно загружаться, а также включаться в выходной файл
Модули JavaScript
Как отмечалось в предыдущем разделе, файл сценария может содержать зависимости, на которые ссылаются import или require.
// CommonJS
require ('lodash')
console.log(_);
// ECMA6
import 'lodash'
console.log(_);
// Notice currently you need to transpile ECMA6 import using for example Babel to make it run in browsers
Это просто указывает на тот факт, что можно использовать функцию ссылки на зависимости в файле JavaScript. С настройками Webpack по умолчанию он связывает выходной скрипт, который не будет совместим с текущими браузерами. И, как отмечено в комментариях, нам нужно обработать файлы сценариев, содержащие импорт или требования. Это можно сделать с помощью JavaScript-преобразователя Babel, задача которого - взять JavaScript, написанный на ECMA6, и перевести его на работающий JavaScript ECMA5. Вы можете найти больше о JavaScript import и export в Mozilla Developer Network.
Пакетирование JavaScript в Webpack
Вы можете связать свой JavaScript с помощью команды CLI, указав входной файл и выходной путь. Webpack автоматически разрешит все зависимости от import и require. И объедините их в один вывод вместе со скриптом вашего приложения.
Но это только тот минимум, который он может сделать. Для расширения функциональности мы можем создать файл конфигурации Webpack и настроить различные задачи, которые выполняет упаковщик при обработке JavaScript.
Конфигурация
Сначала нам нужно создать файл webpack.config.js и запросить веб-пакет из node_modules.
// webpack.config.js
var webpack = require('webpack');
module.exports = {
entry: {
entry: __dirname + '/entry.js'
},
output: {
filename: '[name].bundle.js'
}
}
Здесь мы предоставили файл записи как entry.js и добавили префикс пути к текущему каталогу, в котором выполняется Webpack. Также предоставлен выходной путь, куда поместить содержимое связанного JavaScript. Обратите внимание на префикс [name] файла. Это указывает Webpack объединить имя файла записи с окончанием .bundle.js. Теперь, выполнив команду CLI.
./node_modules/.bin/webpack
это создастфайл entry.bundle.js в каталоге текущего модуля.
Погрузчики
Как я писал ранее, если вы используете import для ссылки на зависимости JavaScript в вашем скрипте, вы должны перенести его из скрипта ECMA6 в ECMA5 с помощью Babel. Webpack может сделать это на лету, используя функцию загрузчика. Чтобы заставить его работать, мы должны сначала установить необходимые модули узлов npm install babel-core babel-loader babel-preset-es2015 и обновить webpack.config.js разделом модулей.
// webpack.config.js
var webpack = require('webpack')
module.exports = {
entry: {
entry: __dirname + '/entry.js'
},
output: {
filename: '[name].bundle.js'
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015']
}
}
]
},
}
В разделе модулей мы можем установить множество загрузчиков, которые применяются к JavaScript во время обработки. Обратите внимание, что мы установили, что все файлы, заканчивающиеся * .js, за исключением node_modules, должны обрабатываться через babel-loader. Таким образом, он будет генерировать ECMA5-совместимый код в качестве вывода. Так что теперь, если мы добавим, например, зависимость к helloWorld.js в entry.js, Webpack сможет генерировать рабочий код.
// helloWorld.js
export const helloWorld = 'Hello world from imported JS!';
// entry.js
import {helloWorld} from './helloWorld'
console.log(helloWorld); // Will print 'Hello world from imported JS!' in browser's console
Плагины
Итак, мы увидели в действии конфигурацию entry , output и . Но есть еще один раздел для базовой конфигурации, на который стоит обратить внимание. Это плагины. Проще говоря, плагин - это то же самое для связанного JavaScript, что и загрузчик для одной зависимости JavaScript. Плагины позволяют нам выполнять различные задачи на связках. Например, извлечение фрагментов повторяющегося кода в отдельные файлы или удаление вывода.
// webpack.config.js
var webpack = require('webpack')
module.exports = {
entry: {
entry: __dirname + '/entry.js'
},
output: {
filename: '[name].bundle.js'
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015']
}
}
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin()
]
}
Как видите, мы добавили новый раздел в конфигурацию Webpack plugins. Он может содержать много плагинов, которые будут выполнены на встроенном JavaScript. Сам по себе Webpack предоставляет список полезных плагинов . Но вы также можете создавать свои собственные по вашим конкретным причинам.
Плюсы
- Больше контроля над зависимостями, так как представление импортирует только те скрипты, которые ему нужны для работы.
- Использование современного JavaScript (функции ES6).
- Webpack может анализировать содержимое JavaScript во время компиляции. Таким образом, предоставляя больше информации для оптимизации.
- Ссылка на классы аналогична использованию в C # или PHP.
Против
- Необходимость установки дополнительного инструмента, когда в фреймворке есть функция.
- Разработчик должен определить все точки входа (по одной на страницу или представление) в конфигурации.
- JavaScript должен быть модульным как для приложений, так и для сторонних разработчиков.
(OR)
Если вы хотите разделить фрагменты только с помощью веб-пакета: 100% правильный способ разделения фрагментов с помощью веб-пакета