JavaScript webpack模塊打包器如何優(yōu)化前端性能
一、webpack的使用背景
- 隨著前端的項目逐漸擴大,必然會導致性能問題。尤其大大型復雜的項目中,前端業(yè)務可能因為一個小小的數據依賴,導致整個頁面的卡頓甚至崩潰。
- 一般項目在完成后,會通過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核數-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實現Tree Shaking有兩種不同的方案:useExports(通過標記某些函數是否被使用,之后通過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。如果有些文件需要保留,可以設置為數組的形式。
"sideEffecis":[ "./src/util/format.js", "*.css" // 所有的css文件 ]
7. 代碼分離
將代碼分離到不同的bundle中,之后可以按需加載,或者并行加載這些文件。默認情況下,所有的JS代碼在首頁全部加載,會影響到首頁的加載速度。代碼可以分出更小的bundle,以及控制資源加載的優(yōu)先級,提供代碼的加載性能。通過插件splitChunksPlugin來實現。
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 參數和各loader的 publicPath 參數來修改資源路徑
- Tree Shaking: 將代碼中永遠不會?到的?段刪除掉。可以通過在啟動webpack時追加參數 --optimize-minimize 來實現
- Code Splitting: 將代碼按路由維度或者組件分塊(chunk),這樣做到按需加載,同時可以充分利?瀏覽器緩存
- 提取公共第三?庫: SplitChunksPlugin插件來進?公共模塊抽取,利?瀏覽器緩存可以?期緩存這些?需頻繁變動的公共代碼
到此這篇關于JavaScript webpack模塊打包器如何優(yōu)化前端性能的文章就介紹到這了,更多相關JavaScript webpack內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
JavaScript 異步調用框架 (Part 5 - 鏈式實現)
在上一篇文章里面,我們?yōu)楫惒秸{用框架設計了一種鏈式調用方式,來增強異步調用隊列的代碼可讀性,現在我們就來編寫實現這部分功能的代碼。2009-08-08JavaScript offset實現鼠標坐標獲取和窗口內模塊拖動
在頁面開發(fā)時我們少不了各種鼠標交互動作,那么JavaScript中如何實現鼠標坐標獲取和窗口內模塊拖動,本文就詳細的介紹一下,感興趣的可以了解一下2021-05-05