一、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;
}