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

一、問題

在測試環境開啟專案**只需要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 基礎配置

學習webpack4 基礎配置

相關推薦