前端性能优化三十一：花裤衩模板webpack DllPlugin

本文主要是介绍前端性能优化三十一：花裤衩模板webpack DllPlugin，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

2. Webpack社区有两种方案:

①. CommonsChunkPlugin:a. webpack每次打包还需要去处理这些第三方库.b. 只是打包完后,能把第三方库和自己的代码分开,相当于单独打包第三方库.②. DLL(动态链接库):a. 指一个包含可由多个程序同时使用的代码库:(1). 借鉴了Windows系统的dll。一个dll包，就是一个纯纯的依赖库，它本身不能运行，是用来给你的app引用的。b. 前端领域可认为是另类缓存:(1). 把公共代码打包为DLL文件并存到硬盘里.(2). 再次打包时,动态链接DLL文件就无需再次打包那些公共代码.(3). 从而提升构建速度,减少打包时间.③. DLL优化:a. 是一种最简单粗暴且极其有效的优化方式.b. 第三方库预先处理,实现了拆分bundles,后续打包不放入vendor.js中.c. 通过DllPlugin插件分离出第三方包:(1). 配置DllPlugin将第三方依赖提前打包(2). 好处是将DLL与业务代码完全分离且每次只构建业务代码.d. DLL优化分为3个步骤:(1). 告知构建脚本哪些依赖做成DLL(2). 预处理第三方库,生成DLL文件.(2). 告诉webpack打包时,不需要处理这些第三方库. => DLL映射表文件e. webpack v4+已不推荐使用该配置,因为其版本迭代带来的性能提升足以忽略DllPlugin所带来的效益.

(1). DLL两个工具:

①. DllPlugin:a. 这个插件是在一个额外的独立的webpack设置中创建一个只有dll的bundle(dll-only-bundle).b. 会生成一个名为manifest.json的文件,这个文件是用来让DLLReferencePlugin映射到相关的依赖上去的.c. DLLPlugin能把第三方代码完全分离开,即每次只打包项目自身的代码.②. DllReferencePlugin:a. webpack主配置文件中设置的.b. 这个插件将dll的bundle(dll-only-bundle(s))引用到需要的预编译的依赖.c. 通过引用dll的manifest.json文件,将依赖的名称映射到模块的id上,在需要时通过内置的webpack_require函数来require.