項目中用到了 moment.js, 但是 編譯后使用 webpack-bundle-analyzer 發(fā)現(xiàn) moment.js 的體積比較大普气， 大部分是 locale 文件, 實際上我只需要 zh-cn 這個語言包。
占比截圖:
before.png
moment.js 并不是一個現(xiàn)代化的模塊化的庫柑船， 無法對其進(jìn)行搖樹優(yōu)化帽撑。
解決辦法：
- 選用其他替代方案。 將 moment.js 替換為 data-fns
- 使用 webpack ContextReplacementPlugin + @angular-builders/custom-webpack
這里介紹第二種方案鞍时， 對代碼改動最小亏拉。
extra-webpack.config.js
'use strict';
const webpack = require('webpack');
// https://webpack.js.org/plugins/context-replacement-plugin/
module.exports = {
plugins: [new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn/)]
};
angular.json
"projects": {
"moment-locale-ignore": {
...
"architect": {
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "./extra-webpack.config.js",
"replaceDuplicatePlugins": true,
"mergeStrategies": {
"externals": "prepend"
}
}
...
}
}
}
}
}
}
這樣 打包后的 moment.js 體積就縮小很多了
after.png
最后附上 Github 庫
