webpack學習篇 效能優化

2021-10-21 19:48:58 字數 4523 閱讀 2500

我們的目標如下：

1.優化打包速度

2.優化**除錯

1.優化**打包速度

2.優化**執行效能

作用：乙個模組發生變化，只會重新打包這乙個模組（而不是打包所有模組） 極大提公升構建速度

devserver:
可以使用hmr功能：因為style-loader內部實現了~

預設不能使用hmr功能 --> 需要修改js**，新增支援hmr功能的**

注意：hmr功能對js的處理，只能處理非入口js檔案的其他檔案。

src/index.js入口檔案，來控制./print.js檔案發生改變時候入口檔案的處理

// src/index.js


import print from './print';


print();


if (module.hot) );


}
預設不能使用hmr功能.同時會導致問題：html檔案不能熱更新了~ （不用做hmr功能）

解決：修改entry入口，將html檔案引入？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？（這裡我還不知道為什麼）

entry: ['./src/js/index.js', './src/index.html'],
設定oneof陣列新增loader進去，那麼檔案對於oneof中的loader 只要匹配裡面的了其中一次就不會在遍歷其他的loader了，就可以加快遍歷速度

注意：不能有兩個配置處理同一種型別檔案

作用：讓第二次打包構建速度更快

vue-cli中是自己寫的cache-loader

,


targets: }]


],// 開啟babel快取


// 第二次構建時，會讀取之前的快取


cachedirectory: true


}},
我們weback打包後會有命名，一般來說都是一樣的，如果文字一樣那麼瀏覽器就會對相同名字的檔案快取，那麼如果我們修改了還是同樣的名字的話就會導致瀏覽器可以沒辦法及時更新，所以下面有3個字段選擇

hash: 每次wepack構建時會生成乙個唯一的hash值。

問題: 因為js和css同時使用乙個hash值。如果重新打包，會導致所有快取失效。（可能我卻只改動乙個css檔案，那麼其他用了[hash]的都改了）

問題:js和css的hash值還是一樣的因為css是在js中被引入的，所以同屬於乙個chunk

contenthash: 根據檔案的內容生成hash值。不同檔案hash值一定不一樣  

不過vue-cli中只是簡單的使用[name],所以我猜測就是伺服器那邊如果檔案發生替換，那麼伺服器也就不會讓瀏覽器快取了。

// 輸出的js檔案


output: ,


// 輸出的css檔案


new minics***tractplugin(),
懶載入~：當檔案需要使用時才載入~，使用import來首先

自定義當前chunk的name： webpackchunkname: 'test'

import(/* webpackchunkname: 'test'./test').then(() => );
預載入 prefetch：會在使用之前，提前載入js檔案 ，等其他資源載入完畢，瀏覽器空閒了，再偷偷載入資源

webpackprefetch: true

那麼規定了同乙個名字的chunk，就會在某乙個更新了同chunk就會同事更新（vur-router就是用這個來對路由懶載入，和**分塊（chunk））

import(/* webpackchunkname: 'test', webpackprefetch: true */'./test').then(() => );
注意：程序啟動大概為600ms，程序通訊也有開銷。只有工作消耗時間比較長，才需要多程序打包（所以在vue-cli中只有在對js進行babel-loader的時候才會進行多程序打包）

當我們需要通過cdn引用某乙個包的時候，所以不希望webpack幫我們打包的時候可以使用

externals:
使用dll技術，對某些庫（第三方庫：jquery、react、vue...）進行單獨打包，防止多次引用，造成多次打包的後果

1.需要新建webpack.dll.js檔案

const  = require('path');


const webpack = require('webpack');


module.exports = ,


output: ,


plugins: [


// 打包生成乙個 manifest.json --> 提供和jquery對映


new webpack.dllplugin()


],mode: 'production'


};
2.執行webpack --config webpack.dll.js生成manifest.json檔案（也就是對映檔案）

// webpack.config.js

json中的資源都會自動引入出口的html檔案

const  = require('path');


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


const webpack = require('webpack');


const addassethtmlwebpackplugin = require('add-asset-html-webpack-plugin');


module.exports = ,


plugins: [


new htmlwebpackplugin(),


// 告訴webpack哪些庫不參與打包，同時使用時的名稱也得變~


new webpack.dllreferenceplugin(),


// 將某個檔案打包輸出去，並在html中自動引入該資源


new addassethtmlwebpackplugin()


],mode: 'production'


};
resolve: ,


// 檔案的補全


extensions: ['.js', '.json', '.jsx', '.css'],


// node_modules 去什麼地方找


modules: [resolve(__dirname, '../../node_modules'), 'node_modules']


},
1.對entry進行多入口，那麼就可以多chunk

2.在js中使用import('')非同步載入，webpack也會進行單獨打包 還可以通過 /* webpackchunkname: 'test' */ 來規定chunk的名字，目前的規定的為test

3.使用optimization（最優化）來執行上面情況會，什麼**會分為同乙個chunk

// optimization 配置

optimization: ,


default:  


}*/},


// 將當前模組的記錄其他模組的hash單獨打包為乙個檔案 runtime


// 解決：修改a檔案導致b檔案的contenthash變化


runtimechunk: `


},minimizer: [


// 配置生產環境的壓縮方案：js和css


new terserwebpackplugin()


]}
作用: 減少**體積，去除無用**

注意：

在package.json中配置 

"sideeffects": false 所有**都沒有***（都可以進行tree shaking）

問題：可能會把css / @babel/polyfill （***）檔案乾掉 都是引用沒事使用

"sideeffects": ["*.css", "*.less"]

webpack 效能優化

1.2 js 與 css 並行載入 1.3 開啟多執行緒 1.4 使用 dns 載入靜態資料 2.空間維度 webpack 效能優化無非是從時間和空間兩個維度去分析。時間指的是打包時間盡可能快 空間指的是打包體積盡可能小。本文的 webpack 效能優化是基於 webpack 4.3.0 版本。本文...

webpack 效能優化

構建速度 1 優化babel loader 開啟babel loader?cachedirectory，指定範圍 2 ignoreplugin 比如一些外掛程式，預設含有多語言檔案，比如moment.js new webpackignoreplugin locale,moment 去掉所有語言包 然...

Webpack效能優化

babel loader 轉換es6 es7等 js新特性語法。css loader 支援.css檔案的載入和解析 轉換成commonjs物件 style loader 將樣式通過 標籤插入到head中 less loader 將less檔案轉換成 cssts loader 將ts轉換成 jsfil...