"analyze": "NODE_ENV=production npm_config_report=true npm run build"

npm run analyze

import _ from 'lodash'

_.get(obj, 'key', 'default_value')

// 方法一：会导致加载全部的 lodash 库
import _ from 'lodash'
_.get()

// 方法二：只会加载其中的 get 方法
import get from 'lodash/get'
get()

npm i --save-dev babel-plugin-lodash babel-cli babel-preset-es2015

{
 "plugins": ["lodash"],
 "presets": ["es2015"]
}

module: {
  loaders: [{
    'loader': 'babel-loader',
    'test': /\.js$/,
    'exclude': /node_modules/,
    'query': {
      'plugins': ['lodash'],
      'presets': ['es2015']
    }
  }]
}

import Test from '../pages/test'

export default new Router({
  routes: [
    {
      path: '/test',
      name: 'test',
      component: Test
    }
  ]
});

const Test = () => import('../pages/test')

export default new Router({
  routes: [
    {
      path: '/test',
      name: 'test',
      component: Test
    }
  ]
});

import moment from 'moment'

export default {
  data () {
    
  },
  mounted () {
    
  }
}

export default {
  name: '',
  beforeCreate () {
    import('moment').then(module => {
      this.moment = module;
    });
  },
  data () {
    return {
      moment: null
    }
  }
}

<script src="/UploadFiles/2021-04-02/echarts.min.js">

注意，如果需要地图组件，也需要一并引入。
这之后我们需要删除所有 import echarts from 'echarts' 的代码，即不再通过这种方式引入 echarts。
但问题来了，如果这么做的话，webpack 在打包的时候会发现 echarts 变量不存在而停止编译。解决办法是，我们需要在 webpack 配置中告知编译器，对于 echarts 变量使用了引入外部资源的方式。需要修改 webpack.base.config.js：


module.exports = {
  externals: {
    "echarts": "echarts"
  },
}


这之后我们便可以直接使用 echarts 这一变量而不会导致编译错误了。
当我们将所有采用之前方式引入 echarts 的代码删除或注释之后，再次进行分析，会发现编译大小少了很多。
经过以上两步，原本 5M 的编译文件变为了 1.67 M。

这之后，我们还可以根据分析结果，针对性地进行优化。如更换时间库为更轻量级的 spacetime 等。
服务器端开启 gzip
使用 gzip 可以进一步压缩文件，使得服务器传递给浏览器的文件是经由压缩之后的，待浏览器收到之后再解压缩。要使用这一方式，需要服务器端的支持，这里以 Nginx 为例。
在 nginx.conf 中，添加如下配置：


gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
#gzip_http_version 1.0;
gzip_comp_level 2;
gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png application/javascript;
gzip_vary off;


之后刷新页面（ 注意禁用缓存 ），观察 js、css 等资源文件的请求中是否包含 Content-Encoding: gzip，如果存在，则表明 gzip 已成功。
注意，在 gzip_types 中规定了哪些请求类型会使用 gzip 进行压缩。对于没有使用 gzip 的资源文件，可将其 Content-type 类型加入 gzip_types 之中。
服务器端渲染
注意，在以上对打包过程的优化中，受影响的主要是 vendor.js 文件中第三方库的部分（ gzip 方法会影响全部资源文件 ）。
如果我们想继续进行优化，就需要考虑服务器端渲染了。
Vue 的作用机制实际是使用 js 向 html 中挂载组件，如果我们能够将这一过程放在服务器端进行，就可以不再向浏览器传输一部分驱动文件，从而进一步减少浏览器所需的文件大小。不过这一过程需要服务器的额外支持，有兴趣的同学可以参考：实例 PK ( Vue服务端渲染 VS Vue 浏览器端渲染 )。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。