通過webpack優(yōu)化前端的手段有：

① JS代碼壓縮? ? ? ? ② CSS代碼壓縮????????③ HTML文件代碼壓縮

④ 文件大小壓縮? ? ?⑤ 圖片壓縮? ? ? ? ? ? ? ?⑥ Tree Shaking

⑦ 代碼分離? ? ? ? ????⑧ 內(nèi)聯(lián) chunk

1、JS代碼壓縮

terser是一個(gè)JavaScript的解釋、絞肉機(jī)、壓縮機(jī)的工具集，可以幫助我們壓縮、丑化我們的代碼，讓bundle更小。

在production模式下，webpack?默認(rèn)就是使用?TerserPlugin?來處理我們的代碼的。如果想要自定義配置它，配置方法如下：

const TerserPlugin = require('terser-webpack-plugin')
module.exports = {...optimization: {minimize: true,minimizer: [new TerserPlugin({parallel: true // 電腦cpu核數(shù)-1})]}
}

屬性介紹如下：

• extractComments：默認(rèn)值為true，表示會(huì)將注釋抽取到一個(gè)單獨(dú)的文件中。開發(fā)階段可設(shè)置為 false，不保留注釋
• parallel：使用多進(jìn)程并發(fā)運(yùn)行提高構(gòu)建的速度，默認(rèn)值是true。并發(fā)運(yùn)行的默認(rèn)數(shù)量： os.cpus().length - 1
• terserOptions：設(shè)置我們的terser相關(guān)的配置：
• compress：設(shè)置壓縮相關(guān)的選項(xiàng)，mangle：設(shè)置丑化相關(guān)的選項(xiàng)，可以直接設(shè)置為true
• mangle：設(shè)置丑化相關(guān)的選項(xiàng)，可以直接設(shè)置為true
• toplevel：底層變量是否進(jìn)行轉(zhuǎn)換
• keep_classnames：保留類的名稱
• keep_fnames：保留函數(shù)的名稱

2、CSS代碼壓縮

CSS壓縮通常是去除無用的空格等，因?yàn)楹茈y去修改選擇器、屬性的名稱、值等。

CSS的壓縮我們可以使用另外一個(gè)插件：CssMinimizerPlugin

配置方法如下：

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
module.exports = {// ...optimization: {minimize: true,minimizer: [new CssMinimizerPlugin({parallel: true})]}
}

?

3、HTML文件代碼壓縮

使用?HtmlWebpackPlugin插件來生成HTML的模板時(shí)候，通過配置屬性minify進(jìn)行html優(yōu)化。

module.exports = {...plugin:[new HtmlwebpackPlugin({...minify:{minifyCSS:false, // 是否壓縮csscollapseWhitespace:false, // 是否折疊空格removeComments:true // 是否移除注釋}})]
}

?設(shè)置了minify，實(shí)際會(huì)使用另一個(gè)插件html-minifier-terser

4、文件大小壓縮

對文件的大小進(jìn)行壓縮，減少http傳輸過程中寬帶的損耗。一般使用 CompressionPlugin 插件。

npm install compression-webpack-plugin -D

new CompressionPlugin({test:/\.(css|js)$/,  // 哪些文件需要壓縮threshold:500, // 設(shè)置文件多大開始壓縮minRatio:0.7, // 至少壓縮的比例algorithm:"gzip", // 采用的壓縮算法
})

5、圖片壓縮

一般來說在打包之后，一些圖片文件的大小是遠(yuǎn)遠(yuǎn)要比?js?或者?css?文件要來的大，所以圖片壓縮較為重要。一般使用loader進(jìn)行壓縮：file-loader 和 image-webpack-loader

配置方法如下：

module: {rules: [{test: /\.(png|jpg|gif)$/,use: [{loader: 'file-loader',options: {name: '[name]_[hash].[ext]',outputPath: 'images/',}},{loader: 'image-webpack-loader',options: {// 壓縮 jpeg 的配置mozjpeg: {progressive: true,quality: 65},// 使用 imagemin**-optipng 壓縮 png，enable: false 為關(guān)閉optipng: {enabled: false,},// 使用 imagemin-pngquant 壓縮 pngpngquant: {quality: '65-90',speed: 4},// 壓縮 gif 的配置gifsicle: {interlaced: false,},// 開啟 webp，會(huì)把 jpg 和 png 圖片壓縮為 webp 格式webp: {quality: 75}}}]},]
} 

?6、Tree Shaking

Tree Shaking?是一個(gè)術(shù)語，在計(jì)算機(jī)中表示消除死代碼，依賴于ES Module的靜態(tài)語法分析（不執(zhí)行任何的代碼，可以明確知道模塊的依賴關(guān)系）

在webpack實(shí)現(xiàn)Tree shaking有兩種不同的方案：

① usedExports：通過標(biāo)記某些函數(shù)是否被使用，之后通過Terser來進(jìn)行優(yōu)化的

配置方法也很簡單，只需要將usedExports設(shè)為true

module.exports = {...optimization:{usedExports: true}
}

使用之后，沒被用上的代碼在webpack打包中會(huì)加入unused harmony export mul注釋，用來告知?Terser?在優(yōu)化時(shí)，可以刪除掉這段代碼

如下面sum函數(shù)沒被用到，webpack打包會(huì)添加注釋，terser在優(yōu)化時(shí)，則將該函數(shù)去掉

② sideEffects：跳過整個(gè)模塊/文件，直接查看該文件是否有副作用

sideEffects用于告知webpack compiler哪些模塊時(shí)有副作用。

配置方法是在package.json中設(shè)置sideEffects屬性

如果sideEffects設(shè)置為false，就是告知webpack可以安全的刪除未用到的exports

如果有些文件需要保留，可以設(shè)置為數(shù)組的形式

"sideEffects":["./src/util/format.js","*.css" // 所有的css文件
]

上述都是關(guān)于javascript的tree shaking，css同樣也能夠?qū)崿F(xiàn)tree shaking

③?css tree shaking

css進(jìn)行tree shaking優(yōu)化可以安裝?PurgeCss插件

npm install purgecss-plugin-webpack -D

const PurgeCssPlugin = require('purgecss-webpack-plugin')
module.exports = {...plugins:[new PurgeCssPlugin({path:glob.sync(`${path.resolve('./src')}/**/*`), {nodir:true} // src里面的所有文件safelist:function(){return {standard:["html"]}}})]
}

• paths：表示要檢測哪些目錄下的內(nèi)容需要被分析，配合使用glob
• 默認(rèn)情況下，Purgecss會(huì)將我們的html標(biāo)簽的樣式移除掉，如果我們希望保留，可以添加一個(gè)safelist的屬性

?7、代碼分離

將代碼分離到不同的bundle中，之后我們可以按需加載，或者并行加載這些文件。

默認(rèn)情況下，所有的JavaScript代碼（業(yè)務(wù)代碼、第三方依賴、暫時(shí)沒有用到的模塊）在首頁全部都加載，就會(huì)影響首頁的加載速度。

代碼分離可以分離出更小的bundle，以及控制資源加載優(yōu)先級，提供代碼的加載性能。

這里通過splitChunksPlugin來實(shí)現(xiàn)，該插件webpack已經(jīng)默認(rèn)安裝和集成，只需要配置即可。

默認(rèn)配置中，chunks僅僅針對于異步（async）請求，我們可以設(shè)置為initial或者all

module.exports = {...optimization:{splitChunks:{chunks:"all"}}
}

?splitChunks主要屬性有如下：

• Chunks：對同步代碼還是異步代碼進(jìn)行處理（默認(rèn)針對異步代碼）
• minSize： 拆分包的大小, 至少為minSize。如果包的大小不超過minSize，這個(gè)包不會(huì)拆分
• maxSize： 將大于maxSize的包，拆分為不小于minSize的包
• minChunks：被引入的次數(shù)，默認(rèn)是1

?8、內(nèi)聯(lián)chunk

可以通過InlineChunkHtmlPlugin插件將一些chunk的模塊內(nèi)聯(lián)到html，如runtime的代碼（對模塊進(jìn)行解析、加載、模塊信息相關(guān)的代碼），代碼量并不大，但是必須加載的

const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {...plugin:[new InlineChunkHtmlPlugin(HtmlWebpackPlugin,[/runtime.+\.js/]
}