快捷導(dǎo)航

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

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

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

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

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

使用步驟

1. 根目錄（即跟src平級(jí)）下，新建 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)致報(bào)錯(cuò)，請(qǐng)使用絕對(duì)路徑。

<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"
  },

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

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

結(jié)果截圖

1. npm run build:dll

2. npm run build

主要說明

定義常用對(duì)象

clean-webpack-plugin 主要用于每次生成動(dòng)態(tài)鏈接庫時(shí)首先清空 vendor 目錄。

一般定義為 public/vendor。

注意：一般將動(dòng)態(tài)鏈接庫放到項(xiàng)目的 public 目錄下，而不要放在 dist 或其他目錄中。

entry 入口

定義提取哪些庫/依賴。

context （絕對(duì)路徑）

manifest （或者是內(nèi)容屬性）中請(qǐng)求的上下文，這里使用 process.cwd() 返回當(dāng)前工作目錄。

參考鏈接

Webpack 打包太慢?

構(gòu)建速度——記 Vue 項(xiàng)目中 Webpack 使用 DllPlugin

webpack4 的30個(gè)步驟打造優(yōu)化到極致的 react 開發(fā)環(huán)境

Webpack V5 + React 腳手架的配置

到此這篇關(guān)于react 項(xiàng)目中使用 Dllplugin 打包優(yōu)化的文章就介紹到這了,更多相關(guān)react使用 Dllplugin 打包優(yōu)化內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: