1. Оптимизация времени сборки.
Во-первых, это оптимизация времени сборки
(1), многопроцессная упаковка потокового загрузчика
может значительно повысить скорость сборки.Метод использования заключается в том, чтобы поставить поток-загрузчик перед загрузчиком, который занимает больше времени, например, Babel-loade. И стартап-проекты, и проекты упаковки необходимо ускорять, поэтому они настраиваются в webpack.base.js.
npm i thread-loader -D
// webpack.base.js
{
test: /.js$/,
use: [
'thread-loader'
'babel-loader'
]
}
(2) кэш-загрузчик
кэширует ресурсы для повышения скорости вторичной сборки. Метод использования заключается в том, чтобы поместить кэш-загрузчик перед загрузчиком, который занимает больше времени, например, Babel-loader. Поскольку как проекты запуска, так и проекты упаковки должны быть ускоренные, они настраиваются в webpack.base.is
npm i cache-loader -D
// webpack.base.is
{
test: /\.js$/,
use: [
'cache-loader'
'thread-loader',
'babel-loader'
],
}
(3) Включите горячее обновление.
Например, если вы измените определенный файл в проекте, это приведет к обновлению всего проекта, что отнимает очень много времени. Если вы обновите только модифицированный модуль и оставите остальные как есть, это значительно увеличит время пересборки модифицированного кода.Он используется только для разработки, поэтому настраивается в webpack.devjs.
// webpack.dev. js
const webpack = require( 'webpack');
//使用webpack提供的热更新插件
plugins: [
new webpack. HotModuleReplacementPlugin ()
// 最后需要在我们的devserver中配置
devServer: {
hot: true
}
]
(4) исключать и включать
исключать: файлы, которые не нуждаются в обработке,
включать: файлы, которые необходимо обрабатывать
Правильная настройка этих двух свойств может значительно повысить скорость сборки.
// webpack.base.is
{
test:/\.js$/,//使用include来指定得泽文件夹
include: path.resolve(_dirname, '../src')
//使用exclude排除指定文件夹
exclude: /node_modules/,
use: [
'babel-loader'
]
},
(5) Создание дифференцированных сред.
Очень важно строить дифференцированные среды. Мы должны четко знать, какие конфигурации нам нужны, а какие не нужны при разработке среды, а также какие конфигурации нужны, а какие не нужны при упаковке продукции. среда:
- Среда разработки: удаление сжатия кода, gzip, точек громкости.
- Анализ и другие оптимизированные конфигурации значительно повышают скорость сборки.
- Производственная среда: для значительного уменьшения конечного объема упаковки проекта необходимы оптимизированные конфигурации, такие как сжатие кода, gzip и анализ объема.
(6) Улучшите версию веб-пакета.
Чем новее версия веб-пакета, тем лучше будет эффект упаковки.
2. Оптимизация объема упаковки
в основном предназначена для оптимизации общего объема упакованного проекта, что полезно для повышения скорости загрузки страницы после выхода проекта в Интернет (
1) Сжатие кода CSS
Сжатие кода CSS использует css-minimizer-webpack-plugin, эффект включает в себя сжатие и дедупликацию кода. Сжатие занимает много времени, поэтому используется только при упаковке проектов, поэтому его нужно настроить только в webpack.prod.js.
npm i css-minimizer-webpack-plugin -D
// webpack.prod.]s
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
optimization: {
minimizer: [
new CssMinimizerplugin()，//去重压缩CSS
],
}
(2) Сжатие кода JS Сжатие кода
JS использует terser-webpack-plugin для сжатия упакованного кода JS. Сжатие кода
требует много времени, поэтому оно используется только при упаковке проектов
, поэтому его необходимо настроить только в webpack.prodljs.
npm i terser-webpack-plugin -D
// webpack.prod.js
const TerserPlugin = require ('terser-webpack-plugin')
optimization: {
minimizer: [
new CssMinimizerPlugin()，//去重压缩css
new TerserPlugin({
//压缩JS代码
terserOptions: {
compress: {
drop_console: true, // 去除console
}，// 压缩JavaScript
}),
],
}
(3) встряхивание дерева
Простая функция встряхивания дерева заключается в следующем: упаковывается только используемый код, неиспользуемый код не упаковывается, а webpack5
включает встряхивание дерева по умолчанию. автоматически включается. Провести оптимизацию.
module.exports = {
mode: 'production'
}
(4) Функция исходной карты типа source
-map призвана помочь вам определить местоположение кода ошибки при сообщении об ошибке. Его размер нельзя недооценивать, поэтому для разных сред необходимо устанавливать разные типы.
• Среда разработки
. При разработке среды нам необходимо иметь возможность точно определить местонахождение кода ошибки.
// webpack.dev.js
module. exports = {
mode: 'development',
devtool: 'eval-cheap-module-source-map'
}
•Производственная среда
. Если в производственной среде мы хотим включить исходную карту, но не хотим, чтобы размер был слишком большим, мы можем изменить тип.
// webpack.prod.js
module. exports = {
mode: 'production',
devtool: 'nosources-source-map'
}
(5) Анализ объема упаковки. Используйте webpack-bundle-analyzer для проверки распределения объема после упаковки, а затем выполните соответствующую оптимизацию объема. Вам нужно смотреть только на объем при упаковке, поэтому вам нужно только настроить js
в webpack.prod .js. Скопировать код
npm i webpack-bundle-analyzer -D
jsСкопировать код
// webpack.prod.]s
const {
BundleAnalyzerPlugin } = require ('webpack-bundle-analyzer')
plugins: [
new BundleAnalyzerPlugin (),
]
3. Оптимизация взаимодействия с пользователем
(1) Отложенная загрузка модулей.
Если отложенная загрузка модулей не выполняется, весь код проекта будет упакован в файл js.
Размер велик, поэтому при запросе пользователя веб-страница, первый экран . Время загрузки будет относительно продолжительным. После использования модуля отложенной загрузки большой
js-файл будет разделен на несколько маленьких js-файлов. Когда веб-страница загружается, она будет загружаться по требованию, что значительно улучшает скорость загрузки первого экрана.
// src/router/index.js
const routes = [
{
path: '/login',
name: 'login',
component: () => import('../views/login/login.vue')
},
{
path: '/home',
name: 'home'
//懒加载
component: () => import('../views/home/home.vue')
},
]
(2) Сжатие Gzip
После включения Gzip скорость загрузки страницы пользователя значительно увеличивается, поскольку объем gzip намного меньше, чем исходный файл, что, конечно, требует сотрудничества с серверной частью
.
оптимизация объема при упаковке, поэтому вам нужно только
настроить в webpack.prod.js
npm i compression-webpack-plugin -D
// webpack.prod.]s
const CompressionPlugin = require ('compression-webpack-plugin')
plugins: [
// 之前的代码。
// gzip
new CompressionPlugin ( {
algorithm: 'gzip',
threshold: 10240,
minatio: 0.8
})
]
(3) Преобразование небольших изображений в base64.
Некоторые небольшие изображения можно преобразовать в base64, что может уменьшить количество сетевых HTTP-запросов пользователей и улучшить взаимодействие с пользователем. URL-загрузчик в webpack5 больше не используется. Вместо этого используйте
asset-module
для настройки js в webpack.base.js.
Скопируйте код
// webpack.base.is
{
test: /\.(png|jpe?g|gif|svg|webp)$/,
type: 'asset'
parser: {
// 转base64的条件
dataUrlCondition: {
maxSize: 25 * 1024, // 25kb
},
generator: {
//打包到 image 文件下
filename: 'images/[contenthash][ext][query]',
},
(4) Правильно настройте хеш.
Мы должны гарантировать, что измененные файлы должны обновлять хеш-значение, в то время как неизмененные файлы по-прежнему сохраняют исходное хэш-значение. Это может гарантировать, что после выхода в Интернет файлы, которые не изменились при работе браузера доступ к ним попадет в кеш, поэтому для достижения оптимизации производительности
настройте его в webpack.base.js.
// webpack.base.is
output: {
path: path.resolve(__dirname, '../dist'),
filename: 'js/chunk-[contenthash].js',
clean: true,