Webpack 構(gòu)建后文件變得很大？

Barry_Ng 發(fā)布于2019-08-21 14:41 / 2605人閱讀

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

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

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

啃先生(MrKenniu) | 文

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

按需加載「 Code Split 」

提取公共代碼「 CommonsChunkPlugin 」

第三方庫分開打包「 DllPlugin 」

代碼壓縮「 UglifyJSPlugin 」

本篇總結(jié) 按需加載 的用法

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 的內(nèi)容組成

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

Code Split 優(yōu)化

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

歡迎關注我的公眾號

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

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/87991.html

webpack打包分析與性能優(yōu)化

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

joy968 2019-08-20 14:21 評論0 收藏0
webpack的優(yōu)化

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

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

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

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

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

Batkid 2019-08-23 15:21 評論0 收藏0
webpack4系列教程（九）：開發(fā)環(huán)境和生產(chǎn)環(huán)境

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

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