webpack 自帶的優化

刪除沒有用的**，只對es模組起作用。

webpack會在生產環境中刪除掉沒使用的**

export const a = () =>

console.log(a()) 
//***，模組內部被呼叫

import  from './b.js'

export const aa = () ->

模組匯入了但沒有使用，我們需要不要被打包

在package.json加下面**

那麼問題來了

import './style.css'

csss檔案也被乾掉了

我們不希望刪掉呀

通過這樣

require('./style.css')

繞道而行

第二種方式就是通過配置設定一下

官方介紹

**簡化處理

let a = 1;

let b = 2;
let c = a+b;
console.log(c)

打包之後成這樣

console.log(3)

變數壓縮

通常稱為作用域提公升

webpack 效能優化

1.2 js 與 css 並行載入 1.3 開啟多執行緒 1.4 使用 dns 載入靜態資料 2.空間維度 webpack 效能優化無非是從時間和空間兩個維度去分析。時間指的是打包時間盡可能快 空間指的是打包體積盡可能小。本文的 webpack 效能優化是基於 webpack 4.3.0 版本。本文...

webpack打包優化

tree shaking 使用import匯入的包，在生產環境下自動去除包內沒有引用的 這是webpack打包自帶的優化 import是es6引入規範 所以記得要裝babel require是common.js引入規範 scope hosting 在bundle.js檔案 module a.js e...

webpack 效能優化

構建速度 1 優化babel loader 開啟babel loader?cachedirectory，指定範圍 2 ignoreplugin 比如一些外掛程式，預設含有多語言檔案，比如moment.js new webpackignoreplugin locale,moment 去掉所有語言包 然...