Webpack 構建后文件變得很大？

Barry_Ng 發布于2019-08-21 14:41 / 2596人閱讀

摘要：的和的是同步加載的，通過這些方式引入的依賴會被打包在一起，文件因而變大。而或的是按需加載異步的，對于一些可以延遲加載的模塊依賴，應該用這種方式，從而避免文件太大。

上一篇回顧使用 Webpack 的動機，比較理論，本篇側重實用。

這幾篇文章的前提是 Webpack 已經入門。若無，請自行到 Webpack 官方網站的 getting start 按指引一步步實操。

啃先生(MrKenniu) | 文

使用 Webpack 打包，前端工程師可以按 CommonJS 或 ES6 Module 的規范寫前端 JS 代碼，使模塊源代碼看起來跟后端代碼一樣簡潔，但是，很快發現文件太大（尤其基于 React 進行開發的應用，如果是單頁面程序？更大了），為了解決問題，以下是我每次必用的策略：

按需加載「 Code Split 」

提取公共代碼「 CommonsChunkPlugin 」

第三方庫分開打包「 DllPlugin 」

代碼壓縮「 UglifyJSPlugin 」

本篇總結 按需加載 的用法

Code Split 概念

Webpack 支持多種模塊加載方式。CommonJS 的 require 和 ES6 的 import 是同步加載的，通過這些方式引入的依賴會被 Webpack 打包在一起，文件因而變大。而 AMD 或 CommonJS 的 require.ensure 是按需加載「異步的」，對于一些可以延遲加載的模塊「依賴」，應該用這種方式，從而避免文件太大。

同步加載的模塊被打包在同一個 chunk 「一個 chunk 是一個 JS 文件，由一個或若干個模塊組成」，而通過異步加載的模塊被打包在另外的 chunk 里，Webpack 以此來進行分片，即 Code split。

Code Split 的方式

AMD : require

CommonJS : require.ensure

ES : System.import

chunk 的內容組成

通過 Code Split 分片，新的 chunk 由異步模塊和這些模塊的依賴構成。這些模塊的依賴按同樣的規則構建，即同步加載的模塊打包在同一個 chunk，異步加載的模塊被切分到新的 chunk。具體看下面的例子，請注意看代碼注釋的內容，build 目錄里的三個文件是 Webpack 打包最終生成的。

Code Split 優化

從上面的例子可見，Code Split 分出來了兩個 chunk，即 1.bundle 和 2.bundle，從而減小了主 chunk bundle.js 的文件大小，減輕程序初始化的網絡等待。然而，新的問題出現了，1.bundle 和 2.bundle 都包含 io 模塊，可見 io 模塊有冗余。帶著這個問題，下一篇總結 CommonsChunkPlugin 的使用

歡迎關注我的公眾號

GPU云服務器云服務器 js文件后刪除文件上傳文件后返回文件大小 java后文件文件導出后變aspx

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

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

webpack打包分析與性能優化

摘要：打包分析與性能優化背景在去年年末參與的一個項目中，項目技術棧使用，生產環境全量構建將近三分鐘，項目業務模塊多達數百個，項目依賴數千個，并且該項目協同前后端開發人員較多，提高構建效率，成為了改善團隊開發效率的關鍵之一。 webpack打包分析與性能優化背景在去年年末參與的一個項目中，項目技術棧使用react+es6+ant-design+webpack+babel，生產環境全量構建將...

joy968 2019-08-20 14:21 評論0 收藏0
webpack的優化

摘要：優化在我們構建單頁面應用或封裝插件時很大機會用到這個的打包工具但項目代碼日益增多時一些簡單的配置會暴露種種弊端打包時間長代碼大以下是結合自身開發和學習過程解決問題的總結打包時間長很多人都知道這個插件是用來提取公共庫的但這個插件也解決不了公共 webpack優化在我們構建單頁面應用(vue, React)或封裝插件時,很大機會用到webpack,這個JavaScript的打包工具.但項...

hatlonely 2019-08-26 11:47 評論0 收藏0
React文檔翻譯系列（一）安裝

摘要：文檔翻譯系列一安裝原文地址原文本系列是針對文檔進行的翻譯，因為自己在學習的時候，最開始通過看博客或者論壇等中文資料，有些內容是零零散散的接收，并沒有給自己帶來很好的效果，所以后來決定把文檔的原文從頭到尾看一遍。 React文檔翻譯系列（一）安裝原文地址：原文本系列是針對React文檔進行的翻譯，因為自己在學習react的時候，最開始通過看博客或者論壇等中文資料，有些內容是零零散散的...

Fourierr 2019-08-20 15:28 評論0 收藏0
Webpack系列-第一篇基礎雜記

摘要：系列文章系列第一篇基礎雜記系列第二篇插件機制雜記系列第三篇流程雜記前言公司的前端項目基本都是用來做工程化的，而雖然只是一個工具，但內部涉及到非常多的知識，之前一直靠來解決問題，之知其然不知其所以然，希望這次能整理一下相關的知識點。系列文章 Webpack系列-第一篇基礎雜記 Webpack系列-第二篇插件機制雜記 Webpack系列-第三篇流程雜記前言公司的前端項目基本都是用...

Batkid 2019-08-23 15:21 評論0 收藏0
webpack4系列教程（九）：開發環境和生產環境

摘要：它允許在運行時更新各種模塊，而無需進行完全刷新。構建生產環境開發環境和生產環境的構建目標差異很大。在開發環境中，我們需要具有強大的具有實時重新加載或熱模塊替換能力的和。 1. 構建開發環境如果你一直跟隨我前面的博文，那么你對webpack的基礎知識已經有比較深刻的理解了。之前，我們一直執行著： npm run build 來打包編譯輸出我們的代碼，本文我們來看看如何構建一個開發環境，...

姘存按 2019-08-23 14:48 評論0 收藏0