成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

記一次 webpack 打包體積優(yōu)化

tomlingtm / 2827人閱讀

摘要：手頭做的項(xiàng)目開(kāi)發(fā)得差不多了，而打包配置是一開(kāi)始粗略配置的，不大的項(xiàng)目打包出來(lái)得，所以現(xiàn)在必須進(jìn)行優(yōu)化。用于生產(chǎn)環(huán)境的打包，設(shè)置其為后，這些庫(kù)會(huì)提供最小體積的文件。這種情況打包后的體積要更小一些。最后打包結(jié)果的體積開(kāi)銷主要就是以上幾項(xiàng)。

手頭做的項(xiàng)目開(kāi)發(fā)得差不多了，而打包配置是一開(kāi)始粗略配置的，不大的項(xiàng)目打包出來(lái)得6MB+，所以現(xiàn)在必須進(jìn)行優(yōu)化。

打包結(jié)果分析

執(zhí)行命令 webpack --profile --json > stats.json ，可以將打包過(guò)程的詳細(xì)信息以 json 格式記錄到文件中。依據(jù)該文件，webpack-bundle-analyzer、Webpack Chart 等分析工具會(huì)以可視化的形式展示打包過(guò)程和結(jié)果。

如果不想用這些額外工具，通過(guò)命令 webpack --display-modules --sort-modules-by size ，webpack 會(huì)在日志中按大小排序顯示所有模塊。

我在項(xiàng)目中，將第三方庫(kù)基本都集中打包到一個(gè) chunk (vendors)，業(yè)務(wù)邏輯多帶帶一個(gè) chunk (app)。打包總體積的大頭來(lái)自 vendors，其中antd占據(jù)大頭(3MB+)、moment占據(jù)約500KB、提取的 css 約300KB、react-dom也是500KB+，出乎意料的是 lodash 也是500KB+。

逐個(gè)擊破 設(shè)置環(huán)境變量 NODE_ENV 為 production

不少庫(kù)會(huì)按開(kāi)發(fā)環(huán)境(development)和生產(chǎn)環(huán)境(production)提供不同的文件，主要是為了開(kāi)發(fā)模式下的調(diào)試，也會(huì)因此有文件體積上的差別。用于生產(chǎn)環(huán)境的打包，設(shè)置其為production后，這些庫(kù)會(huì)提供最小體積的文件。

plugins: [
    // ...
    new webpack.DefinePlugin({
      "process.env": {
        NODE_ENV: JSON.stringify("production")
      }
    }),
    // ...
]
css-loader

css-loader 在 webpack 默認(rèn)不開(kāi)啟壓縮，需要設(shè)置 css-loader?minimize。

module: {
    // ...
    {
      test: /.css$/,
      use: ExtractTextPlugin.extract({
        fallback: "style-loader",
        use: "css-loader?minimize"
      })
    }
    // ...
}
大頭——antd (ant design)

因?yàn)椴](méi)有使用 antd 的所有組件，所以按需加載是必需的。根據(jù)其文檔（按需加載 - Ant Design），需要安裝 bable 插件 babel-plugin-import ，并在 babel 配置中添加：

{
    // ...
    "plugins": [
        ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }],
        // ...
    ]
}

在我配置過(guò)程中，libraryDirectory 配置的不同也會(huì)有較大影響，但按目前文檔來(lái)看貌似沒(méi)有影響，待我確認(rèn)后再做記錄。

=== 2018-02-23 更新 ===

看來(lái)bable-plugin-import這幾天有更新，現(xiàn)在配置項(xiàng) libraryDirectory 的默認(rèn)值時(shí) lib，即使用通過(guò) require (commonjs) 引用模塊的文件。而先前我在配置的時(shí)候并沒(méi)有默認(rèn)值，如果沒(méi)有顯示配置 libraryDirectory，打包結(jié)果會(huì)出現(xiàn)重復(fù)的內(nèi)容。

采用了 es6 module 的項(xiàng)目建議配置 libraryDirectory 為 es，即使用通過(guò) import (es6 module) 引用模塊的文件。這種情況打包后的體積要更小一些。

=== end ===

這里還有很重要一點(diǎn)，babel-plugin-import 要求 antd 不能被提取為公共模塊 vendors，否則就無(wú)法實(shí)現(xiàn)按需加載。尚不清楚是 babel 插件的原因，還是這個(gè)插件多帶帶的原因。

moment

moment 庫(kù)的體積開(kāi)銷主要是 i18n 文件，配置 webpack 將用不到 i18n 文件不打包即可。

plugins: [
    new webpack.ContextReplacementPlugin(/moment[/]locale$/, /zh-cn/),
]
看上去很輕量的 lodash

lodash看上去就是一些工具函數(shù)，應(yīng)該是很輕量的，然而一次全部加載下來(lái)要達(dá)到500KB，因此也需要按需加載。它的按需加載還比較麻煩。

lodash為每個(gè)方法多帶帶提供了庫(kù)，但這種方式在實(shí)際使用中并不靈活，所以這種最「干凈」的方法不建議使用。

像 antd 一樣，lodash 也有 babel 插件用于按需加載——babel-plugin-lodash

{
    // ...
    "plugins": [
        "lodash",
        // ...
    ]
}

同樣，lodash 就不能提取到公共模塊了。

最后

打包結(jié)果的體積開(kāi)銷主要就是以上幾項(xiàng)。經(jīng)過(guò)優(yōu)化后，體積下降至1.5MB以內(nèi)，還是很客觀的。不過(guò) antd 依然占據(jù)大頭，后續(xù)會(huì)考慮把 antd 替換掉，畢竟用到的組件不多。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/107566.html

相關(guān)文章

  • 記一次vue-webpack項(xiàng)目優(yōu)化實(shí)踐【更新】

    摘要：優(yōu)化空間不大主要關(guān)注另外兩個(gè)上面。目前為止，項(xiàng)目打包后的大部頭就是，這個(gè)目前的優(yōu)化空間較小。當(dāng)然，從整體優(yōu)化的大維度上來(lái)說(shuō)優(yōu)化的點(diǎn)還有很多，這個(gè)文章繼續(xù)更新下去。 項(xiàng)目現(xiàn)狀 項(xiàng)目是一個(gè)數(shù)據(jù)監(jiān)測(cè)平臺(tái)，引入了ehcart和three.js 負(fù)責(zé)項(xiàng)目的數(shù)據(jù)可視化；打包后，體積高達(dá)2.1M，這個(gè)體積相比于我的項(xiàng)目規(guī)模來(lái)說(shuō)就顯得稍有笨重了 使用webpack-bundle-analyzer分析了...

    ernest.wang 評(píng)論0 收藏0

  • 【webpack】: 記一次jsbundle體積優(yōu)化

    摘要：背景最近接到一個(gè)任務(wù)是幫忙優(yōu)化的體積，項(xiàng)目是用開(kāi)發(fā)，多入口。這就涉及到兩次打，那這兩次打的如何打通呢的方式配合使用。通過(guò)可以將掛載到已經(jīng)存在的某個(gè)變量上。通過(guò)其它一些變量的方式暴露出去。不同的配置可以將你的庫(kù)打成一個(gè)庫(kù)，庫(kù)甚至是一個(gè)庫(kù)。 背景 最近接到一個(gè)任務(wù)是幫忙優(yōu)化jsbundle的體積，項(xiàng)目是用ts開(kāi)發(fā)，多入口。在分析之后發(fā)現(xiàn)每個(gè)bundle都打了同一份代碼(這份代碼是其它組提供...

    Fundebug 評(píng)論0 收藏0

  • 記一次Vue項(xiàng)目優(yōu)化及思路

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

    keithxiaoy 評(píng)論0 收藏0

  • 記一次Vue項(xiàng)目優(yōu)化及思路

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

    nanchen2251 評(píng)論0 收藏0

  • 記一次使用 vue-admin-template 的優(yōu)化歷程

    摘要：同時(shí)也要引入對(duì)應(yīng)版本的先引入引入組件庫(kù)因?yàn)橐蕾囀菑耐獠恳氲模孕枰嬷诖虬鼤r(shí)，依賴的來(lái)源。然后在中加入一條命令執(zhí)行或者即可完成打包。因此將此次優(yōu)化記錄下來(lái)，并傳上了中。 本文原文 前言 公司有好幾個(gè)項(xiàng)目都有后臺(tái)管理系統(tǒng)，為了方便開(kāi)發(fā)，所以選擇了 vue 中比較火的 后臺(tái)模板 作為基礎(chǔ)模板進(jìn)行開(kāi)發(fā)。但是，開(kāi)始用的時(shí)候，作者并沒(méi)有對(duì)此進(jìn)行優(yōu)化，到項(xiàng)目上線的時(shí)候，才發(fā)現(xiàn)，打包出來(lái)的文件...

    xumenger 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<