moment 使用的先后问题」。注：如果该组件是页面级别的组件，则使用「路由懒加载」中的方法就可以了。
使用 CDN 外部加载
如上所示，echarts 模块占了很大的部分，由于没有找到 echarts 按需加载的插件，这里我们通过外部引用的方式来减少编译的大小。
首先，我们修改
index.html，从 CDN 中引入 echarts 文件：
<script src="https://cdn.bootcss.com/echarts/3.7.0/echarts.min.js"></script>注意，如果需要地图组件，也需要一并引入。
这之后我们需要删除所有
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 已成功。
