21.Vue---npm run build 項目打包文件過大(體積優化)


  在項目打包完成后,經常會遇到一些文件過大或者一些路徑地址不對的問題從而導致項目加載緩慢以及一些圖片加載不出來或者一些其他問題的產生。根據自己打包后遇到的一些問題在這里記錄一下,以防下次遇到后還的麻煩性的查找,唉😔~~~,就是懶,哈哈。

  (注:本文呢我就寫一些遇到的問題和一些解決的方法,具體的實現過程,我想各位應該都查閱過一些博客了,我就附上參考鏈接吧!😔這博主Realy lazy!!!)

一、vender文件過大,或者時app.js文件很大,又或者路徑地址不對:

  1.不常用的庫的CDN方式引入。  參考地址:https://www.cnblogs.com/wjunwei/p/9242142.html

  2.Router路由的懶加載。     參考地址:同1

  3.config/index.js 下的build 中的asstsPublicPath改為'./' 即 assetsPublicPath: './',         (作用:靜態路徑的修改,防止打包后路徑地址重復或者不對的問題發生。)

  4.build/utils.js 下的 if (options.extract) 中的 return ExtractTextPlugin.extract({ }) 加一個屬性設置 publicPath:'../../' //關鍵句  (作用:跟3一起使用,作用一致。)

  5.config/index.js 下的build 中的productionSourceMap改為false 即 productionSourceMap: false,                  (作用:避免生成map文件,打包更快。)

  6.config/index.js 下的build 中的productionGzip改為true (注:這個壓縮方法呢我沒使用,但根據看的一些博客都說也是一種優化方式,你們使用時可以查一下該方式的使用方法,還需要下載插件) 

 

二、app.css文件過大:

  1.build/webpack.base.conf.js 中 修改 url-loader的limit屬性。默認是100000,我改成了5000。 (該方法呢嘗試了幾次修改大小,但是結果文件的優化有限,自己酌情待估吧。)

   2.使用extract-text-webpack-plugin插件。 參考鏈接:https://www.cnblogs.com/dyx-wx/p/6529447.html ;

   如果報 webpack Can't resolve 'style-loader' 這個錯誤,則就請大家查看參考鏈接:https://www.jianshu.com/p/26fd6103e577

     (注意:大家在使用這個插件時,打包時在webpck.base.conf.js文件中的 rules 中添加的那個配置對象打開,在本地運行時呢,把這個注釋掉,否則本地會報錯。參考地址:https://blog.csdn.net/sinat_33312523/article/details/72566004

 

三、圖片過大:

  1.使用TinyPNG壓縮圖片,但是圖片質量不會有太大影響。 地址:https://tinypng.com/

  2.使用cdn網站,把圖片傳上去,使用線上地址。如:騰訊雲cdn、阿里雲cdn (本人沒有使用過這個,只因為需要花錢,心疼。。。 大家要是想使用該方法可以問問公司是否有使用一些相關的cdn)

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM