公司門(mén)戶網(wǎng)站開(kāi)發(fā)熱點(diǎn)事件
1.?減少打包體積
減少打包文件的大小是為了提高加載速度,降低網(wǎng)絡(luò)帶寬消耗,提升用戶體驗(yàn)。常見(jiàn)的減少打包體積的優(yōu)化策略包括:
-
代碼分割(Code Splitting):將代碼拆分成多個(gè)小文件,讓瀏覽器按需加載。常見(jiàn)方法包括:入口分割、動(dòng)態(tài)導(dǎo)入、異步加載。
-
項(xiàng)目分包:在路由里面使用懶加載,將頁(yè)面打包成多個(gè)包
-
樹(shù)搖(Tree Shaking):去除沒(méi)有使用的代碼,減少無(wú)用代碼的引入和打包,特別適用于 ES6 模塊。
-
壓縮(Minification):通過(guò)壓縮 JavaScript、CSS 等資源,去除空格、注釋、換行等無(wú)用字符,減少文件大小。
-
使用?
TerserPlugin
?壓縮 JS。 -
使用?
CssMinimizerPlugin
?壓縮 CSS。 -
壓縮圖片,將比較小的圖片轉(zhuǎn)為base64
-
-
提取公共代碼(Code Deduplication):將多個(gè)文件中重復(fù)的代碼提取到一個(gè)單獨(dú)的文件中,避免重復(fù)打包相同的代碼。
-
使用CDN:將比較大的依賴包放到CDN上,通過(guò)js引入項(xiàng)目
-
刪除無(wú)用資源(Dead Code Elimination):使用?
PurgeCSS
?等工具刪除未使用的 CSS 規(guī)則。 -
按需加載第三方庫(kù):例如,使用?
babel-plugin-import
?只加載庫(kù)的部分功能,而不是整個(gè)庫(kù)。
2.?加快打包速度
加快打包速度是為了提升開(kāi)發(fā)效率,縮短構(gòu)建和重構(gòu)的時(shí)間。常見(jiàn)的加速構(gòu)建的優(yōu)化策略包括:
-
緩存(Caching):通過(guò)使用緩存,避免每次都重新構(gòu)建相同的內(nèi)容,減少重復(fù)的構(gòu)建時(shí)間。Webpack 提供了內(nèi)建的構(gòu)建緩存功能,通過(guò)配置?
cache
?來(lái)保存中間結(jié)果。 -
并行構(gòu)建(Parallelism):通過(guò)并行化處理多個(gè)構(gòu)建任務(wù)來(lái)加速構(gòu)建。例如,
parallel-webpack
?插件可以啟用多個(gè)構(gòu)建進(jìn)程并行執(zhí)行。 -
增加構(gòu)建并發(fā)性:使用?
thread-loader
、happy-pack
?等工具來(lái)將構(gòu)建任務(wù)分配到多個(gè)線程,提升構(gòu)建效率。 -
使用?
HardSourceWebpackPlugin
:通過(guò)存儲(chǔ)模塊構(gòu)建的中間結(jié)果,下次構(gòu)建時(shí)直接復(fù)用,從而加快速度。 -
優(yōu)化?
devtool
?配置:在開(kāi)發(fā)模式下,選擇合適的 source map 類型。通常?eval-source-map
?比較快速,但?source-map
?會(huì)提供更詳細(xì)的調(diào)試信息,適合生產(chǎn)環(huán)境。 -
構(gòu)建監(jiān)視(Watch Mode):在開(kāi)發(fā)過(guò)程中開(kāi)啟?
watch
?模式,避免每次修改都進(jìn)行完全重新構(gòu)建。Webpack 會(huì)監(jiān)聽(tīng)文件變化,僅構(gòu)建發(fā)生變化的部分。 -
熱模塊替換(HMR):通過(guò)模塊熱替換(HMR),僅更新修改的部分,而不是重新加載整個(gè)頁(yè)面,提升開(kāi)發(fā)效率。
總結(jié)
-
減少打包體積:主要關(guān)注如何減小生成的文件大小,減少網(wǎng)絡(luò)傳輸時(shí)間,提升應(yīng)用加載性能。
-
加快打包速度:主要關(guān)注如何優(yōu)化構(gòu)建過(guò)程,提高開(kāi)發(fā)時(shí)的構(gòu)建效率,縮短構(gòu)建和重構(gòu)的時(shí)間。
這兩類優(yōu)化常常是相輔相成的,在實(shí)踐中很多優(yōu)化策略會(huì)同時(shí)涉及到這兩方面的提升。