1. Используйте встроенную статистику webpack для анализа связанных файлов
stats: построить статистику, использовать статистику в package.json следующим образом:
"scripts":{
"build:stats": "webpack --env production --json > stats.json"
}
Если вы являетесь проектным проектом, созданным с помощью vue-cli3, вы также можете использовать его следующим образом:
"scripts":{
"build:stats": "vue-cli-service build --mode prod --json > stats.json"
}
После настройки запустите команду, она сгенерирует файл stats.json в корневом каталоге, вы можете просмотреть результаты. Таким образом, только больший первичный анализ, размер частиц.
2. Используйте Speed-Mivement-Webpack-Plugin для анализа скорости
// 安装
npm install --save-dev speed-measure-webpack-plugin
// 使用方式
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();
const webpackConfig = smp.wrap({
plugins: [
new MyPlugin(),
new MyOtherPlugin()
]
});
После настройки при запуске команды упаковки можно увидеть время выполнения каждого загрузчика и плагина.
Ссылаться на:Уууу, эта лошадь plus.com/package/SPE…
3. Используйте webpack-bundle-analyzer для анализа объема
Этот плагин должен использоваться большинством внешних партнеров!
// 安装
npm install --save-dev webpack-bundle-analyzer
// 使用
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
plugins: [
new BundleAnalyzerPlugin()
]
}
После завершения сборки соответствующий размер файла будет отображаться по адресу http://127.0.0.1:8888. Следуйте инструкциям, чтобы проанализировать размер файла зависимого стороннего модуля и размер кода компонента в бизнесе.
В-четвертых, использование многопроцессорного многоэкземплярного построения
Есть несколько вариантов параллельного парсинга ресурсов таким способом:
- загрузчик потоков (официальная рекомендация)
Принцип: каждый раз, когда веб-пакет анализирует модуль, загрузчик потоков назначает его и его зависимости рабочим потокам.
// 使用方式
module.exports={
...
module:{
rules:[
{
test:/\.js$/,
use:[{
loader:'thread-loader',
options:{
workers: 3
}
},
'babel-loader'
]
}]
}
...
}
- parallel-webpack
Обоснование: parallel-webpack позволяет запускать несколько сборок Webpack параллельно, распределяя работу по процессорам, помогая значительно ускорить сборку.
Ссылаться на:У-у-у, эта лошадь plus.com/package/afraid of the heat… - HappyPack
Обоснование: каждый раз, когда webapck анализирует модуль, HappyPack назначает его и его зависимости рабочим потокам.
Совет: Поскольку HappyPack не поддерживает загрузчик файлов и URL-адресов, не рекомендуется использовать этот загрузчик.
Рабочий механизм показан на следующем рисунке:
// 安装
npm install --save-dev happypack
// 使用
const HappyPack=require('happypack')
module.exports = {
plugins:[
new HappyPack({
id: 'jsx',
threads: 4,
loaders: [ 'babel-loader' ]
}),
new HappyPack({
id: 'styles',
threads: 2,
loaders: [ 'style-loader', 'css-loader', 'less-loader' ]
})
]
}
Ссылаться на:Woohoo. Эта лошадь Plus.com/package/harper…
Если вы используете vue-cli3 для сборки проекта, многопоточная упаковка включается автоматически.
Пять, многопроцессорный параллельный код сжатия
Способ 1: используйте плагин webpack-parallel-uglify-plugin
const parallelUglifyPlugin=require('webpack-parallel-uglify-plugin');
module.exports = {
plugins: [
new parallelUglifyPlugin({
// Optional regex, or array of regex to match file against. Only matching files get minified.
// Defaults to /.js$/, any file ending in .js.
test,
include, // Optional regex, or array of regex to include in minification. Only matching files get minified.
exclude, // Optional regex, or array of regex to exclude from minification. Matching files are not minified.
cacheDir, // Optional absolute path to use as a cache. If not provided, caching will not be used.
workerCount, // Optional int. Number of workers to run uglify. Defaults to num of cpus - 1 or asset count (whichever is smaller)
sourceMap, // Optional Boolean. This slows down the compilation. Defaults to false.
uglifyJS: {
// These pass straight through to uglify-js@3.
// Cannot be used with uglifyES.
// Defaults to {} if not neither uglifyJS or uglifyES are provided.
// You should use this option if you need to ensure es5 support. uglify-js will produce an error message
// if it comes across any es6 code that it can't parse.
},
uglifyES: {
// These pass straight through to uglify-es.
// Cannot be used with uglifyJS.
// uglify-es is a version of uglify that understands newer es6 syntax. You should use this option if the
// files that you're minifying do not need to run in older browsers/versions of node.
}
}),
],
};
Способ 2: Используйте плагин uglify-webpack-plugin и включите параметр parallel (Примечание: использовался в предыдущей версии webpack, не поддерживает синтаксис сжатия ES6)
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
optimization: {
minimizer: [new UglifyJsPlugin()],
},
};
Способ 3. Используйте подключаемый модуль terser-webpack-plugin и включите параметр parallel (рекомендуется, поддерживает сжатие синтаксиса ES6).
// 安装terset-webpack-plugin
npm install terser-webpack-plugin --save-dev
// 使用方式：
// webpack.config.js
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
optimization: minimize: true,
minimizer: [
new TerserPlugin({
parallel: true
})
]
};
6. Используйте субподряд для предварительной компиляции модулей ресурсов
Базовые пакеты vue, vuex, vue-router и базовые бизнес-пакеты могут быть упакованы в один файл.
Метод: используйте DLLPlugin для субподряда, а DllReferencePlugin ссылается на manifest.json.
Шаг 1: Используйте DLLPlugin для подпакета и создания webpack.dll.js
const path=require("path");
const webpack=require("webpack");
module.exports = {
entry:{
library:['vue','vuex','vue-router']
},
output:{
filename:'[name]_[chunkhash].dll.js',
path:path.resolve(__dirname,'./build/library'),
library:'[name]'
},
plugins: [
new webpack.DllPlugin({
name: '[name]_[hash]',
path: resolve(__dirname,'./build/library/[name].json')
})
]
}
Шаг 2: Добавьте конфигурацию в package.json:
"scripts": {
"dll": "webpack --config webpack.dll.js"
}
Запуск этой команды создаст разветвленный базовый пакет.
Шаг 3. Добавьте конфигурацию плагина, которая работает в производственной среде, в файл конфигурации веб-пакета.
module.exports={
plugins:[
new webpack.DllReferencePlugin({
manifest: require('./build/library/library.json')
}),
]
}
Седьмое, используйте кеш для повышения скорости вторичного строительства
метод:
(1) babel-loader открывает кеш
(2) terset-webpack-plugin включает кэширование (рекомендуется webpack4)
(3) Использование кэша-погрузчика или плагина Hard-Source-Webpack
8. Сузьте цель сборки
Способ 1: Например, babel-loader не анализирует node_modules
module.exports={
module:{
rules:[
{
test: /\.js$/,
loader: 'babel-loader',
exclude: 'node_modules'
}
]
}
}
Способ 2: уменьшить область поиска файлов
(1) Оптимизировать конфигурацию resolve.modules (уменьшить уровень поиска модулей)
(2) Оптимизация конфигурации resolve.mainFields
(3) Оптимизация конфигурации resolve.extensions
(4) Разумное использование псевдонима
9. Используйте встряхивание деревьев
Модуль может иметь несколько методов. Пока используется один из методов, весь файл будет помещен в пакет. Встряхивание дерева означает, что в пакет помещаются только используемые методы, а неиспользуемые методы будут добавлены на этапе удаления. стирается.
Используйте поддержку по умолчанию :webpack, установите modules: false в .babelrc. Он включен по умолчанию в производственном режиме.
Требование: должен быть синтаксис ES6, метод CJS не поддерживается.
Способ удалить бесполезный код css в процессе сборки веб-пакета. Используйте purgecss-webpack-plugin с mini-css-extract-plugin.
const glob = require('glob');
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const PurgecssPlugin = require('purgecss-webpack-plugin');
const PATHS = {
src: path.join(__dirname, 'src')
};
module.exports={
module:{
rules:[
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
},
]
},
plugins:[
new MiniCssExtractPlugin({
filename: '[name]_[contenthash:8].css'
}),
new PurgecssPlugin({
paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }),
})
]
}
10. Сжатие ресурсов изображения
Некоторые онлайн-сайты сжатия изображений можно использовать для сжатия изображений перед их импортом, или их можно сжимать с помощью инструментов в веб-пакете. Здесь мы используем загрузчик image-webpack-loader для сжатия изображений.
// 安装
npm install image-webpack-loader --save-dev
// 使用
module.exports={
rules: [{
test: /\.(gif|png|jpe?g|svg)$/i,
use: [
'file-loader',
{
loader: 'image-webpack-loader',
options: {
disable: true
},
},
],
}]
}
Наконец, как можно чаще используйте старшую версию веб-пакета и узла.Благодаря оптимизации версии многие функции встроены, а скорость упаковки веб-пакета также может быть оптимизирована.
Кроме того, в процессе использования vue-cli3 для сборки проекта, сам vue-cli3 на самом деле проделал большую оптимизацию.Приведенный выше метод оптимизации vue-cli3 уже помог нам с некоторыми оптимизациями, поэтому нам не нужно повторите настройку.Если вы хотите узнать больше, вы можете посмотреть конфигурацию vue-cli3исходный код
Выше приведены некоторые учебные заметки в процессе изучения и оптимизации упаковки веб-пакетов, которые настоящим записываются, и друзья могут обмениваться и учиться!