webpack 效能優化，（系列二十）

module chunk bundle的區別

module 各個原始碼檔案，webpack一切皆模組
chunk 多模組合併成的， 如entry import()非同步載入 splitchunk**分割
bundle 最終的輸出檔案，有可能好多個打包檔案

盡可能少的應用loader, excllude(不包含)

竟可能少的使用plugin

js單執行緒，開啟多程序打包，提高構建打包速度

4.paralleluglifyplugin 多程序壓縮js

webpack內建uglify工具壓縮js

js單執行緒，開啟多程序壓縮更快

關於開啟多程序

1.專案較大，打包較慢，開啟多程序能提高速度
2.專案較少，打包很快，開啟多程序會降低速度（程序開銷）

自動重新整理，整個網頁全部重新整理，速度變慢，頁面狀態丟失

熱更新，新**生效，網頁不重新整理，頁面狀態不丟失

6.dllplugin動態連線庫外掛程式

webpack已內建dllplugin，加快打包速度

前端框架vue react,體積大，構建慢

較穩定，不常公升級版本

第三方模組構建一次即可(打包dll)，不用每次打包構建

webapck優化構建速度（可用於生產環境）webapck優化構建速度（不可用於生產環境）

1.自動重新整理

2.熱更新

3.dllplugin,打包構建

webapck效能產出優化

體積更小

合理分包，不重複載入

速度更快，記憶體使用更小

1.小base64格式，不做網路請求

2.bundle,加雜湊，每修改的模組命中快取

3.非同步模組懶載入，自動生成乙個打包檔案，小的模組先載入，大的模組非同步載入

4.提取公共**，splitchunk

5.cdn加速

6.使用production模式

自動開啟**壓縮（常見的壓縮）

自動開啟tree-shaking(樹搖)

7.scope hosting

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