Angular|Angular Webpack打包优化 AngularWebpack打包优化

angular项目，推荐使用angular-cli创建打包项目，但是有特殊的需求是就显然不是很灵活。
比如想自定义webpack一些参数的时候就发现无从下手。
这时候你就需要 ng命令的额外参数了
ng build --prod --extra-webpack-config webpack.extra.js
这个参数可以额外指定一个webpack config 文件
如：webpack config webpack.extra.js文件内容

const webpack = require('webpack'); const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin') ; var ZipPlugin = require('zip-webpack-plugin')module.exports = { plugins: [ new HtmlWebpackPlugin({ filename: 'download.html', excludeChunks: ['main','runtime','styles','polyfills'], template: './src/download.html', title: 'test Title' }), new ZipPlugin({ path:path.join(__dirname,'zip'), filename: 'test.zip', // pathPrefix: 'zip', }), ], }

webpack4.x 模块分离 - optimization + splitChunks
在 webpack4.x 中，我们使用 optimization.splitChunks 来分离公用的代码块。
这里说的分离，当然只是针对一些第三方库（一般来自 node_modules），以及我们自己定义的工具库（或公用方法）。不然，还分离啥呢？
不知如何下手？首先，我们来看官网给的一份默认配置：

optimization: { splitChunks: { chunks: 'async', minSize: 30000, maxSize: 0, minChunks: 1, maxAsyncRequests: 5, maxInitialRequests: 3, automaticNameDelimiter: '~', name: true, cacheGroups: { vendors: { test: /[\\/]node_modules[\\/]/, priority: -10 }, default: { minChunks: 2, priority: -20, reuseExistingChunk: true } } } }

接着，我们再来看下它们的含义：

chunks：该属性值的数据类型可以是字符串或者函数。如果是字符串，那它的值可能为 initial | async | all 三者之一。默认值的数据类型为字符串，默认值为 async，但推荐用 all。它表示将哪种类型的模块分离成新文件。字符串参数值的作用分别如下： initial：表示对异步引入的模块不处理 async：表示只处理异步模块 all：无论同步还是异步，都会处理 minSize：该属性值的数据类型为数字。它表示将引用模块分离成新代码文件的最小体积，默认为 30000，单位为字节，即 30K（指min+gzip之前的体积）。这里的 30K 应该是最佳实践，因为如果引用模块小于 30K 就分离成一个新代码文件，那页面打开时，势必会多增加一个请求。 maxSize：该属性值的数据类型为数字。它表示？ minChunks：该属性值的数据类型为数字。它表示将引用模块如不同文件引用了多少次，才能分离生成新代码文件。默认值为 1 maxAsyncRequests：该属性值的数据类型为数字，默认值为 5。它表示按需加载最大的并行请求数，针对异步。 maxInitialRequests：该属性值的数据类型为数字，默认值为 3。它表示单个入口文件最大的并行请求数，针对同步。 automaticNameDelimiter：该属性值的数据类型为字符串，默认值为 ~。它表示分离后生成新代码文件名称的链接符，比如说 app1.js 和 app2.js 都引用了 utils.js 这个工具库，那么，最后打包后分离生成的公用文件名可能是 xx~app1~app2.js 这样的，即以 ~ 符号连接。 name：该属性值的数据类型可以是布尔值或者函数（返回值为字符串），其中布尔值得为 true，此时，分离文件后生成的文件名将基于 cacheGroups 和 automaticNameDelimiter。如果设置为 false，则不会进行模块分离。 cacheGroups：该属性值的数据类型为对象，它的值可以继承 splitChunks.* 中的内容。如果 cacheGroups存在与 splitChunks.* 同名的属性，则 cacheGroups 的属性值则直接覆盖 splitChunks.* 中设置的值。 test：该属性值的数据类型可以为字符串或正则表达式，它规定了哪些文件目录的模块可以被分离生成新文件。 priority：该属性值的数据类型可以为数字，默认值为 0。它表示打包分离文件的优先级。 reuseExistingChunk：该属性值的数据类型可以为布尔值。它表示针对已经分离的模块，不再重新分离。

分离第三方库
要将第三方库分离出来，我们需要调整配置文件，设置 chunks: 'all'，即表示让所有加载类型的模块在某些条件下都能打包。
分离工具函数
打包中，我们发现，工具函数模块（utils）的源码被分别打包到了两个文件中，这显然是不对。之所以出现这种情况，是因为我们设置了 minSize: 30000，即分离成独立文件的最小体积为 30K，而这里的工具函数（utils.js）只有几KB，所以，没被分离成单独的文件。
第三方库合并打包并重命名
有的时候，我们希望将所有来自 node_modules 的第三方库都打包到同一个文件中。显然，上面的打包配置并没有满足这个条件。并且，我们还希望可以对打包后的文件名进行重命名。
要完成，只需要在 cacheGroups 设置 name 属性即可。

// webpack.config.jsmodule.exports = { optimization: { splitChunks: { chunks: 'all', minSize: 30000, maxSize: 0, minChunks: 1, maxAsyncRequests: 5, maxInitialRequests: 3, automaticNameDelimiter: '~', name: true, cacheGroups: { vendors: { test: /[\\/]node_modules[\\/]/, priority: -10, name: 'lib' }, default: { minSize: 0, minChunks: 2, priority: -20, reuseExistingChunk: true, name: 'utils' } } } } }

【Angular|Angular Webpack打包优化】如果你嫌打包后的业务文件大，还可以结合 optimization.runtimeChunk。它可以提取 entry chunk 中的 runtime函数部分，生成一个单独的文件.