задний план
В прошлой статье рассказывалось об оптимизации первого экрана, подробности в статье.Оптимизация мобильного спа-центра (1) --- оптимизация первого экрана, на этот раз давайте поделимся некоторым опытом оптимизации скорости упаковки, потому что в реальной разработке проекта, по мере того, как проект продолжает расти и количество зависимостей продолжает увеличиваться, мы обнаружим, что скорость упаковки веб-пакета будет становиться все медленнее и медленнее, и иногда npm run Может быть достаточно времени, чтобы сходить в туалет. В эту быстро развивающуюся эпоху такие медленные вещи никогда не допускаются. В этой статье в качестве примера будет использован спа-центр компании, чтобы представить опыт оптимизации упаковки. скорость в деталях.
Начинать
Стартовым шаблоном проекта компании является шаблон веб-пакета vue-cli.Проект завершен примерно на 30 страницах.Время упаковки до оптимизации показано на рисунке:
Затем начните оптимизацию Оптимизация в основном делится на четыре аспекта: уменьшение количества упакованных файлов, уменьшение ненужных функциональных накладных расходов, оптимизация метода упаковки и обновление инструментов упаковки.
1. Уменьшите количество упакованных файлов
Руководящая идеология: чем меньше вещей упаковать, тем быстрее, естественно, будет скорость.
1.dll
Группа плагинов webpack.DllPlugin + webpack.DllReferencePlugin должна основываться на идее dll, поэтому она называется dllplugin, Цель — интегрировать vue, vue-router, react, jquery и т. д., которые относительно велики и нечасто обновляется в проекте.Пакет извлекается и упаковывается отдельно, а затем говорите webpack, что я уже упаковывал эти пакеты раньше.Вы можете использовать его напрямую каждый раз, когда вы его упаковываете, и вам не нужно каждый раз переупаковывать его.
Инструкции:
- Создайте новый файл webpack.dll.conf.js в папке сборки, содержимое можно записать следующим образом:
const path = require('path')
const webpack = require('webpack')
module.exports = {
entry:{
//这地方写你想抽离的包，可以参考你的package.json文件下的dependencies
vue:['vue','vue-router']
},
output:{
//这地方写你打包后生成文件的路径
path:path.join(__dirname,"../src/dll"),
filename:'[name].dll.js',
library:'[name]'
},
plugins:[
//这个插件是重点，用于打包上面entry里配置的包
new webpack.DllPlugin({
path:path.join(__dirname,"../src/dll",'[name]-manifest.json'),
name:'[name]',
}),
new webpack.optimize.UglifyJsPlugin()
]
}
- воплощать в жизнь
webpack --config build/webpack.dll.conf.jsУпаковка создает абстрактный общедоступный пакет.
На этом этапе вы должны увидеть каталог dll и сгенерированные общедоступные пакеты js и json в src. - Настройте DllReferencePlugin в обычном файле конфигурации веб-пакета для ассоциации
plugins: [
new webpack.DllReferencePlugin({
//这里写上一步打包出的json路径
manifest:require('../src/dll/vue-manifest.json')
})
......
]
Теперь можно снова запаковать.Чем больше сторонних пакетов вы извлечете, тем очевиднее будет оптимизация скорости упаковки. Если вы хотите, чтобы упакованный html автоматически импортировал файл dll.js, упакованный на втором этапе, вы можете использовать add-asset-html-webpack-plugin или самостоятельно изменить конфигурацию HtmlWebpackPlugin, чтобы автоматически импортировать файл dll.js в упакованный html.
Подробную информацию о настройке HtmlWebpackPlugin см. в этой статье:
Полное объяснение использования html-webpack-plugin
Подробную информацию о настройке add-asset-html-webpack-plugin см. в этой статье:
конфигурация add-asset-html-webpack-плагина
Кроме того, также можно использовать cdn для импорта пакетов, а затем добавить внешнюю конфигурацию.Идея та же, что и у dll, которая заключается в извлечении сторонних пакетов и упаковке только бизнес-кода, но таким образом, сторонние пакеты напрямую ссылаются на cdn.
2. Сократите ненужные решения
- Посмотрите, есть ли какие-либо дополнительные разрешения во включении под каждым правилом веб-пакета, или посмотрите, исключена ли папка node_modules.
- Если используется babel-loader, не забудьте установить cacheDirectory, чтобы воспользоваться преимуществами кеша bable.
- Расширения в разрешении могут удалить ненужное автозаполнение имен суффиксов и сократить время запроса веб-пакета, например
extensions: ['.js', '.vue', '.json','.scss','.css'],При написании такого количества кодов автодополнения имя суффикса сохраняется, но для этого требуется, чтобы веб-пакет автоматически запрашивал суффикс при упаковке, что увеличивает временные затраты. - Используйте полный путь вместо имени каталога при импорте, например
import './components/scroll/index.js'вместоimport './components/scroll, уменьшите запрос пути webpack.
2. Удалите ненужные функциональные накладные расходы
Основная идея: сократить объем дополнительной работы в процессе упаковки.
Наша цель — оптимизировать скорость упаковки, чтобы лишние функции, не имеющие к этому отношения, можно было сначала приостановить, а потом включать по необходимости.
Отключите исходную карту.
sourcemap имеет следующие значения конфигурации:
eval： 生成代码 每个模块都被eval执行，并且存在@sourceURL
cheap-eval-source-map： 转换代码（行内） 每个模块被eval执行，并且sourcemap作为eval的一个dataurl
cheap-module-eval-source-map： 原始代码（只有行内） 同样道理，但是更高的质量和更低的性能
eval-source-map： 原始代码 同样道理，但是最高的质量和最低的性能
cheap-source-map： 转换代码（行内） 生成的sourcemap没有列映射，从loaders生成的sourcemap没有被使用
cheap-module-source-map： 原始代码（只有行内） 与上面一样除了每行特点的从loader中进行映射
source-map： 原始代码 最好的sourcemap质量有完整的结果，但是会很慢
Когда нам не нужно отлаживать, мы можем отключить исходную карту или понизить уровень исходной карты, чтобы ускорить упаковку.
3. Оптимизируйте метод упаковки: параллельный
Руководящая идеология: Параллельная упаковка, конечно, быстрее.
1.UglifyJSPplugin параллельно
Это лучше настроить, просто добавить атрибут parallel to true под плагином UglifyJSPlugin.
new UglifyJSPlugin({
parallel: true
......
})
Вы также можете установить кеш упаковки, подробности см. В следующей конфигурации.
2.Happypack
Happypack использует модель с несколькими процессами для ускорения создания кода.
Например, если раньше vue-loader использовался для последовательной обработки vue-файлов, то теперь happypack можно использовать для параллельной обработки vue-файлов с помощью vue-loader.
- Сначала установите HappyPack
npm install --save-dev happypack - Изменить webpack.base.config.js
const HappyPack = require('happypack');
const vueLoaderConfig = require('./vue-loader.conf')
exports.module = {
rules: [
{
test: /\.vue$/,
//vue-loader替换为happypack/loader，如果遇到vue文件就用happypack,id指定为vue
loader: 'happypack/loader?id=vue'
},
{
test: /\.js$/,
//babel-loader替换为happypack/loader，如果遇到js文件就用happypack,id指定为js
loader: 'happypack/loader?id=js'
}
......
]
};
exports.plugins = [
new HappyPack({
id：'vue',
//同时开多少线程进行打包，也可以用ThreadPool控制
threads: 4,
loaders: [{
//这是真实的处理loader，具体配置和rules里原本的一致，options也照搬过来就行
loader:'vue-loader'，
options：vueLoaderConfig
}]
}),
new HappyPack({
id: 'js',
threads: 3,
loaders: [{
loader:'bable-loader'，
}]
})
......
];
После приведенной выше конфигурации мы можем использовать happypack для счастливой упаковки.
Для более продвинутой настройки смотрите документацию:Документация Happypack
Кроме того, если вы хотите понять принцип работы happypack, вы можете прочитать эту статью от команды Taobao:Анализ принципа happypack
4. Обновите инструмент упаковки
Руководящая идеология: заменить дробовики пушками, обновить инструменты упаковки.
- узел обновления
- обновить веб-пакет
webpack4 быстрее, чем 3, а 3 быстрее, чем 2. Рекомендуется обновить webpack как минимум до 3 или выше.4 не очень стабилен, и есть много ям для принудительного обновления.
- Обновление различных загрузчиков
Много раз нам уже помогали великие боги оптимизировать нижний слой, нам вообще ничего не нужно настраивать, нужно только обновить инструменты, конечно, при обновлении должна быть обеспечена надежность проекта.
наконец
Картинка стоит тысячи слов, и это оптимизированное время упаковки:
Время упаковки было сокращено с первоначальных 120 с до нынешних 34 с, а уровень оптимизации составляет более 70%. Не нужно ходить в туалет каждый раз, когда вы запускаете npm. . .
Справочная статья:
Используйте webpack для настройки среды разработки переднего плана
решение для оптимизации упаковки webpack