vue项目npm run build打包优化

我的当前版本信息：
操作系统：win10_64位
node：v12.13.1
npm：6.12.1
cnpm：6.1.0
webpack：3.12.0
vue-cli：2.9.6

1、使用scirpt标签

npm run build 命令打包时默认会把 package.json文件里dependencies中的依赖打包进dist/js的vendor.js里，导致打包后的vendor.js文件过大。
解决办法：将dependencies中不会再修改的依赖通过cdn引入（博客内的cdn只是例子），例如vue和axios，就直接在index.html文件的上用

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
externals: {
    'vue': 'vue', 
    'axios':'axios'
}

2、删除map文件

npm run build 命令打包时默认会生成 相对应的map文件。
在项目 根目录config/index.js中build内找到productionSourceMap: true,把 true改为false。

3、Gzip 文件压缩

vue-cli npm run build 命令打包时 压缩优化不彻底。这里 webpack 其实自带有一个优化打包的方法(Gzip 文件压缩)，只是 vue-cli 默认没有使用。
安装插件 compression-webpack-plugin　　注:安装的时候带上版本号，现在 compression-webpack-plugin 2.0已出，默认该命令安装最新版，最新版本和当前的webpack不匹配，要报错

cnpm install --save-dev compression-webpack-plugin@1.1.12

compression-webpack-plugin安装完成后，npm run build 执行后会发现js文件夹内每个js文件都有一个相对应的gz后缀文件，而且gz文件比相对应的js文件小很多。浏览器如果支持 g-zip 会自动查找有没有gz文件，找到了就直接加载gz文件然后本地解压并执行。