Webpack性能優化「七」-- 優化產出代碼 ***

本篇講的是 Webpack 對於優化產出代碼，也就是對於產品性能的優化，

優點：代碼體積更小；合理分包不重複加載；速度更快，內存使用更少。

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

小圖片base64編碼 減少請求次數

webpack.prod.js：

module: {
  rules: [
    // 圖片 - 考慮 base64 編碼的情況
    {
      test: /\.(png|jpg|jpeg|gif)$/,
      use: {
        loader: 'url-loader',
        options: {
          // 小於 5kb 的圖片用 base64 格式產出
          // 否則，依然延用 file-loader 的形式，產出 url 格式
          limit: 5 * 1024,

          // 打包到 img 目錄下
          outputPath: '/img1/',

          // 設置圖片的 cdn 地址（也可以統一在外面的 output 中設置，那將作用於所有靜態資源）
          // publicPath: 'http://cdn.abc.com'
        }
      }
    },
  ]
},

bundle加hash [緩存]

webpack.prod.js：

output: {
  filename: 'bundle.[contentHash:8].js',  // 打包代碼時，加上 hash 戳
  path: distPath,
},

使用CDN加速

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

output: {
  filename: 'bundle.[contentHash:8].js',  // 打包代碼時，加上 hash 戳
  path: distPath,
  publicPath: 'http://cdn.abc.com'  // 修改所有靜態文件 url 的前綴（如 cdn 域名）]
},

② 將html中的js文件和css文件上傳到cdn上去

使用production 模式

webpack.prod.js：
mode: 'production', //webpack4.0+

• 1.自動開啓代碼壓縮
• 2.Vue、React 等會自動刪除調試代碼（如開發環境的warning）
• 3.啓動 Tree-Shaking

Tree-Shaking 通常用於描述移除 JavaScript 上下文中的未引用代碼;
它依賴於 ES2015 模塊系統中的靜態結構特性，例如 import 和 export。

知識延伸：ES6 Module 和 Commonjs (Node )區別

• ES6 Module 靜態引入，編譯時引入
• Commonjs 動態引入，執行時引入
• 只有 ES6 Module 才能靜態分析，實現Tree-Shaking

Scope Hosting 作用域提升

背景：

過去捆綁時webpack的權衡之一是捆綁中的每個模塊都將包裹在單獨的函數閉包中。這些包裝函數使您的JavaScript在瀏覽器中執行的速度變慢。多個文件打包後，產生多個函數，
Scope Hosting 可以“提升”或將所有模塊的作用域統一，從而使代碼在瀏覽器中的執行時間更快。

優點：
代碼體積更小
創建函數作用域更少
代碼可讀性更好

Scope Hosting 開啓條件：
必須使用ES6模塊化語言組織的代碼才能實現Scope Hosting效果
所以針對Npm中的第三方模塊優先採用 jsnext:main 中指向 ES6模塊發語法的文件

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

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

② 針對Npm中的第三方模塊優先採用 jsnext:main 中指向 ES6模塊發語法的文件

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

③ 開啓 Scope Hosting，在plugins中實例：

plugins:[
  new ModuleConcatenationPlugin(),
]