国产一区二区精品-国产一区二区精品久-国产一区二区精品久久-国产一区二区精品久久91-免费毛片播放-免费毛片基地

千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機(jī)構(gòu)

手機(jī)站
千鋒教育

千鋒學(xué)習(xí)站 | 隨時(shí)隨地免費(fèi)學(xué)

千鋒教育

掃一掃進(jìn)入千鋒手機(jī)站

領(lǐng)取全套視頻
千鋒教育

關(guān)注千鋒學(xué)習(xí)站小程序
隨時(shí)隨地免費(fèi)學(xué)習(xí)課程

當(dāng)前位置:首頁(yè)  >  技術(shù)干貨  > webpack vendor詳解

webpack vendor詳解

來源:千鋒教育
發(fā)布人:xqq
時(shí)間: 2023-11-24 18:53:45 1700823225

一、入門介紹

Webpack是一個(gè)模塊化的打包工具,可以將JavaScript的模塊化打包成單個(gè)文件。Webpack是面向現(xiàn)代JavaScript應(yīng)用程序的最佳選擇之一,并且它有許多插件可以擴(kuò)展它的功能,其中之一就是Webpack-Vendor插件。

Webpack-Vendor插件用于將第三方庫(kù)和依賴項(xiàng)打包成單獨(dú)的文件(通常命名為vendor.js),從而加快應(yīng)用程序的加載速度。例如,假設(shè)您的應(yīng)用程序依賴于React和Lodash庫(kù)。在使用Webpack-Vendor插件后,React和Lodash將被打包到vendor.js文件中,從而使這兩個(gè)庫(kù)在應(yīng)用程序加載時(shí)更快地加載。

要使用Webpack-Vendor插件,您需要安裝它并將其配置為Webpack的插件。下面是一個(gè)簡(jiǎn)單的配置示例:


const webpack = require('webpack');

module.exports = {
    entry: {
        app: './src/index.js'
    },
    output: {
        filename: '[name].[chunkhash].js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            minChunks: function (module) {
                return module.context && module.context.indexOf('node_modules') !== -1;
            }
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'manifest',
            minChunks: Infinity
        })
    ]
};

二、代碼分割

Webpack-Vendor插件可以與Webpack的代碼分割功能結(jié)合使用,從而進(jìn)一步提高應(yīng)用程序的加載速度。代碼分割是一種將代碼拆分成更小的塊的技術(shù),從而使應(yīng)用程序可以更快地加載和運(yùn)行。

在Webpack中,您可以使用import()函數(shù)動(dòng)態(tài)導(dǎo)入代碼,從而實(shí)現(xiàn)代碼分割。例如,假設(shè)您有一個(gè)模塊a.js,其中有一個(gè)依賴項(xiàng)b.js。在使用Webpack-Vendor插件之前,a.js和b.js將被打包成單個(gè)文件,從而導(dǎo)致應(yīng)用程序加載速度慢。但是,如果您使用import()函數(shù)動(dòng)態(tài)導(dǎo)入b.js,Webpack會(huì)將b.js打包到自己的文件中,并在需要時(shí)異步加載它。

下面是模塊a.js的示例代碼:


import(/* webpackChunkName: "b" */ './b').then(b => {
    console.log(b);
});

上面的代碼將b.js打包到單獨(dú)的文件中,并在需要時(shí)異步加載它。

三、模塊標(biāo)識(shí)符

在Webpack中,每個(gè)模塊都有一個(gè)標(biāo)識(shí)符(通常是數(shù)字)。這些標(biāo)識(shí)符是由Webpack生成的,并用于確定哪些模塊被共享和哪些模塊是唯一的。

當(dāng)使用Webpack-Vendor插件打包應(yīng)用程序時(shí),您可能會(huì)發(fā)現(xiàn)vendor.js文件的標(biāo)識(shí)符已經(jīng)改變了。這是因?yàn)閂endor插件將第三方庫(kù)和依賴項(xiàng)打包成單獨(dú)的文件,其中包括它們自己的模塊標(biāo)識(shí)符。這可能會(huì)導(dǎo)致一些問題,例如,在更新第三方庫(kù)時(shí),它們的模塊標(biāo)識(shí)符可能會(huì)改變,從而導(dǎo)致Webpack重新打包應(yīng)用程序。

為了解決這個(gè)問題,您可以使用NamedModulesPlugin插件。該插件將由Webpack生成模塊的標(biāo)識(shí)符替換為模塊的路徑。這可以確保模塊的標(biāo)識(shí)符始終是固定的,并且在應(yīng)用程序更新時(shí)不會(huì)發(fā)生變化。


const webpack = require('webpack');

module.exports = {
    entry: {
        app: './src/index.js'
    },
    output: {
        filename: '[name].[chunkhash].js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            minChunks: function (module) {
                return module.context && module.context.indexOf('node_modules') !== -1;
            }
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'manifest',
            minChunks: Infinity
        }),
        new webpack.NamedModulesPlugin()
    ]
};

四、優(yōu)化

除了Webpack-Vendor插件之外,還可以使用其他優(yōu)化技術(shù)來加速應(yīng)用程序的加載速度。以下是一些優(yōu)化技術(shù)的簡(jiǎn)要說明:

1. 壓縮代碼:通過壓縮JavaScript和CSS文件來減少文件大小,從而加快應(yīng)用程序加載速度。Webpack可以使用UglifyJSPlugin和OptimizeCSSAssetsPlugin等插件來壓縮代碼。

2. 使用CDN:使用CDN(內(nèi)容分發(fā)網(wǎng)絡(luò))可以將靜態(tài)資產(chǎn)(例如JavaScript和CSS文件)分發(fā)到全球的服務(wù)器上,從而加快它們的下載速度。Webpack可以使用publicPath選項(xiàng)設(shè)置CDN的URL。

3. 緩存:使用長(zhǎng)期緩存策略可以讓用戶只需下載更新的文件,而不是所有文件。Webpack可以使用[hash]或[chunkhash]占位符為文件名添加哈希,以便在更新時(shí)更改文件名。

五、總結(jié)

Webpack-Vendor插件是Webpack的一個(gè)插件,用于將第三方庫(kù)和依賴項(xiàng)打包成單獨(dú)的文件,以加快應(yīng)用程序的加載速度。您可以使用Webpack的代碼分割功能進(jìn)一步加速加載速度,并使用NamedModulesPlugin插件固定模塊標(biāo)識(shí)符。除了Webpack-Vendor插件外,還可以使用其他優(yōu)化技術(shù)來提高應(yīng)用程序的性能。

聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
10年以上業(yè)內(nèi)強(qiáng)師集結(jié),手把手帶你蛻變精英
請(qǐng)您保持通訊暢通,專屬學(xué)習(xí)老師24小時(shí)內(nèi)將與您1V1溝通
免費(fèi)領(lǐng)取
今日已有369人領(lǐng)取成功
劉同學(xué) 138****2860 剛剛成功領(lǐng)取
王同學(xué) 131****2015 剛剛成功領(lǐng)取
張同學(xué) 133****4652 剛剛成功領(lǐng)取
李同學(xué) 135****8607 剛剛成功領(lǐng)取
楊同學(xué) 132****5667 剛剛成功領(lǐng)取
岳同學(xué) 134****6652 剛剛成功領(lǐng)取
梁同學(xué) 157****2950 剛剛成功領(lǐng)取
劉同學(xué) 189****1015 剛剛成功領(lǐng)取
張同學(xué) 155****4678 剛剛成功領(lǐng)取
鄒同學(xué) 139****2907 剛剛成功領(lǐng)取
董同學(xué) 138****2867 剛剛成功領(lǐng)取
周同學(xué) 136****3602 剛剛成功領(lǐng)取
相關(guān)推薦HOT