vue打包文件分析安装打包分析插件根目录下新建 .env.analyzer 文件，内容如下： package.json

安装打包分析插件

npm install webpack-bundle-analyzer -S

根目录下新建 .env.analyzer 文件，内容如下：

NODE_ENV = production
ANALYZE_MODE = "analyze"

package.json 的 script 下添加以下代码：

"scripts": {
    // ···
    "build:analyze": "vue-cli-service build --mode analyze",
}

vue.config.js 文件添加配置

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
// 环境变量的引入
const isAnalyzeMode = !!process.env.ANALYZE_MODE
module.exports = {
    configureWebpack: (config) => {
        if (isAnalyzeMode) {
          config.plugins.push(
            new BundleAnalyzerPlugin({
              // 生成静态文件
              analyzerMode: 'static',
            })
          )
        }
    }
}

运行命令 npm run build:analyze ，自动打开分析好的文件，效果如下：

生产环境部分资源使用CDN加速

Saticfile CDN: www.staticfile.org/

Vue 打包过大，可以考虑将代码中大型依赖使用CDN资源代替，例如 Vue、Element UI等资源。

p配置 vue.config.js 文件

module.exports = {
  chainWebpack: (config) => {
    config
      .when(process.env.NODE_ENV !== 'development',
        config => {
          // 设置哪些资源不需要被打包，改为获取cdn资源
          config.set('externals', {
            'vue': 'Vue',
            'vue-router': 'VueRouter',
            'axios': 'axios',
            'element-ui': 'ELEMENT',
            'echarts': 'echarts',
            'highlight.js': "window.hljs",
          })

          // 给index.html传参
          config.plugin('html').tap(args => {
            args[0].name = '项目标题
            args[0].useCdn = true
            return args
          })
        }
      )
  }
}

配置 index.html 文件

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="renderer" content="webkit">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title><%= htmlWebpackPlugin.options.name %></title>
</head>

<body>
  <div id="app"></div>

  <% if(htmlWebpackPlugin.options.useCdn==true) { %>
  <script src="https://cdn.staticfile.org/vue/2.6.12/vue.min.js"></script>
  <script src="https://cdn.staticfile.org/vue-router/3.4.9/vue-router.min.js"></script>
  <script src="https://cdn.staticfile.org/axios/0.21.0/axios.min.js"></script>
  <script src="https://cdn.staticfile.org/element-ui/2.14.1/index.min.js"></script>
  <script src="https://cdn.staticfile.org/echarts/5.0.1/echarts.min.js"></script>
  <script src="https://cdn.staticfile.org/highlight.js/10.4.1/highlight.min.js"></script>
  <% } %>
</body>

</html>