vue 打包过大 vue.config.js 配置解决方案 优化首屏加载

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 ':'V