本篇講的是 Webpack 對(duì)于優(yōu)化產(chǎn)出代碼，也就是對(duì)于產(chǎn)品性能的優(yōu)化，

優(yōu)點(diǎn)：代碼體積更??；合理分包不重復(fù)加載；速度更快，內(nèi)存使用更少。

懶加載 import
提取公共代碼
IgnorePlugin 避免引入無(wú)用模塊
小圖片base64編碼 // 減少請(qǐng)求次數(shù)
bundle加hash
使用 CDN加速
使用 production
Scope Hosting 作用域提升

小圖片base64編碼 減少請(qǐng)求次數(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',  // 打包代碼時(shí)，加上 hash 戳
  path: distPath,
},

使用CDN加速

webpack.prod.js：
① 修改所有靜態(tài)文件 url 的前綴（如 cdn 域名）

output: {
  filename: 'bundle.[contentHash:8].js',  // 打包代碼時(shí)，加上 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.自動(dòng)開(kāi)啟代碼壓縮
• 2.Vue、React 等會(huì)自動(dòng)刪除調(diào)試代碼（如開(kāi)發(fā)環(huán)境的warning）
• 3.啟動(dòng) Tree-Shaking

Tree-Shaking 通常用于描述移除 JavaScript 上下文中的未引用代碼;
它依賴(lài)于 ES2015 模塊系統(tǒng)中的靜態(tài)結(jié)構(gòu)特性，例如 import 和 export。

知識(shí)延伸：ES6 Module 和 Commonjs (Node )區(qū)別

• ES6 Module 靜態(tài)引入，編譯時(shí)引入
• Commonjs 動(dòng)態(tài)引入，執(zhí)行時(shí)引入
• 只有 ES6 Module 才能靜態(tài)分析，實(shí)現(xiàn)Tree-Shaking

Scope Hosting 作用域提升

背景：

過(guò)去捆綁時(shí)webpack的權(quán)衡之一是捆綁中的每個(gè)模塊都將包裹在單獨(dú)的函數(shù)閉包中。這些包裝函數(shù)使您的JavaScript在瀏覽器中執(zhí)行的速度變慢。多個(gè)文件打包后，產(chǎn)生多個(gè)函數(shù)，
Scope Hosting 可以“提升”或?qū)⑺心K的作用域統(tǒng)一，從而使代碼在瀏覽器中的執(zhí)行時(shí)間更快。

優(yōu)點(diǎn)：
代碼體積更小
創(chuàng)建函數(shù)作用域更少
代碼可讀性更好

Scope Hosting 開(kāi)啟條件：
必須使用ES6模塊化語(yǔ)言組織的代碼才能實(shí)現(xiàn)Scope Hosting效果
所以針對(duì)Npm中的第三方模塊優(yōu)先采用 jsnext:main 中指向 ES6模塊發(fā)語(yǔ)法的文件

配置 webpack.prod.js：
① 引用 ModuleConcatenationPlugin 插件

const ModuleConcatenationPlugin = require('webpack/lib/ModuleConcatenationPlugin');

② 針對(duì)Npm中的第三方模塊優(yōu)先采用 jsnext:main 中指向 ES6模塊發(fā)語(yǔ)法的文件

resolve:{
  mainFields:['jsnext:main','bromser','main']
},

③ 開(kāi)啟 Scope Hosting，在plugins中實(shí)例：

plugins:[
  new ModuleConcatenationPlugin(),
]