成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

tuomao / 919人閱讀

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

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

從指定入口文件中提取公共文件 CommonsChunkPlugin的實現(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的實現(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下面我們定義了一個common。通過chunks函數(shù)，指定三個入口文件為："index","index1","index2"，同時我們還要設(shè)置minChunks為3，表示指定三個入口文件中提取出的公共文件，最少要被三個不同的入口文件引用。所以就是從三個入口文件中提取公共的文件。

從兩個公共文件中，再提取公共部分

先說一下，這是什么意思：

有6個公共文件a,b,c,d,e,f。

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

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

下面給出webpack3 和webpack4下的處理

CommonsChunkPlugin的實現(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’,再從"app","app1","app2"中提取公共文件‘common2’。最后從‘common1’和‘common2’中再提取出公共文件common3。

splitChunks的實現(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);
                    }
                }
            }
        }
    }

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

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

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

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/99229.html

相關(guān)文章

  • Webpack CommonsChunkPlugin 理解

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

    YJNldm 評論0 收藏0

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

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

    ZweiZhao 評論0 收藏0

  • Webpack的坑位整理

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

    lidashuang 評論0 收藏0

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

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

    CarterLi 評論0 收藏0

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

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

    seal_de 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<