vue 項目webpack打包優化簡單幾步，10M-450K

前言

• 項目優化是咱們項目上線以前必須考量的問題，體積過大，你的頁面加載速度就會很慢，本文重點講解使用vue-cli 2.0的配置，如下幾個方面進行優化及其配置。

未優化以前咱們npm run build

• 咱們看一下體積，有10.1M這麼大，裏面的圖片很大，打包生成的vendor文件很大，還有不少map文件。
  • vendor文件：是你項目中的外部引用的庫，相似element-ui、echarts等等
  • .map文件：是項目打包後，代碼都是通過壓縮加密的，若是運行時報錯，輸出的錯誤信息沒法準確得知是哪裏的代碼報錯。 有了map就能夠像未加密的代碼同樣，準確的輸出是哪一行哪一列有錯。可是在生產環境中咱們就不須要了
• 接下來咱們一步一步優化：
  • 首先對.map進行優化，找到config目錄下的index.js文件，而後找到下圖代碼位置，productionSourceMap默認爲true，改爲false

• 而後咱們看打包以後的體積,此時已經沒有.map文件了，而後大小爲2.42M

• 接下來咱們對vendor文件進行優化，也就是把打包進去vendor文件中的外部庫，使用cdn加載。
• 咱們找到build目錄下的webpack基礎配置，webpack.base.conf.js文件，而後在externals中配置外部引用的地址，而後在indexl.html中配置外部引用的CDN地址，必定要注意要對應你package.json的版本號，否則就會有不少你意想不到的小問題。
• externals中的文件如何配置，摟主在vue-admin-stepbystep教程中說的很明白了，在這裏就不貼出來了，有須要能夠去看。

• 配置好以後，咱們繼續打包，你會看到vendor文件已經就剩20多k了，如今打包後的體積爲986k

• 接下來咱們對圖片進行優化，樓主這張圖片未作任何處理，體積爲570k
• 而後咱們仍是在webpack.base.conf.js中找到以下圖：
• 而後咱們加一行代碼以下：

loader: ['url-loader?limit=10000&name='+utils.assetsPath('img/[name].[hash:7].[ext]'),'image-webpack-loader']
複製代碼

而後咱們下載 cnpm i -save-dev image-webpack-loader,對圖片進行壓縮

• 繼續打包，你會發現圖片只剩下了41.9K,變綠了，很棒，你會發現體積還有452K了，

• 而後就是打包移除console，的一些提示信息
• 咱們找到webpack.prod.conf.js 找到 new UglifyJsPlugin 醜化js，哈哈，而後加上以下兩行突出的代碼，就OK。

new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false,
					drop_debugger: true,
					drop_console:true
        }
      },
複製代碼

最後通常上線的時候都會走gzip壓縮，須要後臺支持，在上面.map代碼下面 productionGzip: true,而後下載註釋裏面提示的插件，注意一下版本號，就能夠了。

結語

• 本篇配置，你會發現，簡單的一匹，沒什麼過多的配置，就有優化到很小的體積了。就是不少小夥伴不知道，因此在技術的路上，咱們要多開闊視野，幹一行愛一行。

系列文章

• [https://juejin.im/post/5c0e450ee51d4504bc5e4038]vue-admin 詳細註釋，必須手把手作項目系列之（一
• [https://juejin.im/post/5c1609eee51d4503ea0aa2a4 詳細註釋，必須手把手作項目系列之（二）
• [https://juejin.im/post/5c18db07518825421322d8cf]vue-admin 詳細註釋，必須手把手作項目系列之（三）丟到服務器中解決報錯
• 麻雀雖小五臟俱全：[項目地址 https://github.com/whylisa/vue-admin-step-by-step.git)
• [react-step-by-step之redux詳細註釋]react-step-by-step之redux詳細註釋