webpackCommonChunk最好设置

2024年4月17日 224次阅读 来源: 传播正能量

webpack.optimize.CommonsChunkPlugin插件用于抽取模块中的复用部份，以削减打包的代码量，我们还须要斟酌到缓存的优化

首先是文件名包括文件的hash值，只需在文件有更改时hash值才会变

其次我们想要将援用的js资本举行几个文件的拆分，

  • 第一个文件是最不常常更改的第三方的库文件，

  • 第二个文件是营业的公用组件

  • 第三个文件是每个页面的js代码

我们的最好设置以下：

entry: {
        vender:['./src2/Vue.js','./src2/vender.js'],  //指明vender的库
        common: ['./src2/component1.js','./src2/component2.js'],
        global:['./src2/global.js'], //须要全局举行设置的代码
        page1: ['./src2/page1.js'],
        page2: ['./src2/page2.js']
    },
plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: ['common','vender','boot'], 
            filename: '[name].[chunkhash].js',
            minChunks: 2
        })
]

minChunks是设置模块复用多少次以上举行抽取。

chunkhash 是这个chunk的hash，而hash是对一切打包的js团体天生的hash，所以为了对缓存的优化，我们采纳chunkhash。

CommonsChunkPlugin中设置的name和entry中设置的进口之间有什么关联？

假如CommonsChunkPlugin 中设置的name在entry中存在，那末这个抽取的模块首先是包括enry中指定的js文件，然后再斟酌包括抽取其他entry中的公用部份。

为何要在common中设置boot？

由于设置CommonsChunkPlugin插件今后，就须要在window上挂载window[“webpackJsonp”]要领，这个要领中有一切chunk的chunkhash，所以只需有chunk变化，那末这个剧本就变化，所以应当把这个启动剧本零丁抽成一个文件，不然就会影响其他稳定的文件也转变hash值。

CommonsChunkPlugin中设置的name递次有什么关联，每个公用模块的抽取逻辑是什么？

这个没有找到官方的诠释，经由过程实践，我以为应当是倒序斟酌的，首先是启动剧本放在数组的末了一个文件中，比方boot中。
每个模块的逻辑以下：

首先看本身有无对应的entry，假如有则抽取entry对应的模块，并递归抽取模块中公用的模块。比方common中的component1.js和component2.js配合依靠jquery，则common中也抽取jquery。

其次看数组中是不是另有上一个元素，假如没有则将一切entry中盈余没有抽取的公用模块也都抽取出来，假如有则交给上一个元素，本身也就实行完了。比方vender先将Vue.js和vender.js抽取出来，然后发明另有common模块，所以本身就实行完了，common先将component1.js和component2.js抽取出来今后，发明上面没有文件了，所以就把entry中盈余没有抽取的大众模块也抽取出来了，比方page1.js和page2.js公用的componet4.js。

如许打包今后我们须要保证页面中文件援用的递次，由于他们之间有了依靠关联，比方上面的设置页面的援用递次应当是
1 boot.js
2 vender.js
3 common.js
然后是每个页面的js page1.js 或许page2.js

怎样保证页面中js文件的援用递次?

HtmlwebpackPlugin插件供应了 chunksSortMode要领，可以对页面中援用的chunk举行排序，我们先定义chunk的递次数组，然后类似于数组的sort，用小的减去大的返回正序。

var chunksort = ['boot','vender','common','global'];
new HtmlwebpackPlugin({
    chunks: ['boot','vender','common','global',page.outputPath],
    title: page.title,
    // extra: extra, //包括页面分外的设置信息
    template: "src/index.html",
    filename: page.outputPath + '.html',
    chunksSortMode: function (a, b) {
        var aIndex =chunksort.indexOf(a.names[0]);
        var bIndex =chunksort.indexOf(b.names[0]);
        aIndex = aIndex < 0 ? chunksort.length + 1 : aIndex;
        bIndex = bIndex < 0 ? chunksort.length + 1 : bIndex;
        return aIndex - bIndex;
    }
})
    原文作者：传播正能量
    原文地址: https://segmentfault.com/a/1190000008309354
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞