亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

webpack： 從指定入口文件中提取公共文件

tuomao / 959人閱讀

摘要：通過(guò)函數(shù)，指定三個(gè)入口文件為，同時(shí)我們還要設(shè)置為，表示指定三個(gè)入口文件中提取出的公共文件，最少要被三個(gè)不同的入口文件引用。所以就是從三個(gè)入口文件中提取公共的文件。從兩個(gè)公共文件中，再提取公共部分先說(shuō)一下，這是什么意思有個(gè)公共文件。

在不明白CommonsChunkPlugin的使用情況下，直接上手webpack4的splitChunks，實(shí)在是難上加難。為了能更好的理解splitChunks的使用，必須出個(gè)題目，練練手，才能從中有所收獲（下面的題目不考慮實(shí)際應(yīng)用場(chǎng)景）：

從指定入口文件中提取公共文件 CommonsChunkPlugin的實(shí)現(xiàn)： 
entry: {
        index:"./src/index.js",
        index1:"./src/index1.js",
        index2:"./src/index2.js"
},
plugins: [
    new CommonsChunkPlugin({
        name:"common1",
        chunks:["index","index1","index2"]
    })
]

其中index和index1以及index2都是打包的入口文件。

splitChunks的實(shí)現(xiàn)： 
optimization: {
        splitChunks: {
            chunks:"all",
            minSize: 0,
            cacheGroups: {
                common: {
                    minChunks: 3,
                    priority: -1,
                    name:"common",
                    chunks (chunk) {
                        // exclude `my-excluded-chunk`
                        return ["index","index1","index2"].includes(chunk.name);
                    }
                }
            }
        }
    }

在cacheGroups下面我們定義了一個(gè)common。通過(guò)chunks函數(shù)，指定三個(gè)入口文件為："index","index1","index2"，同時(shí)我們還要設(shè)置minChunks為3，表示指定三個(gè)入口文件中提取出的公共文件，最少要被三個(gè)不同的入口文件引用。所以就是從三個(gè)入口文件中提取公共的文件。

從兩個(gè)公共文件中，再提取公共部分

先說(shuō)一下，這是什么意思：

有6個(gè)公共文件a,b,c,d,e,f。

從a,b,c中提取其公共的部分x，從d,e,f中也提取公共部分y。

從x，y中再提取公共部分z。

下面給出webpack3 和webpack4下的處理

CommonsChunkPlugin的實(shí)現(xiàn)： 
new CommonsChunkPlugin({
    name:"common1",
    chunks:["index","index1","index2"]
}),
new CommonsChunkPlugin({
    name:"common2",
    chunks:["app","app1","app2"]
}),
new CommonsChunkPlugin({
    name:"common3",
    chunks:["common1","common2"]
})

很清楚，先從"index","index1","index2"中提取公共文件‘common1’,再?gòu)?app","app1","app2"中提取公共文件‘common2’。最后從‘common1’和‘common2’中再提取出公共文件common3。

splitChunks的實(shí)現(xiàn)： 
optimization: {
        runtimeChunk: "single",
        splitChunks: {
            chunks:"all",
            minSize: 0,
            cacheGroups: {
                common3: {
                  minChunks: 6,
                  priority: 1,
                  reuseExistingChunk: true
                },
                common2: {
                    minChunks: 3,
                    priority: -2,
                    name:"common2",
                    chunks (chunk) {
                        // exclude `my-excluded-chunk`
                        return ["app","app1","app2"].includes(chunk.name);
                    }

                },
                common1: {
                    priority: -1,
                    name: "common1",
                    minChunks: 3,
                    enforce: true,
                    chunks (chunk) {
                        return ["index","index1","index2"].includes(chunk.name);
                    }
                }
            }
        }
    }

我沒(méi)有從文檔中找到：提取公共文件之后再處理的方法。所以我用了另外一種方式：

先從6個(gè)文件中提取出公共的文件，即common3（common1和common2的公共文件）。

從"index","index1","index2"中提取common1

從"app","app1","app2"中提取common2

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/99229.html

相關(guān)文章

  • Webpack CommonsChunkPlugin 理解

    摘要：未定義時(shí)使用作為文件名。表示公共創(chuàng)建所需要的所有模塊的最小體積。如果設(shè)置為，公共的所有子模塊將會(huì)被選中。使用來(lái)命名文件，實(shí)現(xiàn)文件緩存的功能。當(dāng)文件內(nèi)容發(fā)生變化，文件名會(huì)隨之改變。代碼中再次使用了，從中提取出了名為的運(yùn)行時(shí)代碼。 CommonsChunkPlugin配置簡(jiǎn)介 最近讀了一下webpack的文檔，讀到CommonsChunkPlugin這個(gè)插件，深深折服于webpack的強(qiáng)大...

    YJNldm 評(píng)論0 收藏0

  • webpack 填坑之路--提取獨(dú)立文件(模塊)

    摘要：前言最近重新看了一遍提取公共文件的配置。這篇文章將以解決實(shí)際開(kāi)發(fā)遇到的問(wèn)題為核心，悉數(shù)利用提取獨(dú)立文件模塊的應(yīng)用。利用插件是專(zhuān)門(mén)用來(lái)提取獨(dú)立文件的，它主要是提取多個(gè)入口的公共模塊。插入標(biāo)簽的這一步可以在打包好獨(dú)立文件之前，就在模板中插入。 前言 最近重新看了一遍 webpack 提取公共文件的配置。原來(lái)覺(jué)得這東西是個(gè)玄學(xué)，都是 憑感覺(jué) 配置。這篇文章將以解決實(shí)際開(kāi)發(fā)遇到的問(wèn)題為核心，悉...

    ZweiZhao 評(píng)論0 收藏0

  • Webpack的坑位整理

    摘要：在尋找相對(duì)路徑的文件時(shí)會(huì)以為根目錄，默認(rèn)為執(zhí)行啟動(dòng)時(shí)所在的當(dāng)前目錄。在文件被添加到依賴(lài)圖中時(shí)，將其轉(zhuǎn)換稱(chēng)為了模塊。配置中的兩個(gè)目標(biāo)。僅限高級(jí)用途，默認(rèn)情況下自動(dòng)生成生成文件的文件名。webpack webpack現(xiàn)在是主要的打包工具了，現(xiàn)在網(wǎng)絡(luò)上也有很多資料可以學(xué)習(xí)了。這里主要整理了一些基礎(chǔ)概念，但沒(méi)有所有的寫(xiě)，只是把之前遇到的問(wèn)題記錄了一下。 本文的原文在我的博客中：github.com...

    lidashuang 評(píng)論0 收藏0

  • webpack4 系列教程(三): 多頁(yè)面解決方案--提取公共代碼

    摘要：文件配置如下多頁(yè)面應(yīng)用注意屬性其次打包業(yè)務(wù)中公共代碼首先打包中的文件著重來(lái)看配置。個(gè)人網(wǎng)站原文鏈接系列教程三多頁(yè)面解決方案提取公共代碼 這節(jié)課講解webpack4打包多頁(yè)面應(yīng)用過(guò)程中的提取公共代碼部分。相比于webpack3，4.0版本用optimization.splitChunks配置替換了3.0版本的CommonsChunkPlugin插件。在使用和配置上，更加方便和清晰。 >>...

    CarterLi 評(píng)論0 收藏0

  • vue+webpack搭建單文件應(yīng)用和多文件應(yīng)用webpack.config.js的寫(xiě)法區(qū)別

    摘要：而多頁(yè)面應(yīng)用的入口文件是所有需要用到的頁(yè)面。單文件應(yīng)用和多文件應(yīng)用上，是大同小異的，區(qū)別就討論到這里了。 1.前言 這幾天，都遇到過(guò)有人問(wèn)過(guò)相似的問(wèn)題，就是用vue和webpack搭建目錄的時(shí)候，怎么把單頁(yè)面應(yīng)用的配置改成多文件應(yīng)用，或者是怎么把多文件應(yīng)用的配置改成單文件應(yīng)用。這個(gè)情況，我之前有處理過(guò)，公司的同事教過(guò)我，我就針對(duì)這個(gè)情況寫(xiě)下此篇文章。各位如果覺(jué)得我哪里寫(xiě)得不夠好，寫(xiě)錯(cuò)了...

    seal_de 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<