webpack效能優化（1）

2021-10-04 14:00:57 字數 558 閱讀 1424

對於一些庫檔案，在使用webpack打包時我們可以將他們排除，然後再使用cdn的方式引入，比如jquery

const path=require('path');


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


module.exports=,


plugins:[new htmlwebpackplugin()],


externals:,


mode:'production'  


}
這樣jquery就不會被打包進去，然後我們可以去打包好的html檔案中引入jquery即可

這裡順便說下cdn，它的全稱是content delivery network，即內容分發網路，它廣泛採用各種快取伺服器，將這些快取伺服器分布到使用者訪問相對集中的地區或網路中，在使用者訪問**時，利用全域性負載技術將使用者的訪問指向距離最近的工作正常的快取伺服器上，由快取伺服器直接響應使用者請求。使使用者就近獲取所需內容，降低網路擁塞，提高使用者訪問響應速度和命中率。

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...