Vue优化项目加载速度

1.在编译时不生成.map文件
在vue.config.js离设置productionSourceMap为false，或者可以设置一个环境变量，让productionSourceMap只在生产环境为false

const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV);
module.exports = {
  productionSourceMap: !IS_PROD
}

2. vue-router路由懒加载
   在·src/router/index.js·中，路由本可以写成

import Home from '@/views/Home.vue'
const routes: Array<RouteConfig> = [
  {
    path: '/',
    name: 'Home',
    component: Home
   }
]

可以改成如下，让页面是在需要时才被加载

const routes: Array<RouteConfig> = [
  {
    path: '/',
    name: 'Home',
    component: resolve => {require(['@/views/Home.vue'],resolve)}
   }
]

官方还为vue-router版本2.4.0以上，提供了新写法

const routes: Array<RouteConfig> = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue')
   }
]

3. 开启Gzip压缩
   CompressionWebpackPlugin官网
   下载安装 compression-webpack-plugin

cnpm install --save compression-webpack-plugin

在vue.config.js里设置用compression-webpack-plugin`压缩文件

const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV);
module.exports = {
  configureWebpack: (config) => {
  if(IS_PROD){
        // gzip compression
        config.plugins.push(
            new CompressionPlugin({
                /* [file]被替换为原始资产文件名。
                  [path]替换为原始资产的路径。
                  [dir]替换为原始资产的目录。
                  [name]被替换为原始资产的文件名。
                  [ext]替换为原始资产的扩展名。
                  [query]被查询替换。*/
                filename: '[path].gz[query]',
                //压缩算法
                algorithm: 'gzip',
                //匹配文件
                test: /\.js$|\.css$|\.ttf$|\.svg$|\.json$|\.html$/,
                //压缩超过此大小的文件,以字节为单位
                threshold: 0,
                // 压缩率小于0.8才会压缩
                minRatio: 0.8,
                deleteOriginalAssets: true // 删除未压缩的文件
            })
       )
   }
}

为Nginx添加Gzip配置

server {
  gzip on;
  gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css;  
  gzip_static on;
  gzip_min_length  1k;
  gzip_buffers     4 16k;
  gzip_http_version 1.1;
  gzip_comp_level 2;
  gzip_vary on;
  gzip_proxied   expired no-cache no-store private auth;
  gzip_disable   "MSIE [1-6]\.";
}

4. 图片压缩
   下载安装 image-webpack-loader

cnpm install --save image-webpack-loader

在vue.config.js里设置用image-webpack-loader处理图片

module.exports = {
  chainWebpack: config => {
        config.module
        .rule('images')
        .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
        .use('image-webpack-loader')
        .loader('image-webpack-loader')
        .options({
            bypassOnDebug: true
        })
        .end()
    }
}

5. 使用CDN加载图片和第三方库，将自身服务器压力分给其他服务器
6. 使用 vue-lazyload 加载图片
   Vue-Lazyload官网
   下载安装 vue-lazyload

cnpm install vue-lazyload --save --no-optional

在main.js中导入包并注册

import VueLazyload from ‘vue-lazyload’

Vue.use(VueLazyload, {
  error: ‘dist/error.png’,//请求失败后显示的图片
  loading: ‘dist/loading.gif’,//加载的loading过渡效果
  try: 2 // 这个是加载图片数量
})

在页面中使用v-lazy代替src添加请求的图片地址，即将

<img src="../assets/img/mission.png" alt class="pic">

改为

<img v-lazy="../assets/img/mission.png" alt class="pic">

Reference

VUE CLI3项目优化
Vue项目打包压缩的实现