Мой веб-сайт должен работать с самыми простыми телефонными браузерами, которые только можно вообразить, потому что моя база пользователей - это сельские эфиопские дети с очень, очень простыми телефонными трубками. (Я использую jquery для экономии заряда батареи телефона, так как большинство из них «переработано», второе / третье / четвертое руки и старые, и я очень осторожен с затратами на передачу данных.)
Я пытаюсь настроить Babel + Webpack для транспиляции для минимально возможной поддерживаемой цели, но я неправильно понимаю документы Babel (например, я начал с @babel/preset-env и без целей, поскольку я предполагал, что отсутствие таргетинга означает максимальную совместимость, но это не t polyfill) и не могу протестировать на моем огромном количестве целевых телефонов и браузеров.
Будет ли приведенная ниже конфигурация создавать и связывать Javascript, который будет работать в максимально возможном диапазоне браузеров? Есть ли способ сделать его более совместимым?
У меня
useBuiltins=usage- будет ли конфигурация веб-пакета ниже обнаруживать повторяющийся импорт и дрожание дерева? Если нет, то что мне нужно изменить, или было бы лучшеuseBuiltins=entryиrequire('core-js');require('regenerator-runtime/runtime')в моемindex.js?Использование
importилиrequireдля импорта начальной загрузки создает файл большего размера, чем дистрибутив начальной загрузки, хотя я не упоминаю об этом в JS. Как я могу заставить работать дрожание деревьев? Не следует ли мне использовать jquery через npm? РЕДАКТИРОВАТЬ: встряхивание дерева происходит только в сборках PROD и, похоже, работает с приведенной ниже конфигурацией.Могу ли я безопасно использовать последнюю версию jquery и полагаться на полифиллинг, а не на 1.12, у которого есть проблемы с безопасностью, но я использую, поскольку он работает в гораздо большем количестве браузеров?
Могу ли я удалить
@babel/cli, так как в webpack запущен babel? (Это работает, я просто хочу быть уверенным, что получаю максимум полифилов и совместимости, и если будет лучше, буду рад запустить babel CLI.)Есть ли другие упущенные возможности / рекомендации?
(Если уместно, мне не нужны фрагменты - это простое приложение, и я кэширую на неопределенный срок. Я записываю это в статическую папку Django, а Django + whitenoise обрабатывает отпечатки имен файлов и HTTP-сжатие. В какой-то момент я добавлю Модульные тесты JS. Я импортирую JS начальной загрузки для полифилов и встряхивания деревьев (хотя Bootstrap, похоже, не дрожит), но загружаю CSS начальной загрузки непосредственно из HTML, чтобы избежать промахов в кеше при обновлении приложения.)
packages.json:
{
...
"scripts": {
"start": "webpack-dev-server --open --mode development",
"build": "webpack --mode production",
},
"devDependencies": {
"@babel/cli": "^7.10.1",
"@babel/core": "^7.10.2",
"@babel/plugin-proposal-class-properties": "^7.10.1",
"@babel/preset-env": "^7.10.2",
"axios": "^0.19.2",
"babel-loader": "^8.1.0",
"bootstrap": "^4.4.1",
"jquery": "^1.12.4", // insecure old version but more compatible
"popper.js": "^1.16.1",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"@babel/polyfill": "^7.10.1",
"core-js": "^3.6.5"
}
}
.babelrc:
{
"presets": [
[
"@babel/env",
{
"targets": "cover 100%",
"useBuiltIns": "usage",
"corejs": "3.6.5"
}
]
],
"plugins": ["@babel/plugin-proposal-class-properties"]
}
webpack.config.js:
const path = require('path');
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
},
output: {
filename: 'app.js',
publicPath: "/static/",
path: path.join(__dirname, '../djangoproj/app/static/app')
},
devServer: {
writeToDisk: true, // Django serves the content
}
};
index.js:
import $ from 'jquery';
import bootstrap from 'bootstrap'
import popper from 'popper.js'
import {Controller} from './controller';
$(document).ready(function() {
const app = new Controller()
})
controller.js:
import {View} from './view';
import {ActivityStore, ElementStore} from './store';
import {Api} from './api';
export class Controller {
constructor() {
this.state = {}
this.api = new Api(config)
// and so on..
Обновление: я решил не использовать полифилы (с использованием <script type="module" ..), как @tfr рекомендует ниже, поскольку для меня важнее тестировать самые низкие телефоны, чем оптимизировать новые телефоны. Это более вероятно, если я запускаю полифилы на своих более современных тестовых устройствах. Тем не менее, core-js утверждает только полифил, если это необходимо. , поэтому я не уверен, действительно ли nomodules имеет значение, помимо размера пакета (я очень понимаю эту технологию, выбирая, какой части информации я доверяю своему пониманию большего). Я также решил загрузить Bootstrap и Popper прямо из браузера, а не в комплекте. Я собираюсь создать vendor.js, но не уверен, что есть какие-то преимущества, за исключением, возможно, того, что они загрузятся до полифиллов в моем пакете.
Огромное спасибо.
