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打包结果已经明显减小,首页打开速度也是杠杠的了…………
Logo

前往低代码交流专区

更多推荐