欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2023年01月28日 10:50:28   作者:妹寶真的好可愛嗚嗚  
在用 Webpack 打包的時候,對于一些不經(jīng)常更新的第三方庫,比如 react,lodash,vue 我們希望能和自己的代碼分離開,這篇文章主要介紹了react 項目 中 使用 Dllplugin 打包優(yōu)化,需要的朋友可以參考下

webpack在build包的時候,有時候會遇到打包時間很長的問題,這里提供了一個解決方案,讓打包如絲般順滑~

在用 Webpack 打包的時候,對于一些不經(jīng)常更新的第三方庫,比如 react,lodash,vue 我們希望能和自己的代碼分離開。

他們可以打包常用的且不經(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 即可。

結(jié)果截圖

1. npm run build:dll

 2. npm run build

主要說明

  • 定義常用對象

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

  • dll 文件存放目錄

一般定義為 public/vendor。

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

  • entry 入口

定義提取哪些庫/依賴。

  • context (絕對路徑)

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

參考鏈接

Webpack 打包太慢?

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

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

Webpack V5 + React 腳手架的配置

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

相關(guān)文章

最新評論