本章内容
缓存加载程序
cache-loader
缓存加载程序主要是将打包好的文件缓存在硬盘的一个目录里，一般存在node_modules/.隐藏物下，rxdy再次建设的时候如果此文件没有修改就会从缓存中读取已经编译过的文件，只有有改动的才会被编译，这样就大大降低了编译的时间。尤其是项目越大时越明显。此项目使用前后数据对比3342毫秒-2432毫秒效果还是比较明显
这里只对巴别塔加入了缓存加载程序，因为我们的ts/js都是由巴别塔进行编译的，不需要对ts-装载机缓存（我们也没有用到)
config/cacheLoader.js
module.exports=(配置，解析)={ 0
const BaseRule=config。模块。规则(' js ').测试(/)。js| .tsx？$/);
const babel path=resolve(' babel。js’)；
const Babercon f=require(Baberpath)；
const version=require(resolve(' node _ modules/@ babel/core/package。JSON’)。版本；
return()={ 0
baseRule.exclude。添加（文件路径={ 0
//不缓存节点_模块下的文件
返回/node_modules/.测试（文件路径);
})。end()。使用('缓存加载器)。加载程序("缓存加载程序")。选项({ 0
//缓存位置
缓存目录：解析(' node_modules/).缓存/巴别塔)
});
};
};
DllPlugin
DllPlugin是将第三方长期不变的包与实际项目隔离开来并分别打包，当我们建设时再将已经打包好的dll包引进来就好的了我提取了两个包做出反应，速度差不多提升了200毫秒，从2698毫秒到2377毫秒
打包 dll
build/dll.jsconst path=require(' path ')；
const DLl路径=路径。加入(流程。CWD()，' dll ')；
const Config=require(' web pack-chain ')；
const Config=new Config()；
const web pack=require(' web pack ')；
const rim RAF=require(' rim RAF ')；
const ora=require(' ora ')；
常数粉笔=require('粉笔');
const BundLeanalyzer插件=require('./config/bundlelyzer plugin '(配置);
bundlelyzer plugin()；
配置。条目(“dll”)。添加(“vue”)。添加("反应")。end()。设置("模式"、"生产")。output.path(dllPath)。文件名('[名称]。js’)。库("[名称]")。end()。插件(' DllPlugin ')。使用(网络包.DllPlugin，[
{
name: '[name]'，
path: path.join(process.cwd()，' dll '，' manifest.json ')
}
])。end()；
rim英国皇家空军。同步(路径。加入(流程。CWD()，' dll ')；
const spinner=ora('开始构建项目.');
旋转器。start()；
webpack(config.toConfig()，函数(err，stats){ 0
旋转器。stop()；
if(err)throw err；
process.stdout.write(
统计数据。tostring({ 0
颜色：为真，
modules: false，
儿童：假，
组块：为假，
chunkModules: false
}) 'nn '
);
if(stats。hase errors()){ 0
console.log(粉笔。'红色('构建失败 n ')；
过程。出口(1)；
}
console.log(粉笔。青色(' build完成 n ')；
});
将 dll 包合并
const web pack=require(' web pack ')；module.exports=(配置，解析)={ 0
return()={ 0
config.plugin('DllPlugin ').使用(网络包.DllReferencePlugin，[
{
context: process.cwd()，
清单：需要(解析(' dll/清单。JSON’)
}
]);
};
};
threadLoader
测试效果变差了，线程数越小编译速度越快config/threadLoader.js
module.exports=(配置，解析)={ 0
const BaseRule=config。模块。规则(' js ').测试(/)。js| .tsx？$/);
return()={ 0
const useThreads=true
if(useThreads){ 0
const threadLoaderConfig=基本规则。使用('线程加载器)。加载程序('线程加载程序');
threadloaderconfig。选项({ workers : 3 })；
}
};
};