webpack之DllPlugin提高打包速度

2021-10-02 03:48:14 字數 1171 閱讀 7679

在webpack進行打包的時候,對於react、react-dom、vue、vuex等不會改變的依賴,和我們自己的**分開打包,這樣當我們修改自己的**的時候,webpack只需要打包我們自己的**,而第三方依賴第一次打包後,如果沒有公升級或者其他改變,那麼就不需要在打包了,這樣可以提高打包的速度

入口檔案index.js:

import react from 'react';

import from 'react-dom';

render(, window.root);

1、新建乙個webpack.config.dll.js,打包react、react-dom

let path = require('path');

let webpack = require('webpack')

module.exports = ,

output: ,

plugins: [

new webpack.dllplugin()

]}

2、webpack.config.js

let path = require('path');

let htmlwebpackplugin = require('html-webpack-plugin');

const webpack = require('webpack');

module.exports = , // 入口

output: ,

module: ),

// 引用dll外掛程式,在打包檔案目錄裡查詢是否有manifest.json清單目錄,沒有就不用重新打包

new webpack.dllreferenceplugin()

]}

3、構建**,打包第三方庫檔案

npx webpack --config webpack.dll.config.js
生成_dll_react.js和manifest.json檔案,然後執行 npm run build打包其它檔案,在index.html(htmlwebpackplugin裡的index.html)手動新增_dll_react.js的引入

4、執行npm run dev,執行**

webpack學習之路之webpack核心概念

webpack相關文件 webpack官網 webpack中文官網 webpack github位址 webpack 版本差異及修復bug webpack 主要4個核心概念 1 entry entry是某一段 的入口,這段 入口會告訴webpack 裡面有哪些模組的依賴。entry也是打包的入口,告...

webpack學習之webpack基本配置

壓縮檔案 分割 提取公用 模組合併 把多個模組合併 自動重新整理 熱更新 改變,自動重新整理頁面 由於外掛程式可以攜帶引數 選項,必須在 webpack 配置中,向 plugins 屬性傳入的是外掛程式的例項。let require clean webpack plguin new cleanweb...

雜談之webpack篇

預留個空位,待上線。先學習react,回來補上。又看了webpack的文件不知道該怎麼下筆好,還是先寫react 吧,對webpack理解加深了在補。現在補一點webpack的知識。之前之所以不知道怎麼寫是因為把react和webpack當成離散的知識點了,而實際應用應該把離散的知識貫穿起來。首先應...