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

資訊專欄INFORMATION COLUMN

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

Barry_Ng / 2674人閱讀

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

上一篇回顧使用 Webpack 的動(dòng)機(jī)，比較理論，本篇側(cè)重實(shí)用。

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

啃先生(MrKenniu) | 文

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

按需加載 「 Code Split 」

提取公共代碼 「 CommonsChunkPlugin 」

第三方庫(kù)分開打包 「 DllPlugin 」

代碼壓縮「 UglifyJSPlugin 」

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

Code Split 概念

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

同步加載的模塊被打包在同一個(gè) chunk 「 一個(gè) chunk 是一個(gè) JS 文件，由一個(gè)或若干個(gè)模塊組成 」，而通過(guò)異步加載的模塊被打包在另外的 chunk 里，Webpack 以此來(lái)進(jìn)行分片，即 Code split。

Code Split 的方式

AMD : require

CommonJS : require.ensure

ES : System.import

chunk 的內(nèi)容組成

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

Code Split 優(yōu)化

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

歡迎關(guān)注我的公眾號(hào)

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

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

相關(guān)文章

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

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

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

  • webpack的優(yōu)化

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

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

  • React文檔翻譯系列（一）安裝

    摘要：文檔翻譯系列一安裝原文地址原文本系列是針對(duì)文檔進(jìn)行的翻譯，因?yàn)樽约涸趯W(xué)習(xí)的時(shí)候，最開始通過(guò)看博客或者論壇等中文資料，有些內(nèi)容是零零散散的接收，并沒有給自己帶來(lái)很好的效果，所以后來(lái)決定把文檔的原文從頭到尾看一遍。 React文檔翻譯系列（一）安裝 原文地址：原文 本系列是針對(duì)React文檔進(jìn)行的翻譯，因?yàn)樽约涸趯W(xué)習(xí)react的時(shí)候，最開始通過(guò)看博客或者論壇等中文資料，有些內(nèi)容是零零散散的...

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

  • Webpack系列-第一篇基礎(chǔ)雜記

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

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

  • webpack4系列教程（九）：開發(fā)環(huán)境和生產(chǎn)環(huán)境

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

    姘存按 評(píng)論0 收藏0

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

0條評(píng)論

閱讀需要支付1元查看
<