JavaScript webpack模塊打包器如何優(yōu)化前端性能
一、webpack的使用背景
- 隨著前端的項目逐漸擴大,必然會導致性能問題。尤其大大型復雜的項目中,前端業(yè)務可能因為一個小小的數(shù)據(jù)依賴,導致整個頁面的卡頓甚至崩潰。
- 一般項目在完成后,會通過webpack進行打包,利用webpack對前端項目性能優(yōu)化是一個十分重要的環(huán)節(jié)。
二、webpack如何優(yōu)化
通過webpack優(yōu)化前端的手段有:JS代碼壓縮、CSS代碼壓縮、Html文件代碼壓縮、文件大小壓縮、圖片壓縮、Tree Shaking、代碼分離、內聯(lián)chunk。
1. JS代碼壓縮
terser是一個JavaScript的解釋、絞肉機、壓縮機的工具集,可以幫助我們壓縮、丑化我們的代碼,讓bundle更小。在production模式下,webpack 默認就是使用 TerserPlugin 來處理我們的代碼的。如果想要自定義配置它,配置方法如下:
const TerserPlugin = require('terser-webpack-plugin') module.exports = { ... optimization: { minimize: true, minimizer: [ new TerserPlugin({ parallel: true // 電腦cpu核數(shù)-1 }) ] } }
2.CSS代碼壓縮
CSS壓縮通常是去除無用的空格等,因為很難去修改選擇器、屬性的名稱、值等。CSS的壓縮我們可以使用另外一個插件:css-minimizer-webpack-plugin。
// npm install css-minimizer-webpack-plugin -D const CssMinimizerPlugin = require('css-minimizer-webpack-plugin') module.exports = { // ... optimization: { minimize: true, minimizer: [ new CssMinimizerPlugin({ parallel: true }) ] } }
3. HTML文件壓縮
使用HtmlWebpackPlugin插件來生成HTML的模板時候,通過配置屬性minify進行html優(yōu)化。
module.exports = { ... plugin:[ new HtmlwebpackPlugin({ ... minify:{ minifyCSS:false, // 是否壓縮css collapseWhitespace:false, // 是否折疊空格 removeComments:true // 是否移除注釋 } }) ] }
4. 文件大小壓縮
對文件的大小進行壓縮,減少http傳輸過程中寬帶的損耗。
// npm install compression-webpack-plugin -D new ComepressionPlugin({ test:/\.(css|js)$/, // 哪些文件需要壓縮 threshold:500, // 設置文件多大開始壓縮 minRatio:0.7, // 至少壓縮的比例 algorithm:"gzip", // 采用的壓縮算法 })
5. 圖片壓縮
一般來說在打包之后,一些圖片文件的大小是遠遠要比 js 或者 css 文件要來的大,所以圖片壓縮較為重要。
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 為關閉 optipng: { enabled: false, }, // 使用 imagemin-pngquant 壓縮 png pngquant: { quality: '65-90', speed: 4 }, // 壓縮 gif 的配置 gifsicle: { interlaced: false, }, // 開啟 webp,會把 jpg 和 png 圖片壓縮為 webp 格式 webp: { quality: 75 } } } ] }, ] }
6. Tree Shaking
Tree Shaking是一個術語,在計算機中表示消除死代碼,依賴于ES Module的靜態(tài)語法分析(不執(zhí)行任何的代碼,可以明確知道模塊的依賴關系)。在webpack實現(xiàn)Tree Shaking有兩種不同的方案:useExports(通過標記某些函數(shù)是否被使用,之后通過Terser來進行優(yōu)化);sideEffects(跳過整個模塊/文件),直接查看該文件是否有副作用。
usedExports只需要將usedExports設為true;使用之后,沒被用上的代碼在webpack打包中會加入unused harmony export mul注釋,用來告知 Terser 在優(yōu)化時,可以刪除掉這段代碼
module.exports = { ... optimization:{ usedExports:true; } }
sideEffects配置方法在package.json中設置sideEffects屬性,如果sideEffects設置為false,就是告知webpack可以安全的刪除未用到的exports。如果有些文件需要保留,可以設置為數(shù)組的形式。
"sideEffecis":[ "./src/util/format.js", "*.css" // 所有的css文件 ]
7. 代碼分離
將代碼分離到不同的bundle中,之后可以按需加載,或者并行加載這些文件。默認情況下,所有的JS代碼在首頁全部加載,會影響到首頁的加載速度。代碼可以分出更小的bundle,以及控制資源加載的優(yōu)先級,提供代碼的加載性能。通過插件splitChunksPlugin來實現(xiàn)。
module.exports = { ... optimization:{ splitChunks:{ chunks:"all" } } }
8. 內聯(lián)chunk
可以通過InlineChunkHtmlPlugin插件將一些chunk的模塊內嵌到html
const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { ... plugin:[ new InlineChunkHtmlPlugin(HtmlWebpackPlugin,[/runtime.+\.js/] }
9. 利用CDN加速以及提取公共第三方庫
三、總結
- 壓縮代碼:刪除多余的代碼、注釋、簡化代碼的寫法等等?式??梢岳?webpack的 UglifyJsPlugin 和 ParallelUglifyPlugin 來壓縮JS?件, 利? cssnano (css-loader?minimize)來壓縮css
- 利?CDN加速: 在構建過程中,將引?的靜態(tài)資源路徑修改為CDN上對應的路徑??梢岳?webpack對于 output 參數(shù)和各loader的 publicPath 參數(shù)來修改資源路徑
- Tree Shaking: 將代碼中永遠不會?到的?段刪除掉??梢酝ㄟ^在啟動webpack時追加參數(shù) --optimize-minimize 來實現(xiàn)
- Code Splitting: 將代碼按路由維度或者組件分塊(chunk),這樣做到按需加載,同時可以充分利?瀏覽器緩存
- 提取公共第三?庫: SplitChunksPlugin插件來進?公共模塊抽取,利?瀏覽器緩存可以?期緩存這些?需頻繁變動的公共代碼
到此這篇關于JavaScript webpack模塊打包器如何優(yōu)化前端性能的文章就介紹到這了,更多相關JavaScript webpack內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
JavaScript實現(xiàn)html轉pdf的三種方法詳解
近期項目需要實現(xiàn)將?html?頁面轉換成?pdf?報告的需求,經(jīng)過一番調研以及結合過往經(jīng)驗,發(fā)現(xiàn)了三種技術方案,下面我們就來看看它們的具體實現(xiàn)步驟吧2024-02-02JavaScript 異步調用框架 (Part 5 - 鏈式實現(xiàn))
在上一篇文章里面,我們?yōu)楫惒秸{用框架設計了一種鏈式調用方式,來增強異步調用隊列的代碼可讀性,現(xiàn)在我們就來編寫實現(xiàn)這部分功能的代碼。2009-08-08JavaScript offset實現(xiàn)鼠標坐標獲取和窗口內模塊拖動
在頁面開發(fā)時我們少不了各種鼠標交互動作,那么JavaScript中如何實現(xiàn)鼠標坐標獲取和窗口內模塊拖動,本文就詳細的介紹一下,感興趣的可以了解一下2021-05-05js構造函數(shù)創(chuàng)建對象是否加new問題
本篇文章主要給大家詳細分析了js構造函數(shù)創(chuàng)建對象加new與不加new的問題,有這方面興趣的參考學習下。2018-01-01JavaScript前端開發(fā)時數(shù)值運算的小技巧
這篇文章主要介紹了JavaScript前端開發(fā)時數(shù)值運算的小技巧,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-07-07