Vue上线打包优化

Vue上线打包优化

在开发Vue项目时，我们通常需要对项目进行打包和优化，以便在生产环境中提供更高性能的应用程序。本篇博客将介绍一些Vue上线打包优化的技巧，帮助您优化应用程序的加载速度和性能。

一、禁止生成sourceMap文件

Vue项目在打包过程中，默认会生成sourceMap文件。sourceMap的主要作用是让打包后的文件像未压缩的代码一样，方便调试和定位错误。然而，在生产环境中我们通常不需要这些文件，因为它们会增加应用程序的体积。您可以在vue.config.js中配置禁止生成sourceMap文件：

// vue.config.js
module.exports = {
  productionSourceMap: false, // 是否在构建生产包时生成sourceMap文件，false将提高构建速度
}

二、关闭预取（Prefetch）

Vue CLI 3默认开启了预取（Prefetch）功能，即在首屏加载时预先获取用户未来可能会访问的内容。这可能会导致一些不必要的流量消耗。如果您的项目对流量有限制，可以考虑关闭预取功能。在vue.config.js中设置如下：

// vue.config.js
module.exports = {
  chainWebpack: config => {
    // 移除prefetch插件
    config.plugins.delete('prefetch')

    // 或者修改它的选项：
    config.plugin('prefetch').tap(options => {
      options[0].fileBlacklist = options[0].fileBlacklist || []
      options[0].fileBlacklist.push(/myasyncRoute(.)+?\.js$/)
      return options
    })
  }
}

三、路由懒加载

对于某些页面，我们可能希望将其下的所有组件打包到同一个异步块（chunk）中，以减少首屏加载时的请求数量。可以使用特殊的注释语法来提供chunk name，从而实现路由懒加载：

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')

四、按需加载Element UI组件

Vue项目打包后，如果使用了完整的Element UI组件库，会增加项目的体积。为了减小打包后的体积，我们可以按需引入Element UI组件。在Vue CLI 3.x版本中，配置文件为babel.config.js，可以按照以下步骤进行配置：

1. 安装babel插件：

   npm install babel-plugin-component -D
   

   在babel.config.js中配置如下：

   module.exports = {
     presets: [
       '@vue/cli-plugin-babel/preset',
       ["@babel/preset-env", { "modules": false }]
     ],
     "plugins": [
       [
         "component",
         {
           "libraryName": "element-ui",
           "styleLibraryName": "theme-chalk"
         }
       ]
     ]
   }
   

   五、使用CDN加载外部资源

   对于一些常用的外部资源，如Vue、Vuex、Vue Router、Axios等，我们可以通过CDN方式引入，以减少打包后的文件体积。以下是在vue.config.js中配置CDN加载的核心代码：

   const isProduction = process.env.NODE_ENV === 'production';
   const cdn = {
       css: [],
       js: [
           'https://cdn.bootcss.com/vue/2.5.17/vue.runtime.min.js',
           'https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js',
           'https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js',
           'https://cdn.bootcss.com/axios/0.18.0/axios.min.js',
       ]
   }
   module.exports = {
       chainWebpack: config => {
           // 生产环境配置
           if (isProduction) {
               // 生产环境注入CDN
               config.plugin('html')
                   .tap(args => {
                       args[0].cdn = cdn;
                       return args;
                   });
           }
       },
       configureWebpack: config => {
           if (isProduction) {
               // 用CDN方式引入
               config.externals = {
                   'vue': 'Vue',
                   'vuex': 'Vuex',
                   'vue-router': 'VueRouter',
                   'axios': 'axios'
               }
           }
       },
   }
   

   在index.html中，我们可以根据CDN加载外部资源的配置动态添加对应的CSS和JS文件。

   六、使用Gzip进行压缩

   在打包完成后，我们可以进一步使用Gzip对打包后的文件进行压缩，以减小文件大小。首先，安装compression-webpack-plugin插件：

   npm install compression-webpack-plugin -D
   

   然后在vue.config.js中引入插件并配置压缩选项：

   const CompressionPlugin = require('compression-webpack-plugin')
   
   configureWebpack: (config) => {
       if (process.env.NODE_ENV === 'production') {
           // 为生产环境修改配置...
           config.mode = 'production'
           return {
               plugins: [new CompressionPlugin({
                   test: /\.js$|\.html$|\.css/, //匹配文件名
                   threshold: 10240, //对超过10k的数据进行压缩
                   deleteOriginalAssets: false //是否删除原文件
               })]
           }
       }
   }
   

   七、图片压缩

   对于项目中的图片资源，可以使用image-webpack-loader对图片进行压缩，从而减小图片的体积。首先，安装image-webpack-loader：

   npm install image-webpack-loader --save-dev
   

   然后在chainWebpack中新增以下代码：

   config.plugins.delete('prefetch')
   config.module.rule('images')
       .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
       .use('image-webpack-loader')
       .loader('image-webpack-loader')
       .options({ bypassOnDebug: true })
   

   八、代码压缩

   最后一步是对代码进行压缩，以去除不必要的代码和注释。我们可以使用uglifyjs-webpack-plugin插件来实现。首先，安装插件：

   npm install -D uglifyjs-webpack-plugin
   

   然后在configureWebpack中加入以下代码:

   const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
   
   new UglifyJsPlugin({
       uglifyOptions: {
           // 生产环境自动删除console
           compress: {
               drop_debugger: true,
               drop_console: true,
               pure_funcs: ['console.log']
           }
       },
       sourceMap: false,
       parallel: true
   })
   

   以上是一些Vue上线打包优化的技巧，通过禁用sourceMap、关闭预取、路由懒加载、按需加载Element UI组件、使用CDN加载外部资源、使用Gzip压缩、图片压缩和代码压缩等方式，可以使您的Vue应用程序更加高效、快速地运行在生产环境中。根据您的实际需求，选择适合您项目的优化方式，以提供更好的用户体验和性能。来源：B站UP——程序员小伙伴