本文由雲+社區發表作者:志航
構建
影響前端發佈速度的有兩個方面,一個是構建,一個就是壓縮,把這兩個東西優化起來,可以減少很多發佈的時間。
thread-loader
thread-loader 會將您的 loader
放置在一個 worker 池裏面運行,以達到多線程構建。
把這個 loader 放置在其他 loader 之前(如下圖 example 的位置), 放置在這個 loader 之後的 loader 就會在一個單獨的 worker 池(worker pool)中運行。
Install
$ npm install --save-dev thread-loader
用法 和 exmaple
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.js$/,
include: path.resolve("src"),
use: [
"thread-loader",
// 你的高開銷的loader放置在此 (e.g babel-loader)
]
}
]
}
每個 worker 都是一個單獨的有 600ms 限制的 node.js 進程。同時跨進程的數據交換也會被限制。請在高開銷的loader中使用,否則效果不佳
更多配置請查看: https://github.com/webpack-co...
happypack
happypack,通過多進程模型,來加速代碼構建。從 github 的 starts 數量來看,happypack 使用的人數比較多,比較受歡迎。
原理
相關的技術原理這裏不再累贅,可以查看淘寶FED的相關文章 happypack 原理解析
用法和example
var HappyPack = require('happypack');
var happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });
// ... 省略其餘配置
module: {
loaders: [
{
test: /\.less$/,
loader: ExtractTextPlugin.extract(
'style',
path.resolve(__dirname, './node_modules', 'happypack/loader') + '?id=less'
)
}
]
},
plugins: [
new HappyPack({
id: 'less',
loaders: ['css!less'],
threadPool: happyThreadPool,
cache: true,
verbose: true
})
]
構建方法總結
從實際使用的情況來看,thread-loader 和 happypack 對於小型項目來說打包速度幾乎沒有影響,是因爲它本身的額外開銷,例如I/O,建議只在大型項目中使用,可以先測試再投入生產環境。
壓縮
不推薦使用 webpack-parallel-uglify-plugin
項目基本處於沒人維護的階段,issue 沒人處理,pr沒人合併。
推薦使用 terser-webpack-plugin
terser-webpack-plugin 是一個使用 terser 壓縮js的webpack 插件。
壓縮是發佈前處理最耗時間的一個步驟,如果是你是在webpack 4 中,只要幾行代碼,即可加速你的構建發佈速度。
用法和 example
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
optimization: {
minimizer: [new TerserPlugin(
parallel: true // 多線程
)],
},
};
更多用法請查看上面鏈接。
總結
隨着 webpack 4 的優化,構建速度其實得到了極大的提升,也收到了parcel 等零配置Web應用打包工具的啓發,其實 webpack 的配置日趨簡潔,何不嘗試配置一下呢?
此文已由騰訊雲+社區在各渠道發佈
獲取更多新鮮技術乾貨,可以關注我們騰訊雲技術社區-雲加社區官方號及知乎機構號