本文介紹了React + Webpack 構建打包優(yōu)化,分享給大家,具體如下:
使用 babel-react-optimize 對 React 代碼進行優(yōu)化
檢查沒有使用的庫,去除 import 引用
按需打包所用的類庫,比如 lodash 、 echart 等
lodash 可以采用babel-plugin-lodash 進行優(yōu)化。
需要注意的是
在 babel-react-optimize 中使用了 babel-plugin-transform-react-remove-prop-types 這個插件。正常情況下,如果你在代碼中沒有引用到組件的 PropTypes ,則完全沒問題。如果你的組件用到了,那么使用該插件可能會導致問題。
具體見:
https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types#is-it-safe
Webpack 構建打包優(yōu)化
Webpack 構建打包存在的問題主要集中于下面兩個方面:
Webpack 構建速度慢
可以使用 Webpack.DDLPlugin , HappyPack 來提高構建速度。具體參見小銘在 DMP DDLPlugin 的文檔。原文如下:
Webpack.DLLPlugin
添加一個 webpack.dll.config.js
主要是用到一個 DllPlugin 插件,把一些第三方的資源獨立打包,同時放到一個 manifest.json 配置文件中,
這樣在組件中更新后,就不會重新 build 這些第三方的資源,
在 scripts 中添加: "dll": "webpack --config webpack.dll.config.js --progress --colors ", 。
執(zhí)行 npm run dll 以后,會在 dll 目錄下生產 兩個文件 vendor-manifest.json ,vendor.dll.js
配置 webpack.dev.config.js 文件,加入一個 DllReferencePlugin 插件,并指定 vendor-manifest.json 文件
new webpack.DllReferencePlugin({ context: join(__dirname, 'src'), manifest: require('./dll/vendor-manifest.json') })
另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內外云服務器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應用場景需求。