教育行業(yè)A股IPO第一股（股票代碼 003032）

全國(guó)咨詢/投訴熱線：400-618-4000

為什么要將項(xiàng)目打包發(fā)布？如何打包？

更新時(shí)間:2021年11月01日14時(shí)59分 來源:傳智教育 瀏覽次數(shù):

好口碑IT培訓(xùn)

為什么要打包發(fā)布？
項(xiàng)目開發(fā)完成之后，使用 webpack 對(duì)項(xiàng)目進(jìn)行打包發(fā)布的主要原因有以下兩點(diǎn)：①開發(fā)環(huán)境下，打包生成的文件存放于內(nèi)存中，無法獲取到最終打包生成的文件。②開發(fā)環(huán)境下，打包生成的文件不會(huì)進(jìn)行代碼壓縮和性能優(yōu)化，為了讓項(xiàng)目能夠在生產(chǎn)環(huán)境中高性能的運(yùn)行，因此需要對(duì)項(xiàng)目進(jìn)行打包發(fā)布。

配置 webpack 的打包發(fā)布
在 package.json 文件的 scripts 節(jié)點(diǎn)下，新增 build 命令如下：


--model 是一個(gè)參數(shù)項(xiàng)，用來指定 webpack 的運(yùn)行模式。production 代表生產(chǎn)環(huán)境，會(huì)對(duì)打包生成的文件進(jìn)行代碼壓縮和性能優(yōu)化。
注意：通過 --model 指定的參數(shù)項(xiàng)，會(huì)覆蓋 webpack.config.js 中的 model 選項(xiàng)。
把 JavaScript 文件統(tǒng)一生成到 js 目錄中
在 webpack.config.js 配置文件的 output 節(jié)點(diǎn)中，進(jìn)行如下的配置：


把圖片文件統(tǒng)一生成到 image 目錄中
修改 webpack.config.js 中的 url-loader 配置項(xiàng)，新增 outputPath 選項(xiàng)即可指定圖片文件的輸出路徑：


自動(dòng)清理 dist 目錄下的舊文件
為了在每次打包發(fā)布時(shí)自動(dòng)清理掉 dist 目錄中的舊文件，可以安裝并配置 clean-webpack-plugin 插件：


企業(yè)級(jí)項(xiàng)目的打包發(fā)布
企業(yè)級(jí)的項(xiàng)目在進(jìn)行打包發(fā)布時(shí)，遠(yuǎn)比剛才的方式要復(fù)雜的多，主要的發(fā)布流程如下：
生成打包報(bào)告，根據(jù)報(bào)告分析具體的優(yōu)化方案
Tree-Shaking
為第三方庫啟用 CDN 加載
配置組件的按需加載
開啟路由懶加載
自定制首頁內(nèi)容





猜你喜歡：

webpack打包體積優(yōu)化方法有哪些？

Vue如何監(jiān)控某個(gè)屬性值的變化？【前端技術(shù)文章】

Vue3為什么使用Proxy實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽？

MySQL數(shù)據(jù)庫常用命令匯總【Python進(jìn)階教程】

傳智前端與移動(dòng)開發(fā)培訓(xùn)

0 分享到：
和我們?cè)诰€交談！