国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

【webpack】: 記一次jsbundle體積優化

Fundebug / 788人閱讀

摘要：背景最近接到一個任務是幫忙優化的體積，項目是用開發，多入口。這就涉及到兩次打，那這兩次打的如何打通呢的方式配合使用。通過可以將掛載到已經存在的某個變量上。通過其它一些變量的方式暴露出去。不同的配置可以將你的庫打成一個庫，庫甚至是一個庫。

背景

最近接到一個任務是幫忙優化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庫。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107227.html

相關文章

  • 記一次 webpack 打包體積優化

    摘要：手頭做的項目開發得差不多了，而打包配置是一開始粗略配置的，不大的項目打包出來得，所以現在必須進行優化。用于生產環境的打包，設置其為后，這些庫會提供最小體積的文件。這種情況打包后的體積要更小一些。最后打包結果的體積開銷主要就是以上幾項。 手頭做的項目開發得差不多了，而打包配置是一開始粗略配置的，不大的項目打包出來得6MB+，所以現在必須進行優化。 打包結果分析 執行命令 webpack ...

    tomlingtm 評論0 收藏0

  • 記一次vue-webpack項目優化實踐【更新】

    摘要：優化空間不大主要關注另外兩個上面。目前為止，項目打包后的大部頭就是，這個目前的優化空間較小。當然，從整體優化的大維度上來說優化的點還有很多，這個文章繼續更新下去。 項目現狀 項目是一個數據監測平臺，引入了ehcart和three.js 負責項目的數據可視化；打包后，體積高達2.1M，這個體積相比于我的項目規模來說就顯得稍有笨重了 使用webpack-bundle-analyzer分析了...

    ernest.wang 評論0 收藏0

  • 記一次Vue項目優化及思路

    摘要：記錄一個前端項目優化的路程，效果如上圖。第二步優化結果再次運行查看項目打包情況可以看到項目體積已經優化到，中也看不到的蹤影了。本文主要想提供一些優化思路及手段，即如何定位通過，查看頁面加載時間問題，然后再解決這些問題。 showImg(https://segmentfault.com/img/bVbq282?w=381&h=384); 記錄一個前端項目優化的路程，效果如上圖。 接下來我...

    keithxiaoy 評論0 收藏0

  • 記一次Vue項目優化及思路

    摘要：記錄一個前端項目優化的路程，效果如上圖。第二步優化結果再次運行查看項目打包情況可以看到項目體積已經優化到，中也看不到的蹤影了。本文主要想提供一些優化思路及手段，即如何定位通過，查看頁面加載時間問題，然后再解決這些問題。 showImg(https://segmentfault.com/img/bVbq282?w=381&h=384); 記錄一個前端項目優化的路程，效果如上圖。 接下來我...

    nanchen2251 評論0 收藏0

  • 記一次使用 vue-admin-template 的優化歷程

    摘要：同時也要引入對應版本的先引入引入組件庫因為依賴是從外部引入的，所以需要告知在打包時，依賴的來源。然后在中加入一條命令執行或者即可完成打包。因此將此次優化記錄下來，并傳上了中。 本文原文 前言 公司有好幾個項目都有后臺管理系統，為了方便開發，所以選擇了 vue 中比較火的 后臺模板 作為基礎模板進行開發。但是，開始用的時候，作者并沒有對此進行優化，到項目上線的時候，才發現，打包出來的文件...

    xumenger 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<