1. 生成打包报告

    npx vue-cli-service build --report

   这样项目打包后会生成report.html，打开之后会有第三方库打包大小情况等分析。

2. 路由懒加载

   （1）安装依赖

    npm i -D @babel/plugin-syntax-dynamic-import
    // or
    yarn add -D @babel/plugin-syntax-dynamic-import

   （2）路由处理

    // Home组件引入方式，/*webpackChunkName为分包的名称*/
    const Home = () => import(/* webpackChunkName: "home" */ '@/views/Home')

3. 第三方库使用CDN方式加载

   （1）将第三方库以CDN方式引入index.html（包括js和css）

   （2）在vue.config.js中配置externals

    chainWebpack: (config) => {
      config.set('externals', {
        vue: 'Vue',
        'vue-router': 'VueRouter',
        axios: 'axios',
        lodash: '_'
      })
    })
  }

4. 区分生产和研发环境

    chainWebpack: (config) => {
        config.when(process.env.NODE_ENV === 'production', config => {
            // 生产环境配置
            ...
        })
        config.when(process.env.NODE_ENV === 'development', config => {
            // 研发环境配置
            ...
        })
     }

5. 组件按需加载