優化webpack4配置，加快頁面訪問時間

2022-04-07 18:31:29 字數 2699 閱讀 8531

一、問題

在測試環境開啟專案**只需要1s左右，但在正式環境則要12s左右才能開啟頁面，這麼慢才響應真的讓人很惱火，雖然網路肯定有很大原因，但前端**載入也是著實要優化才行。

我看了一下瀏覽器開發者工具，發現前端把整個專案的**檔案都載入了，我也是醉了（因為這個專案我只是接手同事的），最大問題就是在這裡了。

**優化固然很重要，但耗時很久，只能優化webpack打包**了。

二、解決過程

在這個專案裡，我沒看到webpack的配置檔案，只能通過改vue.config.js 檔案，詳細的引數可以在網上找。

1、刪除map檔案

這個雖然對訪問頁面沒有很大的效果，查了一下，打包的時候有這個檔案是存在安全隱患的，然後就果然設定引數刪除掉。

productionsourcemap: false,  //


不生成map檔案，減輕檔案大小
引數是在vue.config.js檔案設定的，打包構建後，構建的資料夾壓縮包大小減少了一半。

2、非同步載入元件

我看到同事很多元件都是用input同步載入的，這樣感覺也會拖延時間，所以統一改成了非同步載入元件

//


同步載入


import information from '@/components/rfmmodel/basicinformation.vue'; //


非同步載入


const information= () => import('@/components/rfmmodel/basicinformation.vue');
3、開啟gzip壓縮

打包的時候壓縮可以減少體積。

（1）安裝

npm install compression-webpack-plugin -d
（2）在vue.config.js中有個configurewebpack引數，在 configurewebpack 返回的物件中，物件屬性plugins陣列 新增外掛程式

const compressionwebpackplugin = require("compression-webpack-plugin");

1 configurewebpack: (config) =>),9],


10}11 },
4、按需引入

lodash-webpack-plugin與babel-plugin-lodash結合使用，但配置完這個，我上面的問題還是沒有解決。

（1）安裝

npm i -s lodash-webpack-plugin babel-plugin-lodash
（2）配置

var lodashmodulereplacementplugin = require('lodash-webpack-plugin')

configurewebpack: (config) =>


}
至於babel-plugin-lodash，我看到專案文件匯出來的webpack配置是已經配好了，查了一下，有兩種配置方法：

①.babelrc中配置 「plugins」: [「transform-runtime」,「transform-vue-jsx」,「lodash」]

②在rules配置

17}


8
5、切割**，合併共用模組

webpack4已經廢棄了commonschunksplugin，改用了splitchunks。這個我也不是很了解，具體引數可檢視官網。

1 configurewebpack: (config) =>,


11common: 


16},


17                 chunks:"all", 


18                 minsize: 40000019}


20},21}


22 },
6、html-webpack-plugin

這個是解決我上面載入全部**檔案的問題，查了一下，它的主要作用：

①為html檔案中引入的外部資源如script、link動態新增每次compile後的hash，防止引用快取的外部檔案問題

②可以生成建立html入口檔案，比如單頁面可以生成乙個html檔案入口，配置n個html-webpack-plugin可以生成n個頁面入口

似乎與我上面的問題一點關係也沒有，但它解決了我的苦惱，天啊，這是為什麼啊！！！

（1）安裝

npm i -s html-webpack-plugin
（2）配置

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

1 configurewebpack: (config) =>)9],


10}11 },
之前都沒試過親自配置webpack，花了好長時間，也才了好多坑，繼續努力。

webpack4配置詳解

方式一 單檔案寫法 entry 方式二 多檔案寫法 entry output 常用的有三種 模板描述 hash模組識別符號的hash,一般應用於filename name hash js chunkhash按需載入塊內容的hash，根據chunk自身的內容計算而來,js name chunkhash...

學習webpack4 基礎配置

學習webpack4 基礎配置 學習webpack4 html處理 學習webpack4 樣式處理 學習webpack4 es6語法轉化 學習webpack4 第三方庫的使用 學習webpack4 抽離公共 yarn init y 初始化專案 yarn add webpack webpack cli...

學習webpack4 基礎配置

學習webpack4 基礎配置 學習webpack4 html處理 學習webpack4 樣式處理 學習webpack4 es6語法轉化 學習webpack4 第三方庫的使用 學習webpack4 抽離公共 yarn init y 初始化專案 yarn add webpack webpack cli...