Путь оптимизации Webpack4

внешний интерфейс сервер браузер Webpack

Введение

Webpack4 материалНа основе webpack4 обобщены некоторые распространенные конфигурации webpack, но различные мощные конфигурации webpack иногда могут вас перегружать, упаковывать множество файлов, а также просматривать и анализировать множество файлов. . . . . Короче говоря, эти операции сделают процесс упаковки веб-пакета очень медленным, поэтому нам нужно оптимизировать некоторые конфигурации в процессе разработки, чтобы веб-пакет лучше служил нашей разработке.

DLL библиотеки динамической компоновки

То есть код базового модуля упаковывается в библиотеку динамической компоновки, такую ​​как обычно используемые react, vue и т. д. Когда импортируемый модуль находится в библиотеке динамической компоновки, модуль не может быть снова упакован, но полученный из библиотеки динамической компоновки.

  1. Создайте файл webpack.dll.config.js для упаковки общих библиотек классов в dll.
module.exports = {
    entry: {
        react: ['vue'] //vue模块打包到一个动态连接库
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].dll.js', //输出动态连接库的文件名称
        library: '_dll_[name]' //全局变量名称
    },
    plugins: [
        new webpack.DllPlugin({
            name: '_dll_[name]', //和output.library中一致，也就是输出的manifest.json中的 name值
            path: path.join(__dirname, 'dist', '[name].manifest.json')
        })
    ]
}
webpack --config webpack.dll.config.js --mode production
  1. Добавьте следующий код в файл оперативной конфигурации webpack.config.js.
plugins: [
 new webpack.DllReferencePlugin({
       manifest: require(path.join(__dirname, 'dist', 'vue.manifest.json')),
   })
]
webpack --config webpack.config.js --mode development

Это позволит получить vue из dll, и нет необходимости снова упаковывать vue.

Горячая замена Webpack HMR

Горячая замена модуля (сокращенно HMR) — одна из самых полезных функций в веб-пакете. Когда вы изменяете и сохраняете код, веб-пакет переупаковывает код и отправляет новый модуль в браузер. Новый модуль заменяет старый модуль, так что приложение можно обновить, не обновляя браузер. Таким образом, сокращается много времени.の. . . . Например, если на странице есть модальное окно, вам нужно нажать кнопку, чтобы вызвать модальное отображение.В процессе разработки, если вы измените стиль модального окна и запустите браузер для обновления, вам нужно нажать кнопку кнопку еще раз, чтобы увидеть измененный модальный стиль, но горячая замена не требует обновления браузера, и измененные изменения можно наблюдать непосредственно.вышеБыло введено использование watch, но watch предназначен для переупаковки, когда файлы изменяются во время упаковки, а HMR — для webpack-dev-server.

  1. Конфигурация devserver выглядит следующим образом
devServer: {//配置此静态文件服务器，可以用来预览打包后项目
    inline:true,//打包后加入一个websocket客户端
    hot:true,//热加载
    contentBase: path.resolve(__dirname, 'dist'),//开发服务运行时的文件根目录
    host: 'localhost',//主机地址
    port: 9090,//端口号
    compress: true//开发服务器是否启动gzip等压缩
}
  1. Добавьте следующие две строки в элемент конфигурации плагинов
 new webpack.HotModuleReplacementPlugin(),
 new webpack.NamedModulesPlugin()//用户名替代id

3. Изменения в бизнес-коде

if(module.hot) {
    module.hot.accept('./hello.js', function() {
        div.innerHTML = hello()
    })
}
  1. Анализ принципа и процесса Общий процесс выглядит следующим образом: webpack-dev-server может установить веб-сокет для связи с браузером.После того, как новый файл будет упакован, webpack-dev-server сообщит браузеру это сообщение, после чего браузер может автоматически обновить страницу или выполнить горячую замену. Когда модуль b изменяется, и в модуле нет кода HMR (аналогичного коду в 3 выше) для обработки сообщения, тогда сообщение будет доставлено другим модулям, которые зависят от модуля b; если сообщение находится в If новый модуль не захвачен, он будет доставлен повторно, если все сообщения захвачены, то наше приложение должно было быть обновлено по коду, в противном случае, если есть сообщение, пузыри к входу (входу) файла не было Если он захвачен, значит в нашем коде нет такого метода изменения, тогда webpack обновит страницу браузера, то есть откатится от HMR к LiveReload.

Tree Shaking

Встряхивание дерева — это термин, обычно используемый для описания удаления неиспользуемого кода из контекста JavaScript. Этот термин и концепция фактически возникли из набора инструментов для упаковки модулей ES2015. Вы можете думать о приложении как о дереве. Зеленый цвет указывает на фактически используемые исходный код и библиотеку, которые являются живыми листьями на дереве. Серый представляет бесполезный код, увядшие листья на осенних деревьях. Чтобы убрать опавшие листья, нужно встряхнуть дерево, чтобы они упали. Однако Tree Shaking от webpakc опирается на статический модульный синтаксис ES6, то есть импортирует и экспортирует код посредством импорта и экспорта, и требует введения минификатора (например, UglifyJSPlugin), который может удалить неиспользуемый код (мертвый код) или запустить команду. использование веб-пакета --display-used-exports --optimize-minimize --mode production

Например следующий код

export function getName() {
    return 'hello world';
}
export function getAge() {
    return 9999;
}

Если вы сошлетесь только на один из них, то остальные неиспользуемые будут удалены с помощью Tree Shaking, который будет проигнорирован при упаковке.

{
    test: /\.js/,
    use: {
        loader: 'babel-loader',
        query: {
            presets: ["env", {
+                                   modules: false //关闭 Babel 的模块转换功能，保留原本的 ES6 模块化语法
+                               }]
        }
    }
}
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
plugins: [
    new UglifyJSPlugin()
 ]
webpack --display-used-exports --optimize-minimize

Извлечь общедоступный код

Это изменение по-прежнему очень большое.В предыдущей версии webpack использовался commonchunkplugin, но webpack4 начал использоватьcommon-chunk-and-vendor-chunkКонфигурация выглядит следующим образом:

optimization: {
	splitChunks: {
		cacheGroups: {
			commons: {
				chunks: "initial",
				minChunks: 2,
				maxInitialRequests: 5, // The default limit is too small to showcase the effect
				minSize: 0 // This is example is too small to create commons chunks
			},
			vendor: {
				test: /node_modules/,
				chunks: "initial",
				name: "vendor",
				priority: 10,
				enforce: true
			}
		}
	}
}

Scope Hoisting

Подъем области действия, который был представлен в webpack3. Это делает код меньше, потому что оператор объявления функции генерирует много кода.

const ModuleConcatenationPlugin = require('webpack/lib/optimize/ModuleConcatenationPlugin');
plugins: [
// 开启 Scope Hoisting
new ModuleConcatenationPlugin(),
],

CDN

Для обработки статических ресурсов хорошим выбором будет установка CDN.Способ настройки CDN в webpack следующий:

output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name]_[hash:8].js',
    publicPath: 'http://static.xxxx.com/'
},

HappyPack для мультипроцесса

HappyPack позволяет Webpack разбивать задачу на несколько подпроцессов для одновременного выполнения.После обработки подпроцессов результат отправляется основному процессу.Количество подпроцессов равно количеству ЦП минус 1, которое необходимо быть изменены в загрузчике следующим образом

 use: 'happypack/loader?id=babel',

И добавьте в плагин следующий код:

new HappyPack({
    id: 'babel',
    //如何处理.js文件，和rules里的配置相同
    loaders: [{
        loader: 'babel-loader',
        query: {
            presets: [
                "env", "stage-0"
            ]
        }
    }]
}),

резюме

Выше приведены некоторые распространенные схемы оптимизации в конфигурации веб-пакета, но в соответствии с разными проектами схемы, которые необходимо выбрать, не совпадают. Я думаю, что стоит попробовать больше и выбрать конкретную схему оптимизации в соответствии с конкретной средой. .

Категории