記一次 webpack 打包體積優化

tomlingtm 發布于2019-08-26 11:47 / 2758人閱讀

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

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

打包結果分析

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

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

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

逐個擊破 設置環境變量 NODE_ENV 為 production

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

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

css-loader

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

module: {
    // ...
    {
      test: /.css$/,
      use: ExtractTextPlugin.extract({
        fallback: "style-loader",
        use: "css-loader?minimize"
      })
    }
    // ...
}

大頭——antd (ant design)

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

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

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

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

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

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

=== end ===

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

moment

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

plugins: [
    new webpack.ContextReplacementPlugin(/moment[/]locale$/, /zh-cn/),
]

看上去很輕量的 lodash

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

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

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

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

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

最后

打包結果的體積開銷主要就是以上幾項。經過優化后，體積下降至1.5MB以內，還是很客觀的。不過 antd 依然占據大頭，后續會考慮把 antd 替換掉，畢竟用到的組件不多。

GPU云服務器云服務器記一次在阿里云搭建服務器記一次阿里云服務器集體中毒 Webpack打包分塊體積

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

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

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

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

ernest.wang 2019-08-23 15:13 評論0 收藏0
【webpack】: 記一次jsbundle體積優化

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

Fundebug 2019-08-26 11:36 評論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