當我們在打包一些大的項目的時候,會發現,打包的時間非常非常的長。
這時候除了等待,我們還可以思考如何提高webpack 打包效率。
比如下面幾個點:
1. 版本更新(技術迭代)
升級 webpack / node / npm / yarn 版本
2. 儘可能少的模塊上應用 Loader
如下,我們通過設施exclude,使node_modules 中的代碼,不用loader (也可以設置include:path.resolve(__dirname, ../src))
{
test: /\.js$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader'
},
// {
// loader: 'imports-loader?this=>window'
// }
]
}
這樣就降低了 loader 被頻繁執行的頻率。
3. 儘可能少地使用plugin 並確保plugin可靠
儘可能使用官方推薦的plugin ,一般性能有保證
4. resolve 參數合理配置(儘量少配一些)
我們可以給webpack 配置resolve 參數,如下。
當我們引入其他目錄下的模塊的時候(沒寫擴展名),webpack 會根據配置的默認的擴展名挨個查目錄下文件直到找到文件。
resolve: {
extensions: ['.js', '.vue', '.json']
},
5. 使用DllPlugin 提高打包速度
我們每次打包,都會重新將node_modules 中的內容進行處理,那麼爲什麼不把它單獨拿出來,然後只打包一次,以後使用這一次的好呢。於是,我們先寫一個配置文件,如下。這樣運行這個打包配置,就可以將我們需要的兩個庫打包到/dll/venders.sll.js 中了。
const path = require('path')
module.exports = {
mode: 'production',
entry: {
venders: ['vue', 'lodash']
},
output: {
filename: "[name].dll.js",
path: path.resolve(__dirname, '../dll')
}
}
那麼項目中要如何使用呢。我們可以給上面的output 配置項,配置library 如下。
const path = require('path')
module.exports = {
mode: 'production',
entry: {
venders: ['vue', 'lodash']
},
output: {
filename: "[name].dll.js",
path: path.resolve(__dirname, '../dll'),
library: '[name]'
}
}
然後,我們需要安裝一個插件 add-asset-html-webpack-plugin,如下。
npm install add-asset-html-webpack-plugin --save
然後,回到webpack.config.js 中,添加這個plugin,如下。
const addAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');
module.exports = {
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html'
}),
new CleanWebpackPlugin(),
new addAssetHtmlWebpackPlugin({
filePath: path.resolve(__dirname, '../dll/vendors.dll.js')
})
]
...
}
接下來,我們來做一個webpack 中的映射。打開新的webpack配置文件(只打包node_modules代碼的),如下。
const path = require('path')
const webpack = require('webpack')
module.exports = {
mode: 'production',
entry: {
venders: ['vue', 'lodash']
},
output: {
filename: "[name].dll.js",
path: path.resolve(__dirname, '../dll'),
library: '[name]'
},
plugins: [
new webpack.DllPlugin({
name: '[name]',
path: path.resolve(__dirname, '../dll/[name].manifest.json')
})
]
}
上面plugin 中配置,意思是 使用webpack.DllPlugin 工具,對name 文件進行分析,把name 文件中第三方模塊的映射關係找出來,並寫到path 中。
有了這個映射文件,那麼webpack 打包的時候,對代碼進行分析,如果代碼是在這個映射文件中,那麼就可以直接使用vendors.dll.js 即可。
這時,把映射文件關聯上,就需要我們再去 webpack.config.js 中配置另一項 plugin 了,如下。
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html'
}),
new CleanWebpackPlugin(),
new addAssetHtmlWebpackPlugin({
filePath: path.resolve(__dirname, '../dll/vendors.dll.js')
}),
new webpack.DllReferencePlugin({
manifest:path.resolve(__dirname, '../dll/vendors.manifest.json')
})
]
6. thread-loader, parallel-webpack, happypack 多進程打包
7. 合理使用source-map
...