下面我就為大家分享一篇vue-cli webpack2專案打包優化，具有很好的參考價值，希望對大家有幫助。
減少檔案搜尋範圍
#設定resolve.modules
Webpack的resolve.modules配置模組庫（即node_modules）所在的位置，在js 裡出現import 'vue' 這樣不是相對、也不是絕對路徑的寫法時，會去node_modules 目錄下找。但是預設的配置，會採用向上遞歸搜尋的方式去尋找，但通常專案目錄裡只有一個node_modules，且是在專案根目錄，為了減少搜尋範圍，可以直接寫明node_modules 的全路徑；同樣，對於別名( `alias)的配置，亦當如此：
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
resolve: {
extensions: ['.js', '.vue', '.json'],
modules: [
resolve('src'),
resolve('node_modules')
],
alias: {
'vue$': 'vue/dist/vue.common.js',
'src': resolve('src'),
'assets': resolve('src/assets'),
'components': resolve('src/components'),
// ...
'store': resolve('src/store')
}
},
...
}合理設定test & include & exclude
test：必須滿足的條件（正規表示式，不要加引號，符合要處理的檔案）
exclude：無法滿足的條件（排除不處理的目錄）
include：匯入的檔案將由載入程式轉換的路徑或檔案陣列（把要處理的目錄包括進來）
這可以減少不必要的遍歷，從而減少效能損失。
替換程式碼壓縮工具
##Webpack 預設提供的UglifyJS 插件，由於採用單執行緒壓縮，速度慢；webpack-parallel-uglify- plugin 插件可以並行運行UglifyJS 插件，更充分且合理的使用CPU 資源，這可以大大減少的建置時間；當然，該插件應用於生產環境而非開發環境，安裝插件後，進行如下設定：// 删掉webpack提供的UglifyJS插件
// new webpack.optimize.UglifyJsPlugin({
// compress: {
// warnings: false,
// drop_console: true
// },
// sourceMap: true
// }),
// 增加 webpack-parallel-uglify-plugin来替换
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');
new ParallelUglifyPlugin({
cacheDir: '.cache/', // 设置缓存路径，不改动的调用缓存，第二次及后面build时提速
uglifyJS:{
output: {
comments: false
},
compress: {
warnings: false
}
}
})拷貝靜態檔案
使用copy-webpack-plugin外掛程式：把指定資料夾下的檔案複製到指定的目錄；其配置如下：var CopyWebpackPlugin = require('copy-webpack-plugin')
plugins: [
...
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.build.assetsSubDirectory,
ignore: ['.*']
}
])
]
DllPlugin & DllReferencePlugin一、在專案build資料夾下新增檔案webpack.dll.conf.js，內容如下
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: {
vendor: [ // 这里填写需要的依赖库
'babel-polyfill',
'axios',
'vue/dist/vue.common.js',
'vue-router',
'pingpp-js',
"region-picker"
]
},
output: {
path: path.resolve(__dirname, '../static/js'),
filename: '[name].dll.js',
library: '[name]_library'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
},
plugins: [
new webpack.optimize.ModuleConcatenationPlugin(),
new webpack.DllPlugin({
path: path.join(__dirname, '.', '[name]-manifest.json'),
libraryTarget: 'commonjs2',
name: '[name]_library'
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
]
}二、在webpack.prod.conf.js檔案裡外掛程式部分新增：
plugins: [
...
// copy custom static assets
new webpack.DllReferencePlugin({
context: path.resolve(__dirname, '..'),
manifest: require('./vendor-manifest.json')
})
]三、在專案根目錄index.html檔案中新增：
<body> <p id="app"></p> <!-- built files will be auto injected --> <script src="<%= webpackConfig.output.publicPath %>spa/js/vendor.dll.js"></script> //添加这句，路径可根据所需修改 </body>
四、在package.json裡打包dll新增指令
"build:dll": "webpack --config build/webpack.dll.conf.js"
五、指令順序
npm run build:dll //打包一次之后依赖库无变动不需要执行 npm run build
優點
#Dll打包以後是獨立存在的，只要其包含的函式庫沒有增減、升級，hash也不會變化，因此線上的dll程式碼不需要隨著版本發布頻繁更新。 App部分程式碼修改後，只需要編譯app部分的程式碼，dll部分，只要包含的函式庫沒有增減、升級，就不需要重新打包。這樣也大大提高了每次編譯的速度。 假設你有多個項目，使用了相同的一些依賴函式庫，它們就可以共用一個dll。 19s->15s設定babel 的cacheDirectory 為true
在webpack.base.conf.js中修改babel-loader：loader: 'babel-loader?cacheDirectory=true',
設定noParse
如果你確定一個模組中，沒有其它新的依賴，就可以設定這項， Webpack 將不再掃描這個文件中的依賴，這對於比較大型類庫，將能促進性能表現，具體可以參見以下配置：module: {
noParse: /node_modules\/(element-ui\.js)/,
rules: [
{
...
}
}
happypack以上是在vue-cli中如何實現webpack2專案打包優化的詳細內容。更多資訊請關注PHP中文網其他相關文章！
