react 項目中使用 Dllplugin 打包優(yōu)化技巧

更新時間：2023年01月28日 10:50:28 作者：妹寶真的好可愛嗚嗚

在用 Webpack 打包的時候，對于一些不經(jīng)常更新的第三方庫，比如 react，lodash，vue 我們希望能和自己的代碼分離開，這篇文章主要介紹了react 項目中使用 Dllplugin 打包優(yōu)化,需要的朋友可以參考下

他們可以打包常用的且不經(jīng)常更新的模塊，生成 JS 和 json文件，一般放入 public 目錄中；項目打包時不會再對這些依賴進行編譯，而是通過在 html 中插入 script 標簽來讀取依賴。比如 vue，antd，echarts 等常用框架和資源庫。這在項目依賴包達到一定規(guī)模時尤為明顯，在速度的提升上是顯著的。

原理：項目中引入了很多第三方庫，這些庫在很長的一段時間內(nèi)，基本不會更新，打包的時候分開打包來提升打包速度，而DllPlugin動態(tài)鏈接庫插件，其原理就是把網(wǎng)頁依賴的基礎(chǔ)模塊抽離出來打包到dll文件中，當需要導(dǎo)入的模塊存在于某個dll中時，這個模塊不再被打包，而是去dll中獲取。

使用步驟

1. 根目錄（即跟src平級）下，新建 webpack.dll.config.js 文件

const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const path = require("path");
const webpack = require("webpack");
 
// dll文件存放的目錄
const dllPath = "public/vendor";
 
module.exports = {
  mode: "development",
  entry: {
    // 需要提取的庫文件
    vendor: ["react-router-dom", "react", "antd"],
  },
  output: {
    path: path.join(__dirname, dllPath),
    filename: "[name].dll.js",
    library: "[name]_[hash]",
  },
  plugins: [
    // 清除之前的dll文件
    new CleanWebpackPlugin(),
    new webpack.DllPlugin({
      path: path.join(__dirname, dllPath, "[name]-manifest.json"),
      name: "[name]_[hash]",
      context: process.cwd(),
    })
  ],
};

2. 然后在webpack.config.js中添加代碼

plugins: [
    new webpack.DllReferencePlugin({
        manifest: require('../public/vendor/vendor-manifest.json')
      }),
  ]

3. 在入口html文件中引入 vendor.dll.js

注意：為避免在路由的非根路徑刷新頁面導(dǎo)致報錯，請使用絕對路徑。

<script defer="defer"
src="%PUBLIC_URL%/vendor/vendor.dll.js"></script>

4. 在package.json文件中添加快捷命令(build:dll)

"scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
    "build:dll": "webpack --config webpack.dll.config.js"
  },

最后打包的時候首先執(zhí)行npm run build:dll命令會在打包目錄下生成 vendor-manifest.json 文件與 vendor.dll.js 文件。打包dll的時候，Webpack會將所有包含的庫做一個索引，寫在一個manifest文件中，而引用dll的代碼（dll user）在打包的時候，只需要讀取這個manifest文件，就可以了。

再執(zhí)行npm run build 即可。