webpack4.4.6 + vue-cli3打包优化总结
项目中已经做过的优化
1.productionSourceMap:false
关闭生产环境的sourceMap,加快生产环境构建
2.config.resolve.alias
减少资源查找路径
3.生产环境开启js,css压缩
自己另外探索的一些配置和优化
webpack提供开箱即用的配置，比如无需配置entry和output，内部都做了默认处理。
1.configureWebpack 与 chainWebpack配置
vue2中使用weback,webpack配置是写在vue.config.js中。如果需要配置webpack,可以通过**configureWebpack 与 chainWebpack配置。
2.output配置
我们可以看到webpack打包出来的资源在开发环境上都是1.js,2.js…。这是因为vue项目目前用的是路由懒加载的模式，在每一次刷新都会重新加载很多js文件，由于路由都没有自定义webpackChunkName，所以就是默认的11(数字).js这种。
我们可以通过设置output属性修改打包出来的chunkname，比如
注意，如果直接在外层定义output对象则npm run serve时会报错 output is not allowed。因为在vue项目中需要修改webpack配置需要在vue.config.js中的configureWebpack
或chainWebpack中。
但是这种改变还是不清楚资源来源，个人感觉没啥用。
3.tree Shaking
webpack4在mode=prodution模式下才会开启treeShaking ,但是前提条件是项目打包格式是esmodule，如果是amd 或 cmd (浏览器端）,common.js（node服务端）则不会生效。在我们的项目中使用的是jeecg-boot 2.4.5版本，webpack是4.4.6。npm run build分析包就发现了很多没有用到的包，比如antd-online-mini，但还是打包进去了。
那怎么配置treeShaking呢,可以参照blog.csdn.net/qq_41257129…
第一步：可以配置.babelrc或babel.config.js
实际项目 这样配置后 npm run serve就报错了，所以放弃了。
第二步：开启优化选项useExports，压缩代码项目中用到了compression-webpack-plugin应该是一样的吧
webpack4下这样配置
注意：如果直接将mode 设置为production生产模式，npm run serve时会报错，所以就不用尝试啦
第三步：package.json这是sideEffects
4.splitChunks分包策略，
建议开启chunks:all 。但是对比下来好像没有啥区别？
什么是 Chunk
Chunk 是打包产物的基本组织单位，读者可以等价认为有多少 Chunk 就会对应生成多少产物(Bundle)。Webpack 内部包含三种类型的 Chunk：
-
Initial Chunk：基于 Entry 配置项生成的 Chunk
-
Async Chunk：异步模块引用，如 import(xxx) 语句对应的异步 Chunk
-
Runtime Chunk：只包含运行时代码的 Chunk
chunks取值 ， SplitChunksPlugin 默认只对 Async Chunk 生效，开发者也可以通过 optimization.splitChunks.chunks 调整作用范围，该配置项支持如下值：
- 字符串 'all' ：对 Initial Chunk 与 Async Chunk 都生效，建议优先使用该值
- 字符串 'initial' ：只对 Initial Chunk 生效
- 字符串 'async' ：只对 Async Chunk 生效
- 函数 (chunk) => boolean ：该函数返回 true 时生效
分包策略概念
-
minChunks: 3 设定引用次数超过 3 的模块才进行分包
-
maxInitialRequests：用于设置 Initial Chunk 最大并行请求数(分的主包+子包的数量）
-
maxAsyncRequests：用于设置 Async Chunk 最大并行请求数
这里所说的“请求数”，是指加载一个 Chunk 时所需同步加载的分包数。例如对于一个 Chunk A，如果根据分包规则(如模块引用次数、第三方包)分离出了若干子 Chunk A¡，那么请求 A 时，浏览器需要同时请求所有的 A¡，此时并行请求数等于 ¡ 个分包加 A 主包，即 ¡+1。
另外：生产环境会默认开启分包策略嘛？
5.限制打包数量
这个没有在生产环境测试过，但是npm run dist后打包的数量确实大大减少，体积没有明显优化
// 解决打包后chunk.js文件过多问题
config.plugin('chunkPlugin').use(webpack.optimize.LimitChunkCountPlugin, [{
maxChunks: 5,
minChunkSize: 10000
}])
6.cache-loader开启缓存
开发环境上能够优化本地编译速度，生产环境可以优化部署速度，即npm run build的速度
