構建速度
1、優化babel-loader
開啟babel-loader?cachedirectory，指定範圍
2、ignoreplugin
比如一些外掛程式，預設含有多語言檔案，比如moment.js
new webpackignoreplugin(/\.\/locale,/moment/) 去掉所有語言包
然後手動引入中文語言 包
直接不引入，**沒有
3、noparse
在module.exports={
module:{
noparse:[/react\.min\.js$/]
js是單執行緒，開啟多程序打包
5、paralleluglifyplugin（多程序壓縮js）
webpack 內建uglify工具壓縮js，但是是單執行緒，開啟多程序更快
專案較大，打包較慢，開啟多程序能提高速度
專案較小，打包很快，開啟多程序會降低速度（程序開銷）
6、自動重新整理
devserver
7、熱更新
hotmodulereplacement
8、dllplugin(動態鏈結庫外掛程式)
可用生產環境
1、優化babel-loader
2、ignoreplugin
5、paralleluglifyplugin
6、小base64(小於5k)
7、bundle 加 hash
8、懶載入（元件或者非同步載入）
9、提取公共**
10、使用cdn加速
webpack 效能優化
1.2 js 與 css 並行載入 1.3 開啟多執行緒 1.4 使用 dns 載入靜態資料 2.空間維度 webpack 效能優化無非是從時間和空間兩個維度去分析。時間指的是打包時間盡可能快 空間指的是打包體積盡可能小。本文的 webpack 效能優化是基於 webpack 4.3.0 版本。本文...
Webpack效能優化
babel loader 轉換es6 es7等 js新特性語法。css loader 支援.css檔案的載入和解析 轉換成commonjs物件 style loader 將樣式通過 標籤插入到head中 less loader 將less檔案轉換成 cssts loader 將ts轉換成 jsfil...
Webpack效能優化
在使用webpack打包的時候，當我們的專案工程越來越大的時候就會出現打包的時間越來越長，這個時候需要對打包資源進行一系列的優化。對於 loader 來說，影響打包效率首當其衝必屬 babel 了。因為 babel 會將 轉為字串生成 ast，然後對 ast 繼續進行轉變最後再生成新的 專案越大，轉...