webpack在打包中體積和速度上的一點優化

（1）webpack 的 resolve.modules 是用來配置模組庫（即 node_modules）所在的位置。當 js 裡出現 import 'vue' 這樣不是相對、也不是絕對路徑的寫法時，它便會到 node_modules 目錄下去找。

（2）在預設配置下，webpack 會採用向上遞迴搜尋的方式去尋找。但通常專案目錄裡只有乙個 node_modules，且是在專案根目錄。為了減少搜尋範圍，可我們以直接寫明 node_modules 的全路徑。

（1）開啟 build/webpack.base.conf.js 檔案，新增如下高亮配置：

module.exports = 
},

webpack的裝載機(loaders)，允許每個子項都可以有以下屬性：

對於include，更精確指定要處理的目錄，這可以減少不必要的遍歷，從而減少效能損失。同樣，對於已經明確知道的，不需要處理的目錄，則應該予以排除，從而進一步提公升效能。假設你有乙個第三方元件的引用，它肯定位於node_modules，通常它將有乙個 src 和乙個 dist 目錄。如果配置webpack來排除 node_modules，那麼它將從 dist 已經編譯的目錄中獲取檔案。否則會再次編譯它們。故而，合理的設定 include & exclude，將會極大地提公升webpack打包優化速度

（1）開啟 build/webpack.base.conf.js 檔案，新增如下高亮配置：

module: ,

,

（1）預設情況下 webpack 使用 uglifyjs 外掛程式進行**壓縮，但由於其採用單執行緒壓縮，速度很慢。

（2）我們可以改用 webpack-parallel-uglify-plugin 外掛程式，它可以並行執行 uglifyjs 外掛程式，從而更加充分、合理的使用 cpu 資源，從而大大減少構建時間。

（1）執行如下命令安裝 webpack-parallel-uglify-plugin

npm i webpack-parallel-uglify-plugin

（2）開啟 build/webpack.prod.conf.js 檔案，並作如下修改：

const paralleluglifyplugin = require('webpack-parallel-uglify-plugin');
//....
// 刪掉webpack提供的uglifyjs外掛程式
//new uglifyjsplugin(
//  },
//  sourcemap: config.build.productionsourcemap,
//  parallel: true
//}),
// 增加 webpack-parallel-uglify-plugin來替換
new paralleluglifyplugin(,
compress: 
}}),

（2）開啟 build/webpack.base.conf.js 檔案，並作如下修改：

const os = require('os');

module.exports = ,]},

plugins: [

//如何處理用法和loader 的配置一樣

loaders: ,

//共享程序池

verbose: true,

})]}

（1）我們的專案依賴中通常會引用大量的 npm 包，而這些包在正常的開發過程中並不會進行修改，但是在每一次構建過程中卻需要反覆的將其解析，而下面介紹的兩個外掛程式就是用來規避此類損耗的：

（1）在 build 資料夾中新建 webpack.dll.conf.js 檔案，內容如下（主要是配置下需要提前編譯打包的庫）：

const path = require('path');
const webpack = require('webpack');
module.exports = ,
output: ,
plugins: [
new webpack.dllplugin(),
new webpack.optimize.uglifyjsplugin(
})]};

"dll":"webpack --config build/webpack.dll.conf.js"

（3）接著執行 npm run dll 命令來生成對應的 dll.js。

注意：如果之後這些需要預編譯的庫又有變動，則需再次執行 npm run build:dll 命令來重新生成 dll.js

（4）index.html 這邊將 dll.js 引入進來。

··· // 你生成了幾個dll都加進來

（5）開啟 build/webpack.base.conf.js 檔案，編輯新增如下高亮配置，作用是通過 dllreferenceplugin 來使用 dllplugin 生成的 dll bundle。

const webpack = require('webpack');
module.exports = ,
//.....
plugins: [
// 新增dllreferenceplugin外掛程式
new webpack.dllreferenceplugin(),
new webpack.dllreferenceplugin(),
new webpack.dllreferenceplugin(),
new webpack.dllreferenceplugin(),
new webpack.dllreferenceplugin()
]}

webpack在打包中體積和速度上的一點優化

webpack打包體積優化

Webpack 打包優化之體積篇

webpack 與 vue 打包體積優化

webpack在打包中體積和速度上的一點優化

webpack打包體積優化

Webpack 打包優化之體積篇

webpack 與 vue 打包體積優化

相關推薦