1. 懒加载
改变组件的引用方式：
const Article = () => import('@/components/Article')
2. 启用 Gzip 压缩
vue 默认不启用 Gzip 压缩，但我们知道，压缩后的文件体积会大大减少，这适用于线上部署。
如何启用也很简单：
首先，在 config 中将 build.productionGzip 设置为 true
然后，确认 webpack.prod.conf.js 中有如下代码：
if (config.build.productionGzip) {
const CompressionWebpackPlugin = require('compression-webpack-plugin')
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 10240,
minRatio: 0.8
})
)
}
复制代码如果有的话，下面只要使用 npm install --save-dev compression-webpack-plugin 安装 webpack 插件，这样，你在 build 项目时，webpack 会帮你压缩文件。
如果没有的话，你只要把上面代码复制到 webpack 配置文件的 plugins 下即可。
如何方面查看build之后的文件大小呢？我们可以使用另外一个 webpack 插件：webpack-bundle-analyzer ，如何使用呢？默认 Vue 会导入这个插件，我们只需要调用即可：在 package.json 文件中增加以下命令：
"analyzer": "NODE_ENV=production npm_config_report=true npm run build"
运行 npm run analyzer ，等待一会，就可以看到整个项目的打包情况了。
3. 将依赖库挂到 CDN 上
原理是将一些依赖库挂载到 CDN 上，通过在 html 文件 script 便签引入的方式进行加载，减少的打包文件，从而缩小了体积。
vue、vuex、axios、element-ui、vue-router等包使用cdn加载，webpack.base.conf.js中设置：
externals:{
'vue':'Vue',
'element-ui':'ELEMENT',
'vue-router':'VueRouter',
'vuex':'Vuex'
}
4. 图片压缩
https://tinypng.com/#
5. 取消.map文件
在config/index.js文件中将productionSourceMap设置为false
6. 去掉代码中的console.log
在webpack.prod.conf.js文件中设置：
new UglifyJsPlugin({
uglifyOptions:{
compress:{
warning:false,
drop_debugger:true,
drop_console:true
}
},
sourceMap:config.build.productionSourceMap,
parallel:true
})