webpack使用配置優化

使用vue+webpack模組化開發也有一段時間了，這過程中遇到過很多的問題。在驚奇於webpack的模組化打包同時，也列舉幾個經常遇到的問題，以及相應的解決辦法；

基本配置：

var path = require('path');

var webpack = require('webpack');
var del = require('del'); //
刪除檔案和目錄
var extracttextplugin = require('extract-text-webpack-plugin'); //
提採樣式
var commonplugin = new webpack.optimize.commonschunkplugin('common'); //
抽離打包
module.exports =,
output: ,
module: , , ]
})}, , , 
}]},
resolve: 
},devserver: ,
performance: ,
devtool: '#eval-source-map',
plugins: [
new extracttextplugin('[name].css'), //
抽離css**到樣式檔案
new webpack.optimize.commonschunkplugin(),
commonplugin 
//打包成common.js檔案，包含webpack引導和最新build的hash值]}
if (process.env.node_env === 'production') 
}),newwebpack.optimize.uglifyjsplugin(
}),newwebpack.loaderoptionsplugin()])}

描述：專案中經常會用到第三方類庫，比如jquery，lodash，bootstrap等。一般配置好entry和output後，每次build都要把依賴的資源重新打包一次。這樣很費時間，另外對更新也不太友好。通過在entry.verdors:['lodash','jquery']新增需要引入的第三方類庫，和plugins:[new webpack.optimize.commonschunkplugin()]，把原來打包到main.js檔案中的類庫，統一打包在verdors.js檔案中，並且還可以繼續在其他指令碼檔案中使用import獲取引用

在專案構建的過程中，會先把打包vendors指明的第三方類庫打包。比如在我的專案裡第三方依賴有lodash、vue、vue-router、vue-resource、element-ui，在剛開始的打包進度裡，總共有五個模組需要打包。

處理：alias 配置模組

描述：專案中經常需要用到乙個或多個公用的資料夾，比如components(元件)，service等。直接使用檔案的相對路徑引入，在檔案位置發生時要重新修改一遍檔案引入路徑。另外在一些目錄結構比較深的指令碼裡引入公共元件檔案時，常常的'../../../'字首會讓**看起來很凌亂，也不容易維護。

使用檔案別名，就可以解決檔案引入路徑過深，檔案更改時需要重新修改路徑的問題。

處理：process.env.node_env

描述：在專案package.json中配置scripts指令碼命令，如下

,

"dependencies": ,
"devdependencies": 
}

let baseurl, defaultaccount =;

if (process.env.node_env == 'production') 
else
export 

描述：webpack對各類資源的載入，是需要配置不同的loader載入器獲取資源；測試過在模組較少的時候打包速度就非常快，隨著專案越滾越大，構建速度會慢很多。

處理：uglifyjsparallelplugin

描述：每次在build的過程中，都會發現當打包進度到91%的時候就會停滯一會兒。

webpack效能優化，自定義配置

以下是自己的總結 1，使用靜態資源路徑 在publicpath中寫上自己的cdn的路徑，設定之後會在所有的資源前加上這個路徑字首，這樣在頁面在請求資源的時候，就會去cdn上查詢請求資源 2，縮小檔案搜尋範圍 在loader的rules中設定include，設定之後，就只在設定的路徑中區搜尋，excl...

webpack 效能優化

1.2 js 與 css 並行載入 1.3 開啟多執行緒 1.4 使用 dns 載入靜態資料 2.空間維度 webpack 效能優化無非是從時間和空間兩個維度去分析。時間指的是打包時間盡可能快 空間指的是打包體積盡可能小。本文的 webpack 效能優化是基於 webpack 4.3.0 版本。本文...

webpack打包優化

tree shaking 使用import匯入的包，在生產環境下自動去除包內沒有引用的 這是webpack打包自帶的優化 import是es6引入規範 所以記得要裝babel require是common.js引入規範 scope hosting 在bundle.js檔案 module a.js e...