webpack 性能優(yōu)化
開(kāi)發(fā)環(huán)境性能優(yōu)化
優(yōu)化打包構(gòu)建速度
HMR優(yōu)化代碼調(diào)試source-map
生產(chǎn)環(huán)境性能優(yōu)化
優(yōu)化打包構(gòu)建速度
oneOf babel 緩存 多進(jìn)程打包 externals dll 優(yōu)化代碼運(yùn)行的性能 緩存（hash,chunkhash,contenthash） tree shaking code split 懶加載和預(yù)加載 pwa
優(yōu)化 開(kāi)發(fā)環(huán)境 打包構(gòu)建速度
HMR hot module replacement 熱模塊替換/模塊熱替換
作用：一個(gè)模塊發(fā)生變化，只會(huì)重新打包這一個(gè)模塊 而不是重新打包所有,極大提升構(gòu)建速度
樣式文件: 可以使用HMR功能，因?yàn)閟tyle-loader內(nèi)部實(shí)現(xiàn)了 js文件: 默認(rèn)不能使用HMR功能 -->解決：需要修改js代碼，添加支持HMR功能的代碼。注意，HMR功能對(duì)js的處理，只能處理非入口js文件的其他文件。
- if(module.hot){
- //一旦module.hot是true，說(shuō)明開(kāi)啟HMR功能，讓HMR功能代碼生效
- module.hot.accept('./xxx.js',function(){
- //此方法會(huì)監(jiān)聽(tīng)print.js文件的變化，一旦發(fā)生變化，其他默認(rèn)不會(huì)重新打包構(gòu)建
- //會(huì)執(zhí)行后面的回調(diào)函數(shù)
- xxx();
- })
- }
html文件: 默認(rèn)不能使用HMR功能，同時(shí)會(huì)導(dǎo)致問(wèn)題：html文件不能熱更新了 解決：改 entry:['入口js','html'] ，但html文件只有一個(gè)，所以不用做HMR功能
- devServer:{
- //項(xiàng)目構(gòu)建后的目錄
- contentBase: resolve(__dirname,'build'),
- //啟用gzip壓縮
- compress:true,
- //端口號(hào)
- port:3000,
- //自動(dòng)打開(kāi)瀏覽器
- open:true
- }
優(yōu)化 開(kāi)發(fā)環(huán)境 代碼調(diào)試
source-map 一種提供源代碼到構(gòu)建后代碼映射的技術(shù)
如果構(gòu)建后代碼出錯(cuò)了，通過(guò)映射可以追蹤到錯(cuò)誤的代碼
- webpack.config.js
- devtools:'source-map'
- //其他 參數(shù) [inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map
- source-map : 外部
- 錯(cuò)誤代碼的準(zhǔn)確信息和錯(cuò)誤位置
- inline-source-map : 內(nèi)聯(lián)
- 錯(cuò)誤代碼的準(zhǔn)確信息和錯(cuò)誤位置
- hidden-source-map : 外部
- 錯(cuò)誤代碼的錯(cuò)誤原因 但沒(méi)有錯(cuò)誤位置，不能追蹤到源代碼的錯(cuò)誤，只能提示到構(gòu)建后代碼的位置
- eval-source-map : 內(nèi)聯(lián)
- 每一個(gè)文件都生成對(duì)應(yīng)的source-map,都在eval
- 錯(cuò)誤代碼的準(zhǔn)確信息和錯(cuò)誤位置
- nosources-source-map : 外部
- 能找到錯(cuò)誤代碼的準(zhǔn)確信息 但沒(méi)有任何源代碼信息
- cheap-source-map : 外部
- 錯(cuò)誤代碼的準(zhǔn)確信息和錯(cuò)誤位置 只精確到行，不精確到列
- cheap-module-source-map : 外部
- 錯(cuò)誤代碼的準(zhǔn)確信息和錯(cuò)誤位置
- module 會(huì)將 loader 的 source-map加入
- 內(nèi)聯(lián) 和 外部的區(qū)別 ：
- 1.外部生成了文件但內(nèi)聯(lián)沒(méi)有生成
- 2.內(nèi)聯(lián)構(gòu)建速度更快
開(kāi)發(fā)環(huán)境：速度快，調(diào)試更友好
- 速度快 eval>inline>cheap>...
- 調(diào)試更友好 souce-map>cheap-module-souce-map>cheap-souce-map
- 所以 一般用eval-source-map
生產(chǎn)環(huán)境：源代碼要不要隱藏，調(diào)試要不要友好？?jī)?nèi)聯(lián)會(huì)讓體積編碼，所以一般不用內(nèi)聯(lián)
- nosources-source-map 隱藏源代碼
- hidden-source-map 只隱藏源代碼，會(huì)提示構(gòu)建購(gòu)代碼錯(cuò)誤信息
- --> source-map /cheap-module-souce-map
優(yōu)化生產(chǎn)環(huán)境
oneOf
rules里中有許多個(gè)loader，這樣會(huì)導(dǎo)致每個(gè)文件都會(huì)被所有的loader過(guò)一遍，有些能處理，有些處理不了。所以可以利用oneOf達(dá)到以下loader只會(huì)匹配到第一個(gè)。但需要注意，不能有兩個(gè)loader同時(shí)處理同一個(gè)文件
- webpack.config
- module.exports={
- //....
- module:{
- rule:[
- //正常來(lái)講，一個(gè)文件只能被一個(gè)loader處理
- //當(dāng)一個(gè)文件要被多個(gè)loader處理，那么一定要指定loader的執(zhí)行順序
- // 先執(zhí)行eslint 再執(zhí)行babel
- {
- test:/\.js$/,
- exclude:/node_modules/,
- //優(yōu)先執(zhí)行
- enforce:'pre',
- loader:'eslint-loader',
- options:{
- fix:true
- }
- },
- {
- oneOf:[
- {
- test: /\.css$/,
- use:[
- ...commonCssLoader
- ]
- },
- {
- test:/\.less$/,
- use:[
- ...commonCssLoader,'less-loader'
- ]
- },
- {
- test:/\.js$/,
- exclude:/node_modules/,
- loader:'babel-loader',
- options:{
- // 預(yù)設(shè) ：指示babel做怎樣的兼容性處理
- presets:[
- [
- '@babel/preset-env',
- {
- //按需加載
- useBuiltIns:'usage',
- //指定core-js版本
- corejs:{
- version:3
- },
- //指定兼容性做到哪個(gè)版本的瀏覽器
- targerts:{
- chrome: '40',
- fixfox: '50',
- ie: '9',
- safari: '10',
- edge: '17'
- }
- }
- ]
- ]
- }
- },
- {
- test:/\.(png|jpg|gif)/,
- loader:'url-loader',
- enModule:true,
- options:{
- limit:8*1024,
- name: '[hash:10].[ext]',
- outputpath:''
- }
- },
- {
- test:/\.html$/,
- loader:'html-loader'
- },
- {
- exclude:/\.(js|less|css|png|jpg|gif)/,
- loader:'file-loader',
- options:{
- name:'[hash:10].[ext]'
- }
- }
- ]
- }
- ]
- },
- }
緩存
1.babel緩存-->第二次打包更快
- {
- test:/\.js$/,
- exclude:/node_modules/,
- loader:'babel-loader',
- options:{
- // 預(yù)設(shè) ：指示babel做怎樣的兼容性處理
- presets:[
- [
- '@babel/preset-env',
- {
- //按需加載
- useBuiltIns:'usage',
- //指定core-js版本
- corejs:{
- version:3
- },
- //指定兼容性做到哪個(gè)版本的瀏覽器
- targerts:{
- chrome: '40',
- fixfox: '50',
- ie: '9',
- safari: '10',
- edge: '17'
- }
- }
- ]
- ],
- //第二次構(gòu)建時(shí)，會(huì)讀取之前的緩存
- cacheDirectory: true
- }
- },
2.文件資源緩存-->上線緩存優(yōu)化
- hash:每次webpack構(gòu)建會(huì)生成一個(gè)唯一hash值
- 問(wèn)題： 因?yàn)閖s和css同時(shí)使用一個(gè)hash值，如果重新打包，會(huì)導(dǎo)致所有緩存失效，可能我卻只改了一個(gè)文件，
- chunkhash：根據(jù)chunk生成hash值，如果打包來(lái)源于同一個(gè)chunk，那么hash值也一樣
- 問(wèn)題：js和css的hash值還是一樣的。
- 原因：css是由js引入的，所以屬于同一個(gè)chunk
- contenthash: 根據(jù)文件內(nèi)容生成hash值，
- webpack.config.js
tree shaking
去除應(yīng)用程序中沒(méi)有使用的代碼
- 前提：
- 1.必須使用es6模塊化
- 2.開(kāi)啟production模式
- 在package.json中配置
- "sideEffects":false 所有代碼都沒(méi)有副作用，都可以鏡像tree sharking
- 問(wèn)題 可能會(huì)把css/@babel/polyfille 干掉
- "sideEffects": ["*.css","*.less"] 哪些文件不 tree sharking
code split
1.入口配置
- 單入口 //單頁(yè)面應(yīng)用
- entry:'./src/js/index.js'
- 多入口 //多頁(yè)面應(yīng)用
- entry:{
- index:'./src/js/index.js',
- test:'./src/js/test.js'
- }
2.optimization
- module.exports={
- //...
- // 可以將nodemudules中的代碼單獨(dú)打包成一個(gè)chunk最終輸出
- // 還可以自動(dòng)分析多入口chunk中，有沒(méi)有公共的文件，如果有會(huì)打包成一個(gè)單獨(dú)的chunk
- optimization:{
- splitChunks:{
- chunks:'all'
- }
- }
- }
3.import 動(dòng)態(tài)導(dǎo)入語(yǔ)法，能將某個(gè)文件單獨(dú)打包
通過(guò)js代碼，讓某個(gè)文件被單獨(dú)打包成一個(gè)chunk,通過(guò)注釋可以固定此文件的名稱
- import(/*webpackChunkName: 'xxxName' */'./xx/xxx.js')
- .then(res =>{
- //加載成功
- })
- .catch(()=>{
- //加載失敗
- })
懶加載和預(yù)加載
1.懶加載 當(dāng)文件需要用時(shí)才加載
import 動(dòng)態(tài)導(dǎo)入語(yǔ)法
- document.getElementById('btn').onclick = function(){
- import(/*webpackChunkName: 'xxxName' */'./xx/ss.js')
- .then(res=>{
- //干啥干啥
- })
- }
2.預(yù)加載 webpackPrefetch:true
./xx/ss.js 已經(jīng)被加載了，點(diǎn)擊的時(shí)候再?gòu)木彺嬷屑虞d，
- document.getElementById('btn').onclick = function(){
- import(/*webpackChunkName: 'xxxName',webpackPrefetch:true */'./xx/ss.js')
- .then(res=>{
- //干啥干啥
- })
- }
正常加載可以認(rèn)為是并行加載（同一時(shí)間加載多個(gè)文件） 預(yù)加載prefectch 等其他資源加載完畢，瀏覽器空閑了，再偷偷加載資源 兼容性比較差 慎用
PWA 漸進(jìn)式網(wǎng)絡(luò)開(kāi)發(fā)應(yīng)用程序
網(wǎng)絡(luò)離線可訪問(wèn)
webbox-->webbox-webpack-plugin
- const WebboxWebpackPlugin = require('webbox-webpack-plugin')
- module.exports={
- plugins:[
- new WebboxWebpackPlugin.GenerateSW({
- /*
- 1.幫助 serviceWorker 快速啟動(dòng)
- 2.刪除舊的 serviceWorker
- 生成一個(gè) serviceWorker 配置文件
- */
- clientsClaim:true,
- skipWaiting:true
- })
- ]
- }
- index.js 中注冊(cè)serviceworker
- //處理兼容性
- if('serviceWorker' in navigator){
- window.addEventListener('load',()=>{
- navigator.serviceWorker
- .register('./service-work.js')
- .then(()=>{
- //成功
- })
- .catch(()=>{
- //失敗
- })
- })
- }
- 1.可能會(huì)出現(xiàn)問(wèn)題 eslint不認(rèn)識(shí)window和navigator
- 解決 package.json中eslintConfig中配置
- "env":{
- "browser":true //支持瀏覽器端的變量
- }
- 2. sw代碼必須運(yùn)行在服務(wù)器上
- -->node.js
- --> npm i serve -g
- serve -s build 啟動(dòng)一個(gè)服務(wù)器將build下的資源作為靜態(tài)資源暴露出去
多進(jìn)程打包
thread-loader 一般給babel-loader用
但需要注意
進(jìn)程啟動(dòng)大約需500ms，進(jìn)程間通信也有開(kāi)銷。只有工作消耗時(shí)間比較長(zhǎng)，才需要多進(jìn)程打包
- {
- test:/\.js$/,
- exclude:/node_modules/,
- use:[
- //'thread-loader',
- {
- loader:'thread-loader',
- options:{
- workers: 2 //進(jìn)程2個(gè)
- }
- }
- {
- loader:'babel-loader',
- options:{
- // 預(yù)設(shè) ：指示babel做怎樣的兼容性處理
- presets:[
- [
- '@babel/preset-env',
- {
- //按需加載
- useBuiltIns:'usage',
- //指定core-js版本
- corejs:{
- version:3
- },
- //指定兼容性做到哪個(gè)版本的瀏覽器
- targerts:{
- chrome: '40',
- fixfox: '50',
- ie: '9',
- safari: '10',
- edge: '17'
- }
- }
- ]
- ],
- //第二次構(gòu)建時(shí)，會(huì)讀取之前的緩存
- cacheDirectory: true
- }
- }
- ]
- },
externals
- module.exports={
- externals:{
- //忽略/拒絕 庫(kù)名 -- npm 包名
- //可以在index.html中引入cdn
- }
- }
dll 動(dòng)態(tài)連接
使用dll技術(shù) 對(duì)某些庫(kù)（第三方庫(kù)） 進(jìn)行單獨(dú)打包
- 指令 webpack --config webpack.dll.js
- webpack.dll.js
- const {resolve} = require('path')
- const webpack = require('webpack')
- module.exports = {
- entry:{
- //最終打包生成的[name]-->jquery
- //['jquery']-->要打包的庫(kù)是jquery
- jquery:['jquery']
- },
- ouput:{
- filename:'[name].js',
- path:resolve(__dirname,'dll'),
- library:'[name]_[hash]' //打包的庫(kù)里面向外暴露出去的內(nèi)容叫什么名字
- },
- plugin:[
- new webpacl.DllPlugin({
- //打包生成一個(gè)manifest.json --> 提供和jquery映射
- name: '[name]_[hash]',//映射庫(kù)的暴露內(nèi)容名稱
- path:resolve(__dirname,'dll/manifest.json')
- })
- ],
- mode:'production'
- }
- webpack.config.js
- const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin')
- module.exports={
- plugins:[
- //告訴webpack哪些庫(kù)不參與打包，同時(shí)名稱也得變
- new webpack.DllReferencePlugin({
- manifest: resolve(__dirname,'dll/manifest.json')
- }),
- //將某個(gè)文件打包輸出出去，并在html中引入該資源
- new AddAssetHtmlWebpackPlugin({
- filepath:resolve(__dirname,'dll/jquery.js')
- })
- ]
- }
編輯推薦
