基本概念-chunk

一、chunk

這個(gè)詞應(yīng)該可以翻譯成“代碼塊”
正常情況下,以entry指定的文件為入口,將入口文件及其依賴打包成一個(gè)bundle文件,
然而有些情況下,部分功能是在使用時(shí)才會(huì)用到的,出于性能優(yōu)化的需要,我們對這部分功能做成按需加載,這部分的功能將被打包到chunk文件。

用法:

require.ensure([], function(require){
  var moduleA = require("./a");
});

公共模塊提取:

var chunks = Object.keys(entries);
plugins: [
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendors',     //將公共模塊提取,生成名為‘verdors’的chunk
    chunks: chunks,      //文件名數(shù)組
    minChunks: chunks.length    //提取所有entry共同依賴的模塊
]

可用getCommonsChunk來獲取chunks:

var glob = require('glob');
var chunks= getCommonsChunk('src/js/page/**/*.js', 'src/js/page/');

function getCommonsChunk(globPath, pathDir) {
    var files = glob.sync(globPath);
    var entries = [],
        entry, dirname, basename, extname;
 
    for (var i = 0; i < files.length; i++) {
        entry = files[i];
        dirname = path.dirname(entry);
        extname = path.extname(entry);
        basename = path.basename(entry, extname);
        entries.push(basename);
    }
    return entries;
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容