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()
返回當前工作目錄。
參考鏈接
構(gòu)建速度——記 Vue 項目中 Webpack 使用 DllPlugin
webpack4 的30個步驟打造優(yōu)化到極致的 react 開發(fā)環(huán)境
到此這篇關(guān)于react 項目 中 使用 Dllplugin 打包優(yōu)化的文章就介紹到這了,更多相關(guān)react使用 Dllplugin 打包優(yōu)化內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
react+ant design實現(xiàn)Table的增、刪、改的示例代碼
這篇文章主要介紹了react+ant design實現(xiàn)Table的增、刪、改的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-12-12一篇文章教你用React實現(xiàn)菜譜系統(tǒng)
本篇文章主要介紹了React實現(xiàn)菜譜軟件的實現(xiàn),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2021-09-09JavaScript的React框架中的JSX語法學(xué)習(xí)入門教程
這篇文章主要介紹了JavaScript的React框架中的JSX語法學(xué)習(xí)入門教程,React是由Facebook開發(fā)并開源的高人氣js框架,需要的朋友可以參考下2016-03-03React Native中NavigatorIOS組件的簡單使用詳解
這篇文章主要介紹了React Native中NavigatorIOS組件的簡單使用詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-01-01使用React Native創(chuàng)建以太坊錢包實現(xiàn)轉(zhuǎn)賬等功能
這篇文章主要介紹了使用React Native創(chuàng)建以太坊錢包,實現(xiàn)轉(zhuǎn)賬等功能,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07Docker部署SpringBoot項目到云服務(wù)器的實現(xiàn)步驟
Docker作為一種輕量級的容器化技術(shù),為開發(fā)者提供了快速、便捷的部署方案,本文主要介紹了Docker部署SpringBoot項目到云服務(wù)器,具有一定的參考價值,感興趣的可以了解一下2024-01-01react實現(xiàn)動態(tài)增減表單項的示例代碼
在做項目的時候,甲方給的信息有限,網(wǎng)頁的備案信息寫成固定的,之后驗收的時候,甲方要求把這個備案信息寫成動態(tài)的,可以自增減,下面通過實例代碼給大家介紹react實現(xiàn)動態(tài)增減表單項的示例,感興趣的朋友跟隨小編一起看看吧2024-05-05React項目中fetch實現(xiàn)跨域接收傳遞session的解決方案
這篇文章主要介紹了React項目中fetch實現(xiàn)跨域接收傳遞session的解決方案,本次項目使用了react框架,同時使用fetch取代ajax作為獲取接口數(shù)據(jù)的交互方法,下面就對這次問題的解決做個總結(jié),需要的朋友可以參考下2022-04-04關(guān)于React Native使用axios進行網(wǎng)絡(luò)請求的方法
axios是一個基于Promise的Http網(wǎng)絡(luò)庫,可運行在瀏覽器端和Node.js中,Vue應(yīng)用的網(wǎng)絡(luò)請求基本都是使用它完成的。這篇文章主要介紹了React Native使用axios進行網(wǎng)絡(luò)請求,需要的朋友可以參考下2021-08-08