【webpack】: 记一次jsbundle体积优化

2024年1月3日 163次阅读 来源: zwwtj2014

背景

近来接到一个使命是帮助优化jsbundle的体积，项目是用ts开辟，多进口。在剖析以后发明每一个bundle都打了统一份代码(这份代码是别的组供应的ts，编译出来的js在3k摆布)，而且是不常常更改的。

最初想到的就在打包的时刻经由历程CommonChunkPlugin或许Dll & DllReference插件来把这块提取出来，代码拆分做成一个自力的js，然则如许有个题目：就是每次其他组把这块代码更新的时刻须要在工程里再跑一遍打包构建的历程，这就涉及到一个组更新了代码须要别的的组打包构建，在某些场景下是不可接收的。

计划

在斟酌了以后，决定将这部份大众的代码以库的体式格局供应出来，在供应给他人以后，打成零丁的jsbundle，让他人在页面引。这就涉及到两次打bundle，那这两次打的bundle怎样买通呢？

output.library + out.libraryTarget + externals的体式格局

out.library & out.libraryTarget

library: 合营libraryTarget运用。能够简朴的看作这个库暴露给他人用的时刻，关键词是啥。类比jQuery。
libraryTarget: 合营怎样去暴露library。支撑下面几种:

  • 经由历程var以变量的体式格局暴露出去。默许设置

     { 
   library: 'clam'
 }

    打出来的jsbundle就是 var clam = /**_entry_return_*/; 直接在页面引的话能够就直接挂window上了。

  • 经由历程assign能够将return挂载到已存在的某个变量上。

  • 经由历程别的一些变量的体式格局暴露出去。能够设置this,global,commonjs,window,这些设置加上library，就能够把对应的库挂载到这些变量上。对应的就是:

    this =>
    this['clam'] = /**_entry_return_*/

    global =>
    global['clam'] = /**_entry_return_*/

    window =>
    window['clam'] = /**_entry_return_*/

    commonjs =>
    exports['clam'] = /**_entry_return_*/

经由历程上述两个设置就处理了打库文件的文件，然则当时不想把太多的东西挂载到window上，就应用了assign的体式格局挂载在一个变量底下。即：

   library: `$VAR['clam']`,
   libraryTarget: `assign`

externals

运用assign的体式格局只会，返回值会挂载在$VAR[‘clam’]上，在打包的时刻须要竖立起与这个”库”的衔接而且消除这个bundle就好。这个时刻就该externals进场了。

externals的设置重要就是为了处理上述说的两个题目：

  • 打的bundle里消除指定的库
  • 竖立与这个库的”衔接”

详细的设置能够看下官方文档，差别的设置体式格局只是应对差别的场景，作用照样上面提到的两点。

比方我们应用output.library & output.libraryTarget宣布的包名叫Lib，运用的体式格局是import {xxx} from 'Lib';其所有的完成都已挂载了$VAR[‘clam’] 上，那我们能够像下面如许设置externals：

externals:{
  'Lib': `$VAR['clam']`
}

如许天生的jsbundle里以下的体式格局：

...
var xxx = webpack_require(`$VAR['clam']`);
...

总结

这篇纪录重要纪录了一次应用output.library & output.libraryTarget & externals来以库的体式格局将每一个bundle的js削减3k照样不错的。

详细怎样打一个库能够看看建立Library文档。差别的设置能够将你的库打成一个commonjs库，es2015库以至是一个UMD库。

    原文作者：zwwtj2014
    原文地址: https://segmentfault.com/a/1190000013131533
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞