lodash のファイルサイズを lodash-webpack-plugin と babel-plugin-lodash を使って削減する
概要
react で SPA を作成していたのですが、webpack-bundle-analyzer をみると、lodash の占める割合が大きかったので、少しでも減らせるような試みとして、
lodash-webpack-pluginと babel-plugin-lodashを使って、 ファイルサイズを削減しました。
利用した主なパッケージのバージョン
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-plugin-lodash": "^3.3.4",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"lodash-webpack-plugin": "^0.11.5",
"webpack": "^4.20.2",
"webpack-bundle-analyzer": "^3.0.2",
"webpack-cli": "^3.1.2",
使用方法
まずはパッケージを追加
yarn add --dev lodash-webpack-plugin babel-plugin-lodash
.babelrcにbabel-plugin-lodashを追加
"plugins": ["lodash"]
webpack.config.jsにlodash-webpack-pluginの設定を追加
const webpack = require('webpack');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
.BundleAnalyzerPlugin;
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin'); //追加
module.exports = {
//省略
plugins: [
new BundleAnalyzerPlugin(),
new LodashModuleReplacementPlugin({
collections: true,
chaining: true
}) //追加
]
lodash-webpack-pluginをデフォルト設定で使うと使えない機能がでてくるので、
ここではcollections:Collection method(orderByとか使ってたので)
chainig:メソッドチェーンを使っていたので
その他の設定に関しては、ここを参照
後は、webpack -pなどして動作確認を行ってください。
まとめ
対応を行ったことでファイルサイズは削減できたのですが、細かい値は記録してませんでした。(計測を忘れて作業するのは残念すぎました。)
lodash-webpack-pluginとbabel-plugin-lodashを使えば、簡単にlodashのファイルサイズが削減できるので便利
参考リンク
Author And Source
この問題について(lodash のファイルサイズを lodash-webpack-plugin と babel-plugin-lodash を使って削減する), 我々は、より多くの情報をここで見つけました https://qiita.com/takutakuma/items/92a67052e2ee41d7e34b著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .