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

Fundebug 发布于2019-08-26 11:36 / 782人阅读

摘要：背景最近接到一个任务是帮忙优化的体积，项目是用开发，多入口。这就涉及到两次打，那这两次打的如何打通呢的方式配合使用。通过可以将挂载到已经存在的某个变量上。通过其它一些变量的方式暴露出去。不同的配置可以将你的库打成一个库，库甚至是一个库。

背景

最近接到一个任务是帮忙优化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库。

GPU云服务器云服务器记一次在阿里云搭建服务器记一次阿里云服务器集体中毒 jsBundle 体积

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107227.html

记一次 webpack 打包体积优化

摘要：手头做的项目开发得差不多了，而打包配置是一开始粗略配置的，不大的项目打包出来得，所以现在必须进行优化。用于生产环境的打包，设置其为后，这些库会提供最小体积的文件。这种情况打包后的体积要更小一些。最后打包结果的体积开销主要就是以上几项。手头做的项目开发得差不多了，而打包配置是一开始粗略配置的，不大的项目打包出来得6MB+，所以现在必须进行优化。打包结果分析执行命令 webpack ...

tomlingtm 2019-08-26 11:47 评论0 收藏0
记一次vue-webpack项目优化实践【更新】

摘要：优化空间不大主要关注另外两个上面。目前为止，项目打包后的大部头就是，这个目前的优化空间较小。当然，从整体优化的大维度上来说优化的点还有很多，这个文章继续更新下去。项目现状项目是一个数据监测平台，引入了ehcart和three.js 负责项目的数据可视化；打包后，体积高达2.1M，这个体积相比于我的项目规模来说就显得稍有笨重了使用webpack-bundle-analyzer分析了...

ernest.wang 2019-08-23 15:13 评论0 收藏0
记一次Vue项目优化及思路

摘要：记录一个前端项目优化的路程，效果如上图。第二步优化结果再次运行查看项目打包情况可以看到项目体积已经优化到，中也看不到的踪影了。本文主要想提供一些优化思路及手段，即如何定位通过，查看页面加载时间问题，然后再解决这些问题。 showImg(https://segmentfault.com/img/bVbq282?w=381&h=384); 记录一个前端项目优化的路程，效果如上图。接下来我...

keithxiaoy 2019-08-02 16:12 评论0 收藏0
记一次Vue项目优化及思路

摘要：记录一个前端项目优化的路程，效果如上图。第二步优化结果再次运行查看项目打包情况可以看到项目体积已经优化到，中也看不到的踪影了。本文主要想提供一些优化思路及手段，即如何定位通过，查看页面加载时间问题，然后再解决这些问题。 showImg(https://segmentfault.com/img/bVbq282?w=381&h=384); 记录一个前端项目优化的路程，效果如上图。接下来我...

nanchen2251 2019-08-23 16:49 评论0 收藏0
记一次使用 vue-admin-template 的优化历程

摘要：同时也要引入对应版本的先引入引入组件库因为依赖是从外部引入的，所以需要告知在打包时，依赖的来源。然后在中加入一条命令执行或者即可完成打包。因此将此次优化记录下来，并传上了中。本文原文前言公司有好几个项目都有后台管理系统，为了方便开发，所以选择了 vue 中比较火的后台模板作为基础模板进行开发。但是，开始用的时候，作者并没有对此进行优化，到项目上线的时候，才发现，打包出来的文件...

xumenger 2019-08-22 17:17 评论0 收藏0