本篇講的是 Webpack 對于優(yōu)化產(chǎn)出代碼襟诸，也就是對于產(chǎn)品性能的優(yōu)化歌亲，
優(yōu)點：代碼體積更小陷揪；合理分包不重復加載悍缠；速度更快，內(nèi)存使用更少滤港。
懶加載 import
提取公共代碼
IgnorePlugin 避免引入無用模塊
小圖片base64編碼 // 減少請求次數(shù)
bundle加hash
使用 CDN加速
使用 production
Scope Hosting 作用域提升
小圖片base64編碼 減少請求次數(shù)
webpack.prod.js：
module: {
rules: [
// 圖片 - 考慮 base64 編碼的情況
{
test: /\.(png|jpg|jpeg|gif)$/,
use: {
loader: 'url-loader',
options: {
// 小于 5kb 的圖片用 base64 格式產(chǎn)出
// 否則趴拧，依然延用 file-loader 的形式著榴，產(chǎn)出 url 格式
limit: 5 * 1024,
// 打包到 img 目錄下
outputPath: '/img1/',
// 設(shè)置圖片的 cdn 地址（也可以統(tǒng)一在外面的 output 中設(shè)置脑又，那將作用于所有靜態(tài)資源）
// publicPath: 'http://cdn.abc.com'
}
}
},
]
},
bundle加hash [緩存]
webpack.prod.js：
output: {
filename: 'bundle.[contentHash:8].js', // 打包代碼時，加上 hash 戳
path: distPath,
},
使用CDN加速
webpack.prod.js：
① 修改所有靜態(tài)文件 url 的前綴（如 cdn 域名）
output: {
filename: 'bundle.[contentHash:8].js', // 打包代碼時往衷，加上 hash 戳
path: distPath,
publicPath: 'http://cdn.abc.com' // 修改所有靜態(tài)文件 url 的前綴（如 cdn 域名）]
},
② 將html中的js文件和css文件上傳到cdn上去
使用production 模式
webpack.prod.js：
mode: 'production', //webpack4.0+
- 1.自動開啟代碼壓縮
- 2.Vue严卖、React 等會自動刪除調(diào)試代碼（如開發(fā)環(huán)境的warning）
- 3.啟動 Tree-Shaking
Tree-Shaking 通常用于描述移除 JavaScript 上下文中的未引用代碼;
它依賴于 ES2015 模塊系統(tǒng)中的靜態(tài)結(jié)構(gòu)特性妄田，例如 import 和 export。
知識延伸：ES6 Module 和 Commonjs (Node )區(qū)別
- ES6 Module 靜態(tài)引入疟呐，編譯時引入
- Commonjs 動態(tài)引入，執(zhí)行時引入
- 只有 ES6 Module 才能靜態(tài)分析本讥，實現(xiàn)Tree-Shaking
Scope Hosting 作用域提升
背景：
過去捆綁時webpack的權(quán)衡之一是捆綁中的每個模塊都將包裹在單獨的函數(shù)閉包中拷沸。這些包裝函數(shù)使您的JavaScript在瀏覽器中執(zhí)行的速度變慢薯演。多個文件打包后，產(chǎn)生多個函數(shù)跨扮，
Scope Hosting 可以“提升”或?qū)⑺心K的作用域統(tǒng)一衡创，從而使代碼在瀏覽器中的執(zhí)行時間更快。
優(yōu)點：
代碼體積更小
創(chuàng)建函數(shù)作用域更少
代碼可讀性更好
Scope Hosting 開啟條件：
必須使用ES6模塊化語言組織的代碼才能實現(xiàn)Scope Hosting效果
所以針對Npm中的第三方模塊優(yōu)先采用 jsnext:main 中指向 ES6模塊發(fā)語法的文件
配置 webpack.prod.js：
① 引用 ModuleConcatenationPlugin 插件
const ModuleConcatenationPlugin = require('webpack/lib/ModuleConcatenationPlugin');
② 針對Npm中的第三方模塊優(yōu)先采用 jsnext:main 中指向 ES6模塊發(fā)語法的文件
resolve:{
mainFields:['jsnext:main','bromser','main']
},
③ 開啟 Scope Hosting哟玷，在plugins中實例：
plugins:[
new ModuleConcatenationPlugin(),
]
