передняя часть Seewo ENOW
Официальный сайт компании:CVTE (Гуанчжоу CVTE)
Команда: enow team центра программных платформ Seewo для будущего образования в рамках CVTE
Автор этой статьи:
Всем привет, яСяо Юй, обычный, но не желающий быть обычным фронтенд-разработчиком.
Сегодня я в основном хочу поговорить со всеми вами小羽как поставить одинreact老项目из构建сокращение времени70%+из.
Недавно Сяоюй взял на себя3年前старый проект
Проверьте следующую версию,react 16.0 + ts + webpack4, это нормально
Но я слышал, что есть接近一年Никто не следил за временем, и люди, знакомые с проектом, ускользали.
Прежде чем вы придете и изучите код подробно, спрос поступит.
только тяжело头皮Я на нем, к счастью, у меня есть мой导师а также兵哥Помощь со стороны.
Раннее развитие также有惊无险Все кончено.
Я только что разработал версию за последние несколько дней, а затем обнаружил, что наш проект构建时间В самом деле太久了.
XDM, если я скажу打包Реагирующему проекту на самом деле нужно150s, ты можешь в это поверить?
小羽Был также смущен
147s, что составляет 2 с половиной минуты. . .
взглянулcpu的利用率, в среднем примерно20%о. Коэффициент использования слишком низкий? Нет производительности процессора вообще发挥публично заявить.
happypack
Затем Сяоюй нашел пакет, связанный с оптимизацией пакетов webpack. Затем я обнаружил, что большая часть Интернета говорит, чтоhappypackЭтот плагин может多线程Оптимизация.
Тогда вставай.
npm install happypack --save-dev
Конфигурация примерно такая
const HappyPack = require('happypack');
const happyThreadPool = HappyPack.ThreadPool({size: require('os').cpus().length})
module.exports = {
...
module: {
rules: [
test: /\.js$/,
use: ['happypack/loader?id=js'],
],
plugins: [
...,
new HappyPack({
id: 'js',
loaders: ['babel-loader'],
threadPool: happyThreadPool,
})
]
}
}
запустить его
Ну и неплохо, перевод одиночных js уменьшен20s.
thread-loader
Тем не менее, Сяоюйcss/lessВозникла проблема с оптимизацией упаковки.
Причина в том,css/lessиспользуется вmini-css-extract-pluginЭтот стиль извлекается из подключаемого модуля, и его можно упаковать после удаления подключаемого модуля.
Проверьте нпмДокументация, обнаружил, что автор уже потерял два года断更了. . .
Потом автор порекомендовал намthread-loader, затем перейдите кthread-loaderПроверьте это.
thread-loaderКак упоминалось в загрузчике потоков, его нельзя использовать自定义加载器 API(то есть через плагины).
И порядок загрузки погрузчика从右往左,从下往上загружен.
Порядок загрузки загрузчика следующий:less-loader => css-loader => style-loader
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
],
},
Тогда проблема решена, пока мы ссылаемсяmini-css-extract-pluginфронтальная загрузкаthread-loaderОшибки не будет.
После завершения всех настроек попробуем еще раз.
Добавленthread-loaderПриближается время упаковки и сборки после оптимизации.120sСлева и справа, по сравнению с до оптимизации, уменьшены25-30s.
потомcpu的利用率Тоже наконец-то встало.На этапе компиляции загрузчика коэффициент использования можно увеличить до40%много.
terser-webpack-plugin
Но120sЭто еще долго, что мы должны делать в это время?
На самом деле в упаковке и конструкции webpack耗时较多Два шага должны бытьloader的转译так же как代码的混淆压缩. (при условии, что их два)
Перевод сделан, теперь займемся запутанным сжатием.
Глядя на проект, я обнаружил, чтоuglifyjs-webpack-pluginЭтот плагин выполняет сжатие обфускации.
Тогда посмотрите на официальном сайте
Эм, ты уверен, что не шутишь? два года назад断更了,Этот. . .
я не хочу优化! ! !
все они啥玩意какие! ! !
Хахаха,开个玩笑.
Оптимизация должна продолжаться. После этого можно только продолжить поиск информации.
Случайно я обнаружил нашего следующего главного героя——terser-webpack-plugin
Помните, если этоwebpack4версия, затем также установитьterser-webpack-pluginV4 версия. V5 версия данаwebpack5использовать.
Проект, принятый Сяоюй, здесьwebpack4, затем используйтеv4, а потом посмотрел версию плагина. v4最新的это 4.2.3
npm install terser-webpack-plugin@4.2.3 --save-dev
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
...
optimization:{
minimizer: [
new TerserPlugin({
parallel: require('os').cpus().length - 1,
terserOptions:{
compress:{
inline:false
},
mangle: {
safari10: true
}
}
})
]
}
}
parallelПараметры используются для установки вашего запуска线程数из.require('os').cpus().length - 1, что означает получить количество всех потоков на вашем компьютере - 1.
Тогда я должен упомянуть здесь,
并不是Количество запущенных потоков越多就越好(включая предыдущий загрузчик потоков).Потому что каждый раз, когда мы запускаем поток, он занимает определенное время, примерно
600ms.Например, если вы используете компьютер с 8 ядрами и 16 потоками. Давайте запустим все потоки, так что время запуска примерно
9.6s.Но когда наш проект относительно небольшой, время оригинальной упаковки может быть
5、6s, сжатое время может даже600msЕсли нет, то наша оптимизация упаковки становится负优化.так что нет
每一个项目все нужно开启Многопоточность. Вы хотите включить его? Сколько потоков открываются? Все они зависят от ситуации.
terser-webpack-pluginизterserOptionsПараметры в основном такие же, какuglifyjs-webpack-pluginсередина的uglifyOptionsЭто последовательное, прямое и плавное обновление, красивое ~
Тогда давай проверим ~
Время сборки ок.41s, мило~
Тогда взгляните на время, когда мы обфусцируем сжатиеcpu负载Он также прочен, и нагрузка на процессор может достигать самых высоких значений.92%.
Наконец, давайте посчитаем
До оптимизации147s,Оптимизированный41s, уменьшая общее106s, уменьшилось快两分钟время.
Затем рассчитаем улучшенную производительность, (147-41)/147≈0,72. продвигается72%.
резюме
В этой статье Сяоюй рассказал своим друзьям о том, как он на работе.优化Друзьям представили упаковку webpack и опыт сборки старого проектаhappypack,thread-loaderтак же какterser-webpack-pluginПрименение. Надеюсь дать вам, ребятаwebpackСборка приносит некоторые帮助, и я надеюсь, что вы, ребята, можете получить от этого что-то启发~