vue打包优化dist文件过大，导致资源加载多、首页白屏问题

dist打包后经常遇到包过大，有的甚至超过10M等，这会导致我们项目在首次进入时，由于资源加载过多而导致页面白屏的情况，针对这种情况，我们可以对以下几个方便进行优化

一、设置productionSourceMap

在vue.config.js文件中，设置productionSourceMap为 false；表示生产环境不生成sorce map文件（source map 就是资源地图。其作用就是定位，用于定位浏览器控制台输出语句在项目文件的位置，以便于出现问题时快速找到问题位置。）

module.exports = {
	productionSourceMap： false
}

二、使用插件 compression-webpack-plugin（ 顾名思义：对webpack打包文件进行压缩，达到减小包体积，提升访问速度的效果）

1.安装插件

npm install compression-webpack-plugin -D

2. 配置vue.config.js文件

const CompressionWebpackPlugin = require('compression-webpack-plugin');
const isProduction = process.env.NODE_ENV === 'production';

module.exports = {
chainWebpack: config => {
    if (isProduction) {
      config.plugin('compression-webpack-plugin').use(new CompressionWebpackPlugin({
        test: /\.(js|css|scss)$/, // 匹配文件名
        threshold: 20480, // 对超过20k的数据压缩
        minRatio: 0.8,
        deleteOriginalAssets: true // 删除源文件
      }))
    }
  },
}

注意安装后使用过程中可能会报错，大致原因是因为版本不匹配造成，所以安装时最好指定版本 npm install compression-webpack-plugin@6.x -D

3.使用CDN加载常用资源图片等

1.对于常用的图片，可以放到cdn上进行访问，其一是可以减小打包体积；其二是通过cdn访问可以减轻服务器压力，提升性能

2.常用资源使用cdn配置，编辑vue.config.js文件

// 忽略生成环境打包的文件
var externals = {
  'vue': 'Vue',
  'vuex': 'Vuex',
  'vue-router': 'VueRouter',
  'element': 'Element',
  'moment': 'moment',
};

// 设置CND相关css和js地址
const cdn = {
  js: [
    'https://cdn.bootcdn.net/ajax/libs/vue/3.0.11/vue.global.js',
    'https://cdn.bootcdn.net/ajax/libs/vue-router/4.0.6/vue-router.global.min.js',
    'https://cdn.bootcdn.net/ajax/libs/vuex/4.0.0/vuex.global.min.js',
    'https://cdn.bootcss.com/element-ui/2.8.2/index.js',
    'https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js',
  ]，
   css: [
    'https://cdn.bootcss.com/element-ui/2.8.2/theme-chalk/index.css',
  ]
}


module.exports = {
 // 扩展cdn
 config.plugin('html').tap(args => {
      args[0].cdn = cdn
      return args
    })
  config.externals(externals)
}

3.在public下index.html中引入

 <!-- cdn方式引入插件 -->
  <% if (process.env.NODE_ENV === 'production') { %>
    <% if (htmlWebpackPlugin.options.cdn.css) { %>
      <% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
        <link href="<%=css%>" rel="preload" as="style">
        <link rel="stylesheet" href="<%=css%>" as="style">
      <% } %>
    <% } %>
    <% if (htmlWebpackPlugin.options.cdn.js) { %>
      <% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
        <link href="<%=js%>" rel="preload" as="script">
        <script src="<%=js%>"></script>
      <% } %>
    <% } %>
  <% } %>

4.使用路由懒加载（需要用到某个页面时，才去加载路由，减少一进首页就加载全部资源，造成首页加载缓慢）

具体方式 一：使用 import

component: () => import(‘xxxxx’) // 组件路径

方式二： 使用require

component: resolve => require(['xxx 组件路径'], resolve)

使用上述几个方式后，dist打包结果已经明显减小，首页打开速度也是杠杠的了…………