vue打包之后，首屏加载过慢，响应很久，影响用户体验的优化
第一步：安装 webpack-bundle-analyzer 分析包大小
cnpm i webpack-bundle-analyzer -S -D
在 vue.config.js 文件中引用：
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
配置：
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') { //表示在生成run build 的时候在进行包大小的分析
config.plugins.push(new BundleAnalyzerPlugin());
}}
方法一： 使用CDN的方式加载一些固定库 如vue，vue-router ，vuex ，jquery 等等
具体操作：1.配置 vue.config.js
configureWebpack: config => { config.externals = { ‘vue’: ‘Vue’，
'vuex ':'Vuex ',
'vue-router ':'VueRouter'
'jquery':'jquery' } }
2.在根目录下面的public文件夹下的index中引入cnd
注意事项：1.引入的cdn版本必须高于package.json中的版本。2externals对象的value（标红部分）值必须是cdn中导出值的变量名称，
方法二： Vue开启Gzip Nginx开启Gzip
npm compression-webpack-plugin --save-dev
// 导入compression-webpack-plugin
const CompressionWebpackPlugin = require('compression-webpack-plugin')
// 定义压缩文件类型const productionGzipExtensions = ['js', 'css']
//在vue.config.js中配置
configureWebpack: {
plugins: [
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
threshold: 10240,
minRatio: 0.8
})
]
}}
