vue-cli4 (Vue 2.x) 项目打包优化方案

随着vue cli升级到 4 (内置webpack 4)，我们需要手动做的优化就越来越少了。
通过vue-cli 4.x，也就是@vue/cli成功构建一个项目的时候，它不仅自动安装好了必要的库和插件，而且做完了针对大部分应用的 webpack 优化配置。
我们可以用 inspect 命令 审查解析好的配置文件 (用了什么 loaders 和 plugins 会比较直观)，也可以看@vue/cli-service这个包，即/node_modules/@vue/cli-service/lib/config/目录下的文件(逻辑条理更清晰，多看源码也有好处)，便可大致清楚它默认帮我们做了什么配置。

审查项目的 webpack 配置

在 shell 执行vue inspect > defaultConfig.js，就可以把我们现有的webpack配置解析成一个json对象并输出到目标js文件里。
其中用 webpack-chain 方式配置的模块规则，

.rule('vue')
  .test(/\.vue$/)
    .use('cache-loader')
      .loader('cache-loader')
      .end()
    .use('vue-loader')
      .loader('vue-loader')

会被转化成如下的 module.rules 配置。相对而言更容易理解。

module: {
  rules: [  /* config.module.rule('vue') */
    {
      test: /\.vue$/,
      use: ['cache-loader','vue-loader']
    },
  ]
}

直接用 vue ui 查看也可

vue-cli4 的默认 webpack 配置

经过对@vue/cli-service源码的分析，将 vue-cli4 默认打包配置梳理如下(非面面俱到)：

1. config/app.js

• 在 output 选项配置打包输出的 bundle 文件名为[name].[contenthash:8].js的格式，并定义它们的输出目录：打包输出目录/静态资源目录/js，如dist/static/js

• 非测试环境下，通过optimization.splitChunks自定义代码分割逻辑，先把初始依赖的node_modules包提取到chunk-vendors.js文件，再把被不同入口的公共模块提取到chunk-common文件。

• 配置 wepack 内置的NamedChunksPlugin插件，使 chunk id 保持稳定，如此异步 chunks 也能有始终如一的哈希值。

• 通过 @vue/preload-webpack-plugin 插件，将在 index.html 引入的 js、css 的标签上，加上rel='preload'

• 用CorsPlugin给 html 配置 crossorigin 属性(在vue.config.js自行配置了crossorigin的值才会生效)

• 用copy-webpack-plugin插件把 public 目录的文件复制到定义的outputDir(打包目录，默认是dist)下

2. config/base.js

• 通过 module 模块给不同文件类型配置不同预处理器。
  .vue(单文件组件)：vue-loader (为每个语言块(如