webpack優(yōu)化策略

  • 速度分析

    • webpack有時侯打包很慢，而我們在項目中可能用了很多的plugin和 loader，想知道那個環(huán)節(jié)慢，下面這個插件可以計算plugin和loader的耗時
    yarn add -D speed-measure-webpack-plugin

  • 體積分析

    • 打包后的體積優(yōu)化是一個很重要的點，譬如引入的一些第三方組件庫過大，這是就要考慮是否需要尋找替代品了。這里可以采用webpack-bundle-analyzer，它可以用交互式可縮放樹形圖顯示 webpack輸出文件的大小。
    yarn add -D webpack-bundle-analyzer
    • 安裝完后，配置webpcak.config.js，配置好后，yarn run dev啟動后，會默認(rèn)起一個端口號為8888的本地服務(wù)器。這樣就能看到每個模塊的的文件大小，進(jìn)行針對性的優(yōu)化。

  • 多線程/多實例構(gòu)建

    • 大家都知道webpack是運(yùn)行在node環(huán)境中，二node，是單線程的。webpack的打包過程是io密集和計算機(jī)密集型操作，如果能fork，多個進(jìn)程并行處理各個任務(wù)，將會有效縮短構(gòu)建時間。一般使用較多的兩個是thread-loader和HappyPack。

      • thread-loader(官方推薦)
       yarn add -D thread-loader

      thread-loader會將你的loader放置在一個worker池里面運(yùn)行，以達(dá)到多線程構(gòu)建。
      注：放置在這個thread-loader之后的loader會在一個單獨的worker池（worker pool）中運(yùn)行。

      • HappyPack（該插件作者不在維護(hù)）
      yarn add -    D happypack

      HappyPack可以讓W(xué)ebpack同一時間處理多個任務(wù)，發(fā)揮多喝CPU的能力，將任務(wù)分解給多個子進(jìn)程去并發(fā)的執(zhí)行，子進(jìn)程處理完成后，再把結(jié)果發(fā)送給主進(jìn)程。通過多進(jìn)程模型，來加速代碼的構(gòu)建。

  • 多進(jìn)程并行壓縮代碼

    • 通常我們在開發(fā)環(huán)境，代碼構(gòu)建時間比較快，而構(gòu)建用于發(fā)布到線上的代碼時會添加壓縮代碼這一流程，則會道濟(jì)計算量大耗時多
    • webpack默認(rèn)提供了UglifyJS插件來壓縮JS代碼，但是使用的是單線程壓縮代碼，也就是說多個js文件需要被壓縮，它需要一個個文件進(jìn)行壓縮。所以說在正式環(huán)境打包壓縮代碼速度非常慢（因為壓縮JS代碼需要先把代碼解析成用Object抽象表示的AST語法樹，再應(yīng)用各種規(guī)則分析處理AST，導(dǎo)致這個過程耗時非常大）。所以我們要對壓縮代碼這里一步驟進(jìn)行優(yōu)化，常用的做法是多進(jìn)程并行壓縮，目前主要有三種主流的壓縮方案。

      • paralle-uglify-plugin

      • uglifyjs-webpack-plugin

      • terser-webpack-plugin

        • parallel-uglify-plugin
          上面介紹的HappyPack的思想是使用多個子進(jìn)程去解析和編譯JS,CSS等，這樣就可以并行處理多個子任務(wù)，多個子任務(wù)完成后，再將結(jié)果發(fā)到主進(jìn)程中，有了這個思想后，ParallelUglifyPlugin插件就產(chǎn)生了。

          當(dāng)webpack有多個JS文件需要輸出和壓縮時，原來會使用UglifyJS去一個個壓縮并且輸出，而ParallelUglifyPlugin插件則會開啟多個子進(jìn)程，把對多個文件壓縮的工作分給多個子進(jìn)程去完成，但是每個子進(jìn)程還是通過UglifyJS去壓縮代碼。并行壓縮可以顯著的提升效率

          yarn add -D webpack-parallel-uglify-plugin

          注：webpack-parallel-uglify-plugin已不再維護(hù)，這里不推薦使用

        • uglifyjs-webpack-plugin

          yarn add -D uglifyjs-webpack-plugin

          注：其實它和上面的parallel-uglify-plugin類似，也可通過設(shè)置parallel: true開啟多進(jìn)程壓縮。

        • terser-webpack-plugin
          不知道你有沒有發(fā)現(xiàn)：webpack4 已經(jīng)默認(rèn)支持 ES6語法的壓縮。而這離不開terser-webpack-plugin.

        yarn add -D uglifyjs-webpack-plugin

        注：其實它和上面的parallel-uglify-plugin類似，也可通過設(shè)置parallel: true開啟多進(jìn)程壓縮。

  • 預(yù)編譯資源模塊

    • 什么是預(yù)編譯資源模塊？
      在使用webpack進(jìn)行打包時候，對于依賴的第三方庫，比如vue，vuex等這些不會修改的依賴，我們可以讓它和我們自己編寫的代碼分開打包，這樣做的好處是每次更改我本地代碼的文件的時候，webpack只需要打包我項目本身的文件代碼，而不會再去編譯第三方庫。那么第三方庫在第一次打包的時候只打包一次，以后只要我們不升級第三方包的時候，那么webpack就不會對這些庫去打包，這樣的可以快速的提高打包的速度。其實也就是預(yù)編譯資源模塊。webpack中，我們可以結(jié)合DllPlugin和DllReferencePlugin插件來實現(xiàn)。
    • DllPlugin是什么？
      它能把第三方庫代碼分離開，并且每次文件更改的時候，它只會打包該項目自身的代碼。所以打包速度會更快。DLLPlugin插件是在一個額外獨立的webpack設(shè)置中創(chuàng)建一個只有dll的bundle，也就是說我們在項目根目錄下除了有webpack.config.js，還會新建一個webpack.dll.js文件。webpack.dll.js的作用是把所有的第三方庫依賴打包到一個bundle的dll文件里面，還會生成一個名為manifest.json文件。該manifest.json的作用是用來讓DllReferencePlugin映射到相關(guān)的依賴上去的。
    • DllReferencePlugin又是什么？
      這個插件是在webpack.config.js中使用的，該插件的作用是把剛剛在webpack.dll.js中打包生成的dll文件引用到需要的預(yù)編譯的依賴上來。什么意思呢？就是說在webpack.dll.js中打包后比如會生成 vendor.dll.js文件和vendor-manifest.json文件，vendor.dll.js文件包含了所有的第三方庫文件，vendor-manifest.json文件會包含所有庫代碼的一個索引，當(dāng)在使用webpack.config.js文件打包DllReferencePlugin插件的時候，會使用該DllReferencePlugin插件讀取vendor-manifest.json文件，看看是否有該第三方庫。vendor-manifest.json文件就是一個第三方庫的映射而已。
    • 這么在項目中使用
    • 上面說了這么多，主要是為了方便大家對于預(yù)編譯資源模塊和DllPlugin和DllReferencePlugin插件作用的理解。先來看下完成的項目目錄結(jié)構(gòu),主要在兩塊配置，分別是webpack.dll.js和webpack.config.js（對應(yīng)這里我是webpack.base.js）
      image.png
    • webpack.dll.js
      const path = require('path');
  const webpack = require('webpack');

  module.exports = {
    mode: 'production',
    entry: {
    vendors: ['lodash', 'jquery'],
    react: ['react', 'react-dom']
  },
 output: {
  filename: '[name].dll.js',
  path: path.resolve(__dirname, './dll'),
  library: '[name]'
},
plugins: [
  new webpack.DllPlugin({
    name: '[name]',
    path: path.resolve(__dirname, './dll/[name].manifest.json')
    })
  ]
}

    這里我拆了兩部分：vendors（存放了lodash、jquery等）和react（存放了 react相關(guān)的庫，react、react-dom等）

    • webpack.config.js(對應(yīng)我這里就是webpack.base.js)
    const path = require("path");
const fs = require('fs');
// ...
const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');
const webpack = require('webpack');

const plugins = [
 // ...
];

const files = fs.readdirSync(path.resolve(__dirname, './dll'));
files.forEach(file => {
 if(/.*\.dll.js/.test(file)) {
   plugins.push(new AddAssetHtmlWebpackPlugin({
     filepath: path.resolve(__dirname, './dll', file)
   }))
 }  
 if(/.*\.manifest.json/.test(file)) {
   plugins.push(new webpack.DllReferencePlugin({
     manifest: path.resolve(__dirname, './dll', file)
   }))
 }
})

module.exports = {
 entry: {
   main: "./src/index.js"
 },
 module: {
   rules: []
 },
 plugins,

 output: {
   // publicPath: "./",
   path: path.resolve(__dirname, "dist")
   }
 }

    由于上面我把第三方庫做了一個拆分，所以對應(yīng)生成也就會是多個文件，這里讀取了一下文件，做了一層遍歷。最后在package.json里面再添加一條腳本就可以了：

    "scripts": {
  "build:dll": "webpack --config ./webpack.dll.js",
},

    運(yùn)行yarn build:dll就會生成本小節(jié)開頭貼的那張項目結(jié)構(gòu)圖了～

  • 利用緩存提升二次構(gòu)建速度

    • 一般來說，對于靜態(tài)資源，我們都希望瀏覽器能夠進(jìn)行緩存，那樣以后進(jìn)入頁面就可以直接使用緩存資源，頁面打開速度會顯著加快，既提高了用戶的體驗也節(jié)省了寬帶資源。當(dāng)然瀏覽器緩存方法有很多種，這里只簡單討論下在webpack中如何利用緩存來提升二次構(gòu)建速度。在webpack中利用緩存一般有以下幾種思路：
      • babel-loader開啟緩存
      • 使用cache-loader
      • 使用hard-source-webpack-plugin
    • babel-loader
      • babel-loader在執(zhí)行的時候，可能會產(chǎn)生一些運(yùn)行期間重復(fù)的公共文件，造成代碼體積冗余，同時也會減慢編譯效率?？梢约由?code>cacheDirectory參數(shù)開啟緩存：
       {
  test: /\.js$/,
  exclude: /node_modules/,
  use: [{
    loader: "babel-loader",
    options: {
      cacheDirectory: true
    }
  }],
},
    • cache-loader
      • 在一些性能開銷較大的loader之前添加此loader，以將結(jié)果緩存到磁盤里。
      yarn add -D cache-loader
      • 使用cache-loader的配置很簡單，放在其他loader之前即可。修改Webpack的配置如下:
      // webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.ext$/,
        use: [
          'cache-loader',
          ...loaders
        ],
        include: path.resolve('src')
       }
    ]
  }
}
      注：請注意，保存和讀取這些緩存文件會有一些時間開銷，所以請只對性能開銷較大的loader使用此loader。
    • hard-source-webpack-plugin
      • HardSourceWebpackPlugin為模塊提供了中間緩存，緩存默認(rèn)的存放路徑是: node_modules/.cache/hard-source。配置hard-source-webpack-plugin后，首次構(gòu)建時間并不會有太大的變化，但是從第二次開始，構(gòu)建時間大約可以減少 80%左右。 
        yarn add -D hard-source-webpack-plugin
      • 使用 
        // webpack.config.js
var HardSourceWebpackPlugin = require('hard-source-webpack-plugin');

module.exports = {
  entry: // ...
  output: // ...
  plugins: [
      new HardSourceWebpackPlugin()
   ]
}
      注：webpack5中會內(nèi)置hard-source-webpack-plugin。

  • 縮小構(gòu)建目標(biāo)

    • 有時候我們的項目中會用到很多模塊，但有些模塊其實是不需要被解析的。這時我們就可以通過縮小構(gòu)建目標(biāo)或者減少文件搜索范圍的方式來對構(gòu)建做適當(dāng)?shù)膬?yōu)化。
    • 主要是exclude 與 include的使用：
      • exclude: 不需要被解析的模塊
      • include: 需要被解析的模塊
      const path = require('path');
module.exports = {
  ...
  module: {
  rules: [
   {
      test: /\.js$/,
      exclude: /node_modules/,
      // include: path.resolve('src'),
      use: ['babel-loader']
    }
  ]
}
      這里babel-loader就會排除對node_modules下對應(yīng)js的解析，提升構(gòu)建速度。

  • 減少文件搜索范圍

    • 這個主要是resolve相關(guān)的配置，用來設(shè)置模塊如何被解析。通過resolve的配置，可以幫助Webpack快速查找依賴，也可以替換對應(yīng)的依賴。
      • resolve.modules：告訴webpack解析模塊時應(yīng)該搜索的目錄
      • resolve.mainFields：當(dāng)從npm包中導(dǎo)入模塊時（例如，import * as React from 'react'），此選項將 決定在package.json中使用哪個字段導(dǎo)入模塊。根據(jù)webpack配置中指定的target不同，默認(rèn)值也會有所不同
      • resolve.mainFiles：解析目錄時要使用的文件名，默認(rèn)是index
      • resolve.extensions：文件擴(kuò)展名
       // webpack.config.js
const path = require('path');
module.exports = {
  ...
  resolve: {
    alias: {
      react: path.resolve(__dirname, './node_modules/react/umd/react.production.min.js')
    }, //直接指定react搜索模塊，不設(shè)置默認(rèn)會一層層的搜尋
    modules: [path.resolve(__dirname, 'node_modules')], //限定模塊路徑
    extensions: ['.js'], //限定文件擴(kuò)展名
    mainFields: ['main'] //限定模塊入口文件名
  }
  ...
}

  • 動態(tài) Polyfill 服務(wù)

    • 什么是 babel-polyfill?
      babel只負(fù)責(zé)語法轉(zhuǎn)換，比如將ES6的語法轉(zhuǎn)換成ES5。但如果有些對象、方法，瀏覽器本身不支持，比如：
      • 全局對象：Promise、WeakMap 等。
      • 全局靜態(tài)函數(shù)：Array.from、Object.assign 等。
      • 實例方法：比如 Array.prototype.includes 等。
        此時，需要引入babel-polyfill來模擬實現(xiàn)這些對象、方法。這種一般也稱為墊片。
    • 怎么使用 babel-polyfill？
      • 使用也非常簡單，在webpack.config.js文件作如下配置就可以了： 
        module.exports = {
  entry: ["@babel/polyfill", "./app/js"],
};
      babel-polyfill由于是一次性全部導(dǎo)入整個polyfill，所以用起來很方便，但與此同時也帶來了一個大問題：文件很大，所以后續(xù)的方案都是針對這個問題做的優(yōu)化。
    • 動態(tài)Polyfill服務(wù)
      image.png

      每次打開頁面，瀏覽器都會向Polyfill Service發(fā)送請求，Polyfill Service識別 User Agent，下發(fā)不同的 Polyfill，做到按需加載Polyfill的效果。
    • 怎么使用動態(tài)Polyfill服務(wù)？ 
      //訪問url，根據(jù)User Agent 直接返回瀏覽器所需的 polyfills
https://polyfill.io/v3/polyfill.min.js

  • Scope Hoisting

    • 什么是Scope Hoisting？
      Scope hoisting 直譯過來就是「作用域提升」。熟悉 JavaScript 都應(yīng)該知道「函數(shù)提升」和「變量提升」，JavaScript 會把函數(shù)和變量聲明提升到當(dāng)前作用域的頂部?！缸饔糜蛱嵘挂差愃朴诖?，webpack 會把引入的 js 文件“提升到”它的引入者頂部。Scope Hoisting 可以讓 Webpack 打包出來的代碼文件更小、運(yùn)行的更快。

    • 啟用Scope Hoisting

      • 要在 Webpack 中使用 Scope Hoisting 非常簡單，因為這是 Webpack 內(nèi)置的功能，只需要配置一個插件，相關(guān)代碼如下：
      // webpack.config.js
const webpack = require('webpack')

module.exports = mode => {
  if (mode === 'production') {
    return {}
  }

  return {
    devtool: 'source-map',
    plugins: [new webpack.optimize.ModuleConcatenationPlugin()],
  }
}
      • 好處
        • 代碼體積更小，因為函數(shù)申明語句會產(chǎn)生大量代碼；
        • 代碼在運(yùn)行時因為創(chuàng)建的函數(shù)作用域更少了，內(nèi)存開銷也隨之變小。

      Scope Hoisting 的實現(xiàn)原理其實很簡單：分析出模塊之間的依賴關(guān)系，盡可能的把打散的模塊合并到一個函數(shù)中去，但前提是不能造成代碼冗余。因此只有那些被引用了一次的模塊才能被合并。

      注意：由于 Scope Hoisting 需要分析出模塊之間的依賴關(guān)系，因此源碼必須采用 ES6模塊化語句，不然它將無法生效。

文章轉(zhuǎn)自：https://mp.weixin.qq.com/s?__biz=MzU2MzM2NzU0NA==&mid=2247486539&idx=1&sn=7484798f6c42611c1e81447fc5a51739&chksm=fc5a175ccb2d9e4aa4f33f049bee8fa18e5a1c27ed315be2911ca5c8a1802760701b818c500e&mpshare=1&scene=1&srcid=0915Ld1r2gSXJFB9I7tNdaa5&sharer_sharetime=1600137668291&sharer_shareid=a8f4498c49789458cc5918ae43d0aed2&key=7f54b3443b683033173cffe97dc7047f2921f7d585f87442c5b17eb942738599ea5f40012f9783eacf8c4f1a5789472fca6fa37449cd0fcbeb9dbd7bd6c184e8c6a24f652623e6d12b6b414b310815b80f59947220ee0919dbd2ec4e0a9f3b463e09cebee1ab37d6d7ccbc29b4def16a8854304e29ba208adbd3b98dbe475920&ascene=1&uin=MjIxNzU2Mjg4NA%3D%3D&devicetype=Windows+10+x64&version=62090538&lang=zh_CN&exportkey=A4LNOZ5CDhlUAgdwZU%2Bg4Vc%3D&pass_ticket=sU%2F%2FRSgUTGKQVQgrUbMNdKmZ6urS7BLB4AhRGceH6Mq8KLX6W06k8Zdvf2hhC9RU&wx_header=0

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容