webpack打包優化

tree shaking

使用import匯入的包，在生產環境下自動去除包內沒有引用的**。這是webpack打包自帶的優化

import是es6引入規範（所以記得要裝babel）

require是common.js引入規範

**在bundle.js檔案

// module-a.js

export default 'module a'
// entry.js
import a from './module-a'
console.log(a)

// bundle.js

// 最前面的一段**實現了模組的載入、執行和快取的邏輯，這裡直接略過
[  /* 0 */
function (module, exports, require) ,
/* 1 */
function (module, exports, require) 
]

外掛程式使用方法

new webpack.optimize.moduleconcatenationplugin(),

// bundle.js

[  function (module, exports, require) 
]

檔案體積比之前更小。

執行**時建立的函式作用域也比之前少了，開銷也隨之變小。

這個外掛程式不支援common.js語法，因為他支援模組動態載入，這種情況很難分析出模組之間的依賴關係及輸出的變數。

實現多執行緒打包程序見此

懶載入

let btn = document.getelementbyid('btn')

btn.addeventlistener('click', () => ).catch(err=>)
})// home.js:37   click
// common.js:3  aa
// home.js:39   12

let common = require('./common.js')

common.com()
module.exports =

webpack 打包速度優化

const path require path const webpack require webpakc module.exports output plugins new webpack.dllplugin 混淆壓縮 new webpack.optimize.uglifyjsplugin 第三步...

webpack打包體積優化

這個外掛程式可以直觀展示打包之後，每個包的大小，分析出是否重複打包了某個模組。專案中我們通過cdn引入了某個庫，但是又不想這個庫被打包到webpack最終模組中，我們可以使用externals externals webpack4中production模式下會自動開啟tree shaking模式，但...

webpack打包快取 webpack打包效能分析

webpack提供的uglifyjs外掛程式由於採用單執行緒壓縮，速度很慢 webpack parallel uglify plugin外掛程式可以並行執行uglifyjs外掛程式，這可以有效減少構建時間，當然，該外掛程式應用於生產環境而非開發環境，配置如下 var paralleluglifypl...