webpack性能優化不徹底指北

時間 2019-11-06

原文原文鏈接

前語--最近公司新開了一個項目，對webpack的性能上產生了不小需求，在一通學習了webpack以後特地寫一篇來總結一下。

本文涉及的內容node

體積優化

依賴按需加載
剔除沒必要要的依賴

體積的大小直接關係到咱們項目的加載速度，而SPA的首屏加載速度又決定了用戶的留存。對於體積優化，咱們能夠從倆個方面來下手。 But 在那以前咱們要先對本身的項目依賴構成進行分析，肯定了優化的目標才能着手思考優化方案，進而實施優化方案。

對於項目bundle的分析，咱們能夠藉助 webpack-bundle-analyzer webpack

食用方法：git

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

module.exports = {
    plugins: [
       new BundleAnalyzerPlugin()
    ]
}複製代碼

咱們只須要在每次打包的時候使用它，能夠經過判斷NODE_ENV === 'production' 來選擇是否要開啓該插件。同類型的插件還有 webpack-analyse 和 webpack-chart，更炫酷（霧）一些不過額外要配置下。運行下面的命令生成分析工具須要的json文件。github

webpack --profile --json > stats.json

// 若是，運行指定的 weboack 文件，可用此命令
webpack --config build/webpack.prod.conf.js  --profile --json > stats.json
複製代碼

擒賊先擒王

有了依賴分析圖，咱們就知道哪些模塊是致使咱們性能存在瓶頸的罪魁禍首，必不可缺的依賴咱們能夠考慮是否有按需加載的可能，沒有必要或者功能重複的依賴咱們就能夠將它剝離。web

① 按需加載
npm

一是將所使用的庫按需加載，好比一個UI庫小至100K，大至上MB。咱們一般不會使用她全部的組件而是隻使用其中一部分，這時就能夠將所使用的組件提取出來，而不打包沒有使用到的多餘組件。json

在咱們導入組件庫的時候不使用--緩存

這種引入方式會致使將整個組件庫都導入進來，得不償失。bash

正確的食用方法--babel

在引入須要的組件時都只將該組件引入進來，而不使用解構。

but 這樣是否是特別麻煩，每次引入文件都須要去對應的文件下面導入文件。特別是一般組件庫都是咱們經過npm下載下來的，都放在node_modules下面。很是不利於咱們準確的找到須要的組件。so 咱們可使用 babel-plugin-import 來幫咱們自動完成。這樣使用第一種引入方式也不會將全部的組件都導入進來。

二是將代碼分塊（chunk），實現代碼層面上的按需加載--

使用webpack的Code splitting來實現，具體展開來說篇幅過長。直接 webpack的 Code splitting 實現按需加載。But 這是一種過期的方法-- 咱們在webpack導入對應的模塊可使用ES6+的import()。將代碼動態拆分。 webpack動態導入

Tips： Scope Hoisting

這個是webpack自帶的一個插件，只需在配置文件中添加一個新的插件，就可讓 Webpack 打包出來的代碼文件更小、運行的更快。可是通過我測試效果微乎其微，選裝。

webpack Scope Hoisting介紹

食用方法--