前端性能优化三十一：花裤衩模板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.