有什么方法可以减少 AngularJS 包的大小（使用 Webpack）答案

【问题标题】：Is there any way to reduce AngularJS bundle size (with Webpack)有什么方法可以减少 AngularJS 包的大小（使用 Webpack）
【发布时间】：2019-12-22 04:38:51
【问题描述】：

我正在尝试构建一个 AngularJS 应用程序（v1.7.x）并且生产文件大小非常大。

node_module 中的原始依赖项为 1.30 MB 和 170 kB（分钟）。我导入并尝试了一个基本的console.log。但是构建文件是 3.40 MB

那么，是否有任何依赖项我应该使用或来自您的推荐。我正在构建一个基本的天气应用程序。（使用 fetch 和 ng-repeat）

目前，我只有这些。

"dependencies": {
    "angular": "^1.7.9"
},
"devDependencies": {
    "@babel/core": "^7.7.5",
    "@babel/preset-env": "^7.7.6",
    "babel-loader": "^8.0.6",
    "clean-webpack-plugin": "^3.0.0",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "json-server": "^0.15.1",
    "webpack": "^4.41.2",
    "webpack-bundle-analyzer": "^3.6.0",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0"
}

附：我尝试从 node_module 导入 angular.min.js 但我认为这不是将require() 与绝对路径一起使用的正确方法。

【问题讨论】：

可能不是 angularJS 使你的包膨胀，使用 webpack-analyzer 来检查你的包内发生了什么
大约 3MB 的脚本包大小表明 webpack 没有执行树摇动（它在生产构建中执行）。

标签： angularjs webpack

【解决方案1】：

我发现了我的问题。

我在 package.json 中的脚本是

"scripts": {
    "build": "webpack --config ./webpack.config.js --mode production"
}

但在我的 webpack.config.js

module.exports = {
    mode: 'development'
}

脚本不会覆盖配置文件，即使它被标记为生产。现在我删除并再次尝试。我的包的大小已减小到 3.19 kB。

【讨论】：