資訊專欄INFORMATION COLUMN
摘要：優(yōu)化在我們構(gòu)建單頁(yè)面應(yīng)用或封裝插件時(shí)很大機(jī)會(huì)用到這個(gè)的打包工具但項(xiàng)目代碼日益增多時(shí)一些簡(jiǎn)單的配置會(huì)暴露種種弊端打包時(shí)間長(zhǎng)代碼大以下是結(jié)合自身開(kāi)發(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)目代碼日益增多時(shí),webpack一些簡(jiǎn)單的配置會(huì)暴露種種弊端(打包時(shí)間長(zhǎng),代碼大).
以下是結(jié)合自身開(kāi)發(fā)和學(xué)習(xí)webpack過(guò)程解決問(wèn)題的總結(jié).
很多人都知道webpack.optimize.CommonsChunkPlugin這個(gè)插件是用來(lái)提取公共庫(kù)的,但這個(gè)插件也解決不了公共庫(kù)重復(fù)打包的問(wèn)題.
然而,DllPlugin這個(gè)插件就可以解決.
這個(gè)插件會(huì)先把公共庫(kù)打包.
它自己擁有獨(dú)立的webpack配置文件,配置文件入口處是需要打包的公共庫(kù).
當(dāng)它打包完后,會(huì)生成公共的js包和manifest.json.
manifest.json是用來(lái)讓主配置文件DLLReferencePlugin映射到相關(guān)的依賴上去的
當(dāng)我們使用webpack打包后的代碼都經(jīng)過(guò)編譯的,所以變得難以調(diào)試.
所以webpack給了devtool的api,會(huì)通過(guò)Source Map找出出錯(cuò)的正確位置.
選擇devtool的cheap-module-eval-source-map原因是,每個(gè)模塊使用eval()大幅提高持續(xù)構(gòu)建效率和沒(méi)有生成列映射節(jié)省構(gòu)建時(shí)間(瀏覽器引擎會(huì)自動(dòng)給出列信息).
使用extract-text-webpack-plugin將各個(gè)腳本里的樣式提取到出來(lái).
如果設(shè)置allChunks: true會(huì)使提取出來(lái)的樣式合并到一個(gè)文件.
使用optimize-css-assets-webpack-plugin將樣式進(jìn)行壓縮.
使用uglifyjs-webpack-plugin將腳本進(jìn)行壓縮.
js性能優(yōu)化webpack每個(gè)模塊都會(huì)放入一個(gè)閉包函數(shù)中.
使用webpack.optimize.ModuleConcatenationPlugin會(huì)將相關(guān)聯(lián)的模塊放入一個(gè)閉包里.
從而減少閉包的數(shù)量.
使用DllPlugin或webpack.optimize.CommonsChunkPlugin會(huì)將公共的代碼提取出來(lái)打包到其他文件.
避免重復(fù)打包,從而減少包的大小.
當(dāng)服務(wù)開(kāi)啟預(yù)壓縮時(shí).
會(huì)優(yōu)先獲取以文件名稱加.gz結(jié)尾的文件,這份文件是壓縮過(guò)后的文件,體積會(huì)小.
使用CompressionWebpackPlugin會(huì)生成對(duì)應(yīng)壓縮文件.
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/107560.html
摘要：中在性能優(yōu)化所做的努力，也大抵圍繞著這兩個(gè)大方向展開(kāi)。因此，將依賴模塊從業(yè)務(wù)代碼中分離是性能優(yōu)化重要的一環(huán)。大型庫(kù)是否可以通過(guò)定制功能的方式減少體積。這又違背了性能優(yōu)化的基礎(chǔ)。接下來(lái)可以抓住一些細(xì)節(jié)做更細(xì)的優(yōu)化。中，為默認(rèn)啟動(dòng)這一優(yōu)化。 前言：在現(xiàn)實(shí)項(xiàng)目中，我們可能很少需要從頭開(kāi)始去配置一個(gè)webpack 項(xiàng)目，特別是webpack4.0發(fā)布以后，零配置啟動(dòng)一個(gè)項(xiàng)目成為一種標(biāo)配。正因?yàn)?..
摘要：打包分析與性能優(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é)同前后端開(kāi)發(fā)人員較多，提高構(gòu)建效率，成為了改善團(tuán)隊(duì)開(kāi)發(fā)效率的關(guān)鍵之一。 webpack打包分析與性能優(yōu)化 背景 在去年年末參與的一個(gè)項(xiàng)目中，項(xiàng)目技術(shù)棧使用react+es6+ant-design+webpack+babel，生產(chǎn)環(huán)境全量構(gòu)建將...
摘要：原因就是默認(rèn)會(huì)把最重要的東西放到公共里，這里面包含啟動(dòng)應(yīng)用程序的依賴項(xiàng)模塊與模塊的依賴關(guān)系以及文件的版本號(hào)等信息。 之前寫了一篇關(guān)于webpack 如何使用的文章：webpack 單頁(yè)面應(yīng)用實(shí)戰(zhàn)，并且寫了一個(gè) 單頁(yè)面應(yīng)用的小項(xiàng)目 放到了github上。正巧公司前段時(shí)間用webpack 做了一個(gè)項(xiàng)目，項(xiàng)目不大，是基于單頁(yè)面應(yīng)用的。但是上線后才發(fā)現(xiàn)了一些問(wèn)題，原來(lái)還是有一些要優(yōu)化改進(jìn)的地方...
摘要：前言本文基于，主要涉及基本概念基本配置和實(shí)際項(xiàng)目打包優(yōu)化。關(guān)于概念方面參考官網(wǎng)，常用配置來(lái)自于網(wǎng)絡(luò)資源，在文末有相關(guān)參考鏈接，實(shí)踐部分基于自己的項(xiàng)目進(jìn)行優(yōu)化配置。同一文件中，修改某個(gè)影響其他。 前言：本文基于weboack4.x，主要涉及webpack4 基本概念、基本配置和實(shí)際項(xiàng)目打包優(yōu)化。關(guān)于概念方面參考官網(wǎng)，常用配置來(lái)自于網(wǎng)絡(luò)資源，在文末有相關(guān)參考鏈接，實(shí)踐部分基于自己的項(xiàng)目進(jìn)行...
摘要：由于新建項(xiàng)目發(fā)版打包時(shí)間大概需要分鐘，發(fā)版時(shí)嚴(yán)重拖慢下班時(shí)間，所以特意查看了相關(guān)文檔來(lái)優(yōu)化打包速度，爭(zhēng)取早點(diǎn)下班，。分析打包文件要優(yōu)化，先分析。 由于新建項(xiàng)目發(fā)版打包時(shí)間大概需要30分鐘，發(fā)版時(shí)嚴(yán)重拖慢下班時(shí)間，所以特意查看了相關(guān)文檔來(lái)優(yōu)化打包速度，爭(zhēng)取早點(diǎn)下班，^_^。 分析打包文件 要優(yōu)化，先分析。我們先要知道到底是哪里拖慢我們的打包速度呢？ 打包后生成文件分析 可以利用webpa...
閱讀 3668·2021-11-19 09:40
閱讀 3131·2019-08-30 15:54
閱讀 2336·2019-08-30 15:44
閱讀 3224·2019-08-29 15:35
閱讀 3358·2019-08-29 12:22
閱讀 2886·2019-08-28 18:01
閱讀 3171·2019-08-26 13:54
閱讀 933·2019-08-26 12:24
