我有一个有角度的应用程序，它有一个devDependency - ＆gt; "@angular/cli": "^1.0.3"，为了减小vendor.bundle.js（~4.5MB）的大小，我正在配置webpack.config.js文件。我使用ng eject弹出了webpack.config.js，我对缩小，uglification，压缩（gzip），Dedupe等进行了多次更改。但我没有看到任何这些配置变化受到影响，并且vendor.bundle.js的大小无论如何都没有减少。
下面是webpack.config.js的副本（从@ angular / cli中提取的内容非常庞大，为此道歉），有人能指出我在其中缺少的原因以及如何成功减小其大小应用程序？
const path = require('path');
const ProgressPlugin = require('webpack/lib/ProgressPlugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const autoprefixer = require('autoprefixer');
const postcssUrl = require('postcss-url');
const cssnano = require('cssnano');
const { NoEmitOnErrorsPlugin } = require('webpack');
const { GlobCopyWebpackPlugin, BaseHrefWebpackPlugin } = require('@angular/cli/plugins/webpack');
const { CommonsChunkPlugin } = require('webpack').optimize;
const { AotPlugin } = require('@ngtools/webpack');
const CompressionPlugin = require("compression-webpack-plugin");
const webpack = require('webpack');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const nodeModules = path.join(process.cwd(), 'node_modules');
const entryPoints = ["inline","polyfills","sw-register","scripts","styles","vendor","main"];
const minimizeCss = false;
const baseHref = "";
const deployUrl = "";
const postcssPlugins = function () {
// safe settings based on: https://github.com/ben-eb/cssnano/issues/358#issuecomment-283696193
const importantCommentRe = /@preserve|@license|[@#]\s*source(?:Mapping)?URL|^!/i;
const minimizeOptions = {
autoprefixer: false,
safe: true,
mergeLonghand: false,
discardComments: { remove: (comment) => !importantCommentRe.test(comment) }
};
return [
postcssUrl({
url: (URL) => {
// Only convert root relative URLs, which CSS-Loader won't process into require().
if (!URL.startsWith('/') || URL.startsWith('//')) {
return URL;
}
if (deployUrl.match(/:\/\//)) {
// If deployUrl contains a scheme, ignore baseHref use deployUrl as is.
return ${deployUrl.replace(/\/$/, '')}${URL};
}
else if (baseHref.match(/:\/\//)) {
// If baseHref contains a scheme, include it as is.
return baseHref.replace(/\/$/, '') +
/${deployUrl}/${URL}.replace(/\/\/+/g, '/');
}
else {
// Join together base-href, deploy-url and the original URL.
// Also dedupe multiple slashes into single ones.
return /${baseHref}/${deployUrl}/${URL}.replace(/\/\/+/g, '/');
}
}
}),
autoprefixer(),
].concat(minimizeCss ? [cssnano(minimizeOptions)] : []);
};
module.exports = {
"devtool": "source-map",
"resolve": {
"extensions": [
".ts",
".js"
],
"modules": [
"./node_modules"
]
},
"resolveLoader": {
"modules": [
"./node_modules"
]
},
"entry": {
"main": [
"./src\\main.ts"
],
"scripts": [
"script-loader!./node_modules\\jquery\\dist\\jquery.js",
"script-loader!./node_modules\\tether\\dist\\js\\tether.js",
"script-loader!./node_modules\\bootstrap\\dist\\js\\bootstrap.js"
],
"styles": [
"./node_modules\\bootstrap\\dist\\css\\bootstrap.css",
"./node_modules\\primeng\\resources\\themes\\omega\\theme.css",
"./node_modules\\primeng\\resources\\primeng.min.css",
"./node_modules\\font-awesome\\css\\font-awesome.css",
"./src\\styles.css"
]
},
"output": {
"path": path.join(process.cwd(), "dist"),
"filename": "[name].bundle.js",
"chunkFilename": "[id].chunk.js"
},
"module": {
"rules": [
{
"enforce": "pre",
"test": /\.js$/,
"loader": "source-map-loader",
"exclude": [
/\/node_modules\//
]
},
{
"test": /\.json$/,
"loader": "json-loader"
},
{
"test": /\.html$/,
"loader": "raw-loader"
},
{
"test": /\.(eot|svg)$/,
"loader": "file-loader?name=[name].[hash:20].[ext]"
},
{
"test": /\.(jpg|png|gif|otf|ttf|woff|woff2|cur|ani)$/,
"loader": "url-loader?name=[name].[hash:20].[ext]&limit=10000"
},
{
"exclude": [
path.join(process.cwd(), "node_modules\\bootstrap\\dist\\css\\bootstrap.css"),
path.join(process.cwd(), "node_modules\\primeng\\resources\\themes\\omega\\theme.css"),
path.join(process.cwd(), "node_modules\\primeng\\resources\\primeng.min.css"),
path.join(process.cwd(), "node_modules\\font-awesome\\css\\font-awesome.css"),
path.join(process.cwd(), "src\\styles.css")
],
"test": /\.css$/,
"use": [
"exports-loader?module.exports.toString()",
{
"loader": "css-loader",
"options": {
"sourceMap": false,
"importLoaders": 1
}
},
{
"loader": "postcss-loader",
"options": {
"ident": "postcss",
"plugins": postcssPlugins
}
}
]
},
{
"exclude": [
path.join(process.cwd(), "node_modules\\bootstrap\\dist\\css\\bootstrap.css"),
path.join(process.cwd(), "node_modules\\primeng\\resources\\themes\\omega\\theme.css"),
path.join(process.cwd(), "node_modules\\primeng\\resources\\primeng.min.css"),
path.join(process.cwd(), "node_modules\\font-awesome\\css\\font-awesome.css"),
path.join(process.cwd(), "src\\styles.css")
],
"test": /\.scss$|\.sass$/,
"use": [
"exports-loader?module.exports.toString()",
{
"loader": "css-loader",
"options": {
"sourceMap": false,
"importLoaders": 1
}
},
{
"loader": "postcss-loader",
"options": {
"ident": "postcss",
"plugins": postcssPlugins
}
},
{
"loader": "sass-loader",
"options": {
"sourceMap": false,
"precision": 8,
"includePaths": []
}
}
]
},
{
"exclude": [
path.join(process.cwd(), "node_modules\\bootstrap\\dist\\css\\bootstrap.css"),
path.join(process.cwd(), "node_modules\\primeng\\resources\\themes\\omega\\theme.css"),
path.join(process.cwd(), "node_modules\\primeng\\resources\\primeng.min.css"),
path.join(process.cwd(), "node_modules\\font-awesome\\css\\font-awesome.css"),
path.join(process.cwd(), "src\\styles.css")
],
"test": /\.less$/,
"use": [
"exports-loader?module.exports.toString()",
{
"loader": "css-loader",
"options": {
"sourceMap": false,
"importLoaders": 1
}
},
{
"loader": "postcss-loader",
"options": {
"ident": "postcss",
"plugins": postcssPlugins
}
},
{
"loader": "less-loader",
"options": {
"sourceMap": false
}
}
]
},
{
"exclude": [
path.join(process.cwd(), "node_modules\\bootstrap\\dist\\css\\bootstrap.css"),
path.join(process.cwd(), "node_modules\\primeng\\resources\\themes\\omega\\theme.css"),
path.join(process.cwd(), "node_modules\\primeng\\resources\\primeng.min.css"),
path.join(process.cwd(), "node_modules\\font-awesome\\css\\font-awesome.css"),
path.join(process.cwd(), "src\\styles.css")
],
"test": /\.styl$/,
"use": [
"exports-loader?module.exports.toString()",
{
"loader": "css-loader",
"options": {
"sourceMap": false,
"importLoaders": 1
}
},
{
"loader": "postcss-loader",
"options": {
"ident": "postcss",
"plugins": postcssPlugins
}
},
{
"loader": "stylus-loader",
"options": {
"sourceMap": false,
"paths": []
}
}
]
},
{
"include": [
path.join(process.cwd(), "node_modules\\bootstrap\\dist\\css\\bootstrap.css"),
path.join(process.cwd(), "node_modules\\primeng\\resources\\themes\\omega\\theme.css"),
path.join(process.cwd(), "node_modules\\primeng\\resources\\primeng.min.css"),
path.join(process.cwd(), "node_modules\\font-awesome\\css\\font-awesome.css"),
path.join(process.cwd(), "src\\styles.css")
],
"test": /\.css$/,
"use": [
"style-loader",
{
"loader": "css-loader",
"options": {
"sourceMap": false,
"importLoaders": 1
}
},
{
"loader": "postcss-loader",
"options": {
"ident": "postcss",
"plugins": postcssPlugins
}
}
]
},
{
"include": [
path.join(process.cwd(), "node_modules\\bootstrap\\dist\\css\\bootstrap.css"),
path.join(process.cwd(), "node_modules\\primeng\\resources\\themes\\omega\\theme.css"),
path.join(process.cwd(), "node_modules\\primeng\\resources\\primeng.min.css"),
path.join(process.cwd(), "node_modules\\font-awesome\\css\\font-awesome.css"),
path.join(process.cwd(), "src\\styles.css")
],
"test": /\.scss$|\.sass$/,
"use": [
"style-loader",
{
"loader": "css-loader",
"options": {
"sourceMap": false,
"importLoaders": 1
}
},
{
"loader": "postcss-loader",
"options": {
"ident": "postcss",
"plugins": postcssPlugins
}
},
{
"loader": "sass-loader",
"options": {
"sourceMap": false,
"precision": 8,
"includePaths": []
}
}
]
},
{
"include": [
path.join(process.cwd(), "node_modules\\bootstrap\\dist\\css\\bootstrap.css"),
path.join(process.cwd(), "node_modules\\primeng\\resources\\themes\\omega\\theme.css"),
path.join(process.cwd(), "node_modules\\primeng\\resources\\primeng.min.css"),
path.join(process.cwd(), "node_modules\\font-awesome\\css\\font-awesome.css"),
path.join(process.cwd(), "src\\styles.css")
],
"test": /\.less$/,
"use": [
"style-loader",
{
"loader": "css-loader",
"options": {
"sourceMap": false,
"importLoaders": 1
}
},
{
"loader": "postcss-loader",
"options": {
"ident": "postcss",
"plugins": postcssPlugins
}
},
{
"loader": "less-loader",
"options": {
"sourceMap": false
}
}
]
},
{
"include": [
path.join(process.cwd(), "node_modules\\bootstrap\\dist\\css\\bootstrap.css"),
path.join(process.cwd(), "node_modules\\primeng\\resources\\themes\\omega\\theme.css"),
path.join(process.cwd(), "node_modules\\primeng\\resources\\primeng.min.css"),
path.join(process.cwd(), "node_modules\\font-awesome\\css\\font-awesome.css"),
path.join(process.cwd(), "src\\styles.css")
],
"test": /\.styl$/,
"use": [
"style-loader",
{
"loader": "css-loader",
"options": {
"sourceMap": false,
"importLoaders": 1
}
},
{
"loader": "postcss-loader",
"options": {
"ident": "postcss",
"plugins": postcssPlugins
}
},
{
"loader": "stylus-loader",
"options": {
"sourceMap": false,
"paths": []
}
}
]
},
{
"test": /\.ts$/,
"loader": "@ngtools/webpack" // AOT compilation
}
]
},
"plugins": [
new webpack.optimize.DedupePlugin(), //dedupe similar code
new webpack.optimize.UglifyJsPlugin(), //minify everything
new webpack.optimize.AggressiveMergingPlugin(),//Merge chunks
new CompressionPlugin({
asset: "[path].gz[query]",
algorithm: "gzip",
test: /\.js$|\.css$|\.html$/,
threshold: 10240,
minRatio: 0
}),
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
new BundleAnalyzerPlugin(
{analyzerMode: 'server',
analyzerHost: '127.0.0.1',
analyzerPort: 8888,
reportFilename: 'report.html',
defaultSizes: 'parsed',
openAnalyzer: true,
generateStatsFile: true,
statsFilename: 'stats.json',
statsOptions: null,
logLevel: 'info'}),
new NoEmitOnErrorsPlugin(),
new GlobCopyWebpackPlugin({
"patterns": [
"assets",
"favicon.ico"
],
"globOptions": {
"cwd": "D:\\Users\\duraimurugan.r\\Desktop\\latest_source_5.12\\apollo-accounting-ui\\src",
"dot": true,
"ignore": "**/.gitkeep"
}
}),
new ProgressPlugin(),
new HtmlWebpackPlugin({
"template": "./src\\index.html",
"filename": "./index.html",
"hash": false,
"inject": true,
"compile": true,
"favicon": false,
"minify": {
collapseWhitespace: true,
removeComments: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true
},
"cache": true,
"showErrors": true,
"chunks": "all",
"excludeChunks": [],
"title": "Webpack App",
"xhtml": true,
"chunksSortMode": function sort(left, right) {
let leftIndex = entryPoints.indexOf(left.names[0]);
let rightindex = entryPoints.indexOf(right.names[0]);
if (leftIndex > rightindex) {
return 1;
}
else if (leftIndex < rightindex) {
return -1;
}
else {
return 0;
}
}
}),
new BaseHrefWebpackPlugin({}),
new CommonsChunkPlugin({
"name": "inline",
"minChunks": null
}),
new CommonsChunkPlugin({
"name": "vendor",
"minChunks": (module) => module.resource && module.resource.startsWith(nodeModules),
"chunks": [
"main"
]
}),
new AotPlugin({
"mainPath": "main.ts",
"hostReplacementPaths": {
"environments\\environment.ts": "environments\\environment.ts"
},
"exclude": [],
"tsConfigPath": "src\\tsconfig.json",
"skipCodeGeneration": true
})
],
"node": {
"fs": "empty",
"global": true,
"crypto": "empty",
"tls": "empty",
"net": "empty",
"process": true,
"module": false,
"clearImmediate": false,
"setImmediate": false
},
"devServer": {
"historyApiFallback": true
}
};