成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

tomlingtm / 2770人閱讀

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

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

打包結(jié)果分析

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

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

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

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

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

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

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

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

因為并沒有使用 antd 的所有組件，所以按需加載是必需的。根據(jù)其文檔（按需加載 - Ant Design），需要安裝 bable 插件 babel-plugin-import ，并在 babel 配置中添加：

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

在我配置過程中，libraryDirectory 配置的不同也會有較大影響，但按目前文檔來看貌似沒有影響，待我確認后再做記錄。

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

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

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

=== end ===

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

moment

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

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

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

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

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

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

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

最后

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/107566.html

相關(guān)文章

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

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

    ernest.wang 評論0 收藏0

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

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

    Fundebug 評論0 收藏0

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

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

    keithxiaoy 評論0 收藏0

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

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

    nanchen2251 評論0 收藏0

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

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

    xumenger 評論0 收藏0

發(fā)表評論

0條評論

tomlingtm

男|高級講師

TA的文章

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