前端性能优化三十一:花裤衩模板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.
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值