目的：1或颊、優(yōu)化開發(fā)體驗(yàn) 2城菊、優(yōu)化輸出質(zhì)量
1、優(yōu)化開發(fā)體驗(yàn)
提升效率
優(yōu)化構(gòu)建速度
優(yōu)化使?體驗(yàn)
2其做、優(yōu)化輸出質(zhì)量
優(yōu)化要發(fā)布到線上的代碼顶考，減少?戶能感知到的加載時(shí)間
提升代碼性能，性能好妖泄，執(zhí)?就快
01 縮小處理文件的范圍 loader
test include exclude三個(gè)配置項(xiàng)來縮?loader的處理范圍
02 resolve.modules配置
指明第三方模塊安裝的路徑驹沿， 指定node_modules的位置
03 優(yōu)化resolve.alias配置
置通過別名來將原導(dǎo)?路徑映射成?個(gè)新的導(dǎo)?路徑，避免查找路徑的耗時(shí)
04 resolve.extensions配置
在導(dǎo)?語句沒帶?件后綴時(shí)蹈胡，webpack會(huì)?動(dòng)帶上后綴后渊季，去嘗試查找?件是否存在。
extensions:['.js','.json','.jsx','.ts']
- 后綴嘗試列表盡量的?
- 導(dǎo)?語句盡量的帶上后綴罚渐。
05 使?externals優(yōu)化cdn靜態(tài)資源
使?時(shí)却汉，仍然可以通過 import 的?式去引?(如 import $ from 'jquery' )，并且希望webpack 不會(huì)對(duì)其進(jìn)?打包荷并，此時(shí)就可以配置 externals 合砂。
06 使?靜態(tài)資源路徑publicPath(CDN)
##webpack.config.js
output:{
publicPath: '//cdnURL.com', //指定存放JS?件的CDN地址
}
07 MiniCssExtractPlugin 完成抽離css
08 html-webpack-plugin 壓縮html
09 development vs Production模式區(qū)分打包
npm install webpack-merge -D
const merge = require("webpack-merge")
const commonConfig = require("./webpack.common.js")
const devConfig = {
...
}
module.exports = merge(commonConfig,devConfig)
//package.js
"scripts":{
"dev":"webpack-dev-server --config ./build/webpack.dev.js",
"build":"webpack --config ./build/webpack.prod.js"
}
10 tree Shaking
Dead Code ?般具有以下?個(gè)特征
- 代碼不會(huì)被執(zhí)?，不可到達(dá)
- 代碼執(zhí)?的結(jié)果不會(huì)被?到
- 代碼只會(huì)影響死變量（只寫不讀）
- Js tree shaking只?持ES module的引??式Ｔ粗ｔ嫖薄！谈息！
npm i glob-all purify-css purifycss-webpack --save-dev
develpoment的tree shaking是不?效的
11 代碼分割 code Splitting
optimization:{
//幫我們?動(dòng)做代碼分割
splitChunks:{
chunks:"all",//默認(rèn)是?持異步缘屹，我們使?all
}
},
12 使??具量化
- speed-measure-webpack-plugin:可以測量各個(gè)插件和 loader 所花費(fèi)的時(shí)間
- webpack-bundle-analyzer:分析webpack打包后的模塊依賴關(guān)系
13 HardSourceWebpackPlugin ， 打包第三?類庫 優(yōu)化構(gòu)建性能
- 提供中間緩存的作?
- ?次構(gòu)建沒有太?的變化
- 第?次構(gòu)建時(shí)間就會(huì)有較?的節(jié)省
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin')
const plugins = [
new HardSourceWebpackPlugin()
]
14 使?happypack并發(fā)執(zhí)?任務(wù)
運(yùn)?在 Node.之上的Webpack是單線程模型的黎茎，也就是說Webpack需要?個(gè)?個(gè)地處理任務(wù)囊颅，不能同時(shí)處理多個(gè)任務(wù)当悔。 Happy Pack 就能讓W(xué)ebpack將任務(wù)分解給多個(gè)?進(jìn)程去并發(fā)執(zhí)?傅瞻，?進(jìn)程處理完后再將結(jié)果發(fā)送給主進(jìn)程。從?發(fā)揮多核 CPU 電腦的威?盲憎。
共享進(jìn)程功能慎用：項(xiàng)目較少的時(shí)候嗅骄，開啟happyPack和多線程都是需要時(shí)間的，有時(shí)候你會(huì)發(fā)現(xiàn)你構(gòu)建的時(shí)間反而增加了
