Alexander Abakumov
15e744da49
- Added comprehensive course structure with 11 modules - Included theoretical content, practical examples, and tasks - Multi-language code examples (Java, Rust, Node.js, Python) - Detailed analysis of architectural approaches and trade-offs - Complete caching strategies documentation - Architecture examples from real-world systems (Twitter, Netflix, Uber) - Structured navigation and learning path - Ready for educational use
358 lines
9.9 KiB
Markdown
358 lines
9.9 KiB
Markdown
# Оптимизация кода и минификация
|
|
|
|
## Навигация
|
|
- [🏠 Главная страница курса](../../../README.md)
|
|
- [📚 Модуль 10](../README.md)
|
|
|
|
---
|
|
|
|
## Принципы оптимизации кода
|
|
|
|
### 1. Минификация JavaScript/TypeScript
|
|
|
|
**Цели минификации:**
|
|
- Уменьшение размера файлов
|
|
- Ускорение загрузки страниц
|
|
- Снижение трафика
|
|
- Улучшение производительности
|
|
|
|
**Инструменты минификации:**
|
|
|
|
```javascript
|
|
// webpack.config.js - Конфигурация минификации
|
|
const TerserPlugin = require('terser-webpack-plugin');
|
|
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
|
|
|
|
module.exports = {
|
|
mode: 'production',
|
|
optimization: {
|
|
minimize: true,
|
|
minimizer: [
|
|
new TerserPlugin({
|
|
terserOptions: {
|
|
compress: {
|
|
drop_console: true, // Удаление console.log
|
|
drop_debugger: true, // Удаление debugger
|
|
pure_funcs: ['console.log'], // Удаление чистых функций
|
|
dead_code: true, // Удаление мертвого кода
|
|
unused: true, // Удаление неиспользуемых переменных
|
|
},
|
|
mangle: {
|
|
toplevel: true, // Обфускация глобальных переменных
|
|
properties: {
|
|
regex: /^_/ // Обфускация приватных свойств
|
|
}
|
|
},
|
|
format: {
|
|
comments: false // Удаление комментариев
|
|
}
|
|
},
|
|
extractComments: false
|
|
}),
|
|
new CssMinimizerPlugin({
|
|
minimizerOptions: {
|
|
preset: [
|
|
'default',
|
|
{
|
|
discardComments: { removeAll: true },
|
|
normalizeWhitespace: true,
|
|
colormin: true,
|
|
minifySelectors: true
|
|
}
|
|
]
|
|
}
|
|
})
|
|
],
|
|
splitChunks: {
|
|
chunks: 'all',
|
|
cacheGroups: {
|
|
vendor: {
|
|
test: /[\\/]node_modules[\\/]/,
|
|
name: 'vendors',
|
|
chunks: 'all',
|
|
},
|
|
common: {
|
|
name: 'common',
|
|
minChunks: 2,
|
|
chunks: 'all',
|
|
enforce: true
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
```
|
|
|
|
**Java примеры - Оптимизация сборки:**
|
|
|
|
```gradle
|
|
// build.gradle - Оптимизация Java приложения
|
|
plugins {
|
|
id 'java'
|
|
id 'org.springframework.boot' version '3.0.0'
|
|
}
|
|
|
|
java {
|
|
toolchain {
|
|
languageVersion = JavaLanguageVersion.of(17)
|
|
}
|
|
}
|
|
|
|
tasks.withType(JavaCompile) {
|
|
options.compilerArgs += [
|
|
'-parameters', // Сохранение имен параметров
|
|
'-Xlint:unchecked', // Предупреждения о небезопасных операциях
|
|
'-Xlint:deprecation' // Предупреждения об устаревших API
|
|
]
|
|
}
|
|
|
|
// Оптимизация JAR файла
|
|
jar {
|
|
enabled = false
|
|
archiveClassifier = ''
|
|
}
|
|
|
|
bootJar {
|
|
enabled = true
|
|
archiveClassifier = ''
|
|
|
|
// Исключение ненужных файлов
|
|
exclude 'META-INF/*.SF', 'META-INF/*.DSA', 'META-INF/*.RSA'
|
|
|
|
// Оптимизация манифеста
|
|
manifest {
|
|
attributes(
|
|
'Main-Class': 'com.example.Application',
|
|
'Implementation-Version': project.version,
|
|
'Built-By': System.getProperty('user.name'),
|
|
'Built-Date': new Date().toString()
|
|
)
|
|
}
|
|
}
|
|
```
|
|
|
|
**Rust примеры - Оптимизация компиляции:**
|
|
|
|
```toml
|
|
# Cargo.toml - Оптимизация Rust приложения
|
|
[package]
|
|
name = "my-app"
|
|
version = "0.1.0"
|
|
edition = "2021"
|
|
|
|
[profile.release]
|
|
# Максимальная оптимизация
|
|
opt-level = 3
|
|
# Оптимизация размера
|
|
lto = true
|
|
# Удаление отладочной информации
|
|
debug = false
|
|
# Оптимизация кода
|
|
codegen-units = 1
|
|
# Оптимизация паники
|
|
panic = "abort"
|
|
# Оптимизация размера
|
|
strip = true
|
|
|
|
[profile.release.package."*"]
|
|
# Оптимизация всех зависимостей
|
|
opt-level = 3
|
|
|
|
# Дополнительные флаги компиляции
|
|
[build]
|
|
rustflags = [
|
|
"-C", "target-cpu=native", # Оптимизация под текущий CPU
|
|
"-C", "link-arg=-s", # Удаление символов
|
|
"-C", "opt-level=3", # Максимальная оптимизация
|
|
"-C", "lto=fat", # Link Time Optimization
|
|
]
|
|
```
|
|
|
|
**Python примеры - Оптимизация:**
|
|
|
|
```python
|
|
# Оптимизация Python приложения
|
|
import sys
|
|
from typing import List, Dict, Optional
|
|
from dataclasses import dataclass
|
|
from functools import lru_cache
|
|
import asyncio
|
|
import aiohttp
|
|
|
|
# Оптимизированная структура данных
|
|
@dataclass(frozen=True, slots=True) # slots для экономии памяти
|
|
class OptimizedUser:
|
|
id: int
|
|
name: str
|
|
email: str
|
|
status: int # 1 = active, 0 = inactive
|
|
|
|
def is_active(self) -> bool:
|
|
return self.status == 1
|
|
|
|
# Кэширование для оптимизации
|
|
class OptimizedUserService:
|
|
def __init__(self):
|
|
self._users_cache: Dict[int, OptimizedUser] = {}
|
|
self._session: Optional[aiohttp.ClientSession] = None
|
|
|
|
async def __aenter__(self):
|
|
self._session = aiohttp.ClientSession(
|
|
connector=aiohttp.TCPConnector(
|
|
limit=100, # Пул соединений
|
|
limit_per_host=30,
|
|
ttl_dns_cache=300,
|
|
use_dns_cache=True,
|
|
),
|
|
timeout=aiohttp.ClientTimeout(total=30)
|
|
)
|
|
return self
|
|
|
|
async def __aexit__(self, exc_type, exc_val, exc_tb):
|
|
if self._session:
|
|
await self._session.close()
|
|
|
|
# LRU кэш для часто используемых методов
|
|
@lru_cache(maxsize=1000)
|
|
def get_user_by_id_cached(self, user_id: int) -> Optional[OptimizedUser]:
|
|
return self._users_cache.get(user_id)
|
|
|
|
# Batch операции
|
|
async def get_users_batch(self, user_ids: List[int]) -> List[OptimizedUser]:
|
|
tasks = [self._fetch_user_async(user_id) for user_id in user_ids]
|
|
results = await asyncio.gather(*tasks, return_exceptions=True)
|
|
|
|
users = []
|
|
for result in results:
|
|
if isinstance(result, OptimizedUser):
|
|
users.append(result)
|
|
|
|
return users
|
|
```
|
|
|
|
### 2. Оптимизация изображений
|
|
|
|
```javascript
|
|
// webpack.config.js - Оптимизация изображений
|
|
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
|
|
|
|
module.exports = {
|
|
module: {
|
|
rules: [
|
|
{
|
|
test: /\.(jpe?g|png|gif|svg)$/i,
|
|
type: 'asset',
|
|
parser: {
|
|
dataUrlCondition: {
|
|
maxSize: 8 * 1024 // 8kb
|
|
}
|
|
},
|
|
generator: {
|
|
filename: 'images/[name].[hash:8][ext]'
|
|
}
|
|
}
|
|
]
|
|
},
|
|
optimization: {
|
|
minimizer: [
|
|
new ImageMinimizerPlugin({
|
|
minimizer: {
|
|
implementation: ImageMinimizerPlugin.imageminMinify,
|
|
options: {
|
|
plugins: [
|
|
['gifsicle', { interlaced: true }],
|
|
['jpegtran', { progressive: true }],
|
|
['optipng', { optimizationLevel: 5 }],
|
|
[
|
|
'svgo',
|
|
{
|
|
plugins: [
|
|
{
|
|
name: 'preset-default',
|
|
params: {
|
|
overrides: {
|
|
removeViewBox: false,
|
|
},
|
|
},
|
|
},
|
|
],
|
|
},
|
|
],
|
|
],
|
|
},
|
|
},
|
|
}),
|
|
],
|
|
},
|
|
};
|
|
```
|
|
|
|
### 3. Оптимизация CSS
|
|
|
|
```css
|
|
/* Оптимизированный CSS */
|
|
/* Удаление неиспользуемых стилей */
|
|
/* Минификация селекторов */
|
|
/* Объединение правил */
|
|
|
|
/* До оптимизации */
|
|
.header {
|
|
background-color: #ffffff;
|
|
padding: 20px;
|
|
margin: 0;
|
|
border: 1px solid #cccccc;
|
|
}
|
|
|
|
.header .title {
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
}
|
|
|
|
/* После оптимизации */
|
|
.header{background:#fff;padding:20px;margin:0;border:1px solid #ccc}
|
|
.header .title{font:bold 24px/1 sans-serif;color:#333}
|
|
```
|
|
|
|
### 4. Оптимизация загрузки ресурсов
|
|
|
|
```html
|
|
<!-- Lazy loading изображений -->
|
|
<img src="placeholder.jpg"
|
|
data-src="large-image.jpg"
|
|
loading="lazy"
|
|
alt="Описание">
|
|
|
|
<!-- Preload критических ресурсов -->
|
|
<link rel="preload" href="critical.css" as="style">
|
|
<link rel="preload" href="app.js" as="script">
|
|
|
|
<!-- Prefetch для будущих ресурсов -->
|
|
<link rel="prefetch" href="next-page.js">
|
|
<link rel="prefetch" href="next-page.css">
|
|
|
|
<!-- DNS prefetch -->
|
|
<link rel="dns-prefetch" href="//fonts.googleapis.com">
|
|
<link rel="dns-prefetch" href="//cdn.example.com">
|
|
```
|
|
|
|
### 5. Оптимизация базы данных
|
|
|
|
```sql
|
|
-- Оптимизация запросов
|
|
-- Использование индексов
|
|
CREATE INDEX idx_user_email ON users(email);
|
|
CREATE INDEX idx_order_date ON orders(created_at);
|
|
|
|
-- Оптимизация JOIN
|
|
SELECT u.id, u.name, COUNT(o.id) as order_count
|
|
FROM users u
|
|
LEFT JOIN orders o ON u.id = o.user_id
|
|
WHERE u.created_at > '2023-01-01'
|
|
GROUP BY u.id, u.name;
|
|
|
|
-- Партиционирование таблиц
|
|
CREATE TABLE orders_2023 PARTITION OF orders
|
|
FOR VALUES FROM ('2023-01-01') TO ('2024-01-01');
|
|
```
|