vue开发常见套路 查缺补漏

在读了这篇文章后，查缺补漏了一下：https://juejin.im/post/6859775573837742087

（一）对developer和build的打包进行不同配置

在项目中使用过根据环境判断使用哪个路由的方案：

const routerMode =
  process.env.VUE_APP_MODE === 'development' ? 'hash' : 'history'
const routerBase =
  process.env.VUE_APP_MODE === 'development' ? '/' : '/clean/h5/activity'

（二）路径别名

路径别名是一个好方法，但是我一直都没用。。

resolve: {
   alias: {}
}

这个啥时候给安排上，resolve 关键字

（三）模版引擎调试

这个方法看好多篇文章都说过这个了，但是一直没用。。今天来尝试一下

main.js 挂在原型：

Vue.prototype.$log = window.console.log

组件内使用：

created () {
    this.$log(1111)
  },

感觉快是快了，可能用的不太熟练 有点别扭~

（四）管理请求加载状态

finally 是 try、catch  走完都会走 finally 这个方法很不错~

(五) 开启性能追踪

这个需要下载插件 看出每个组件的渲染加载时间

读了这篇文章的查缺补漏：https://juejin.im/post/6850037281559543821

（1）为什么 v-for 避免使用 index 作为 key

答：因为 v-for 绑定的数组变化后，是根据 key 的值前后对比来决定重不重新渲染该元素，如果用 index 做 key，一个变化 ，剩余的大部分都变了，比如删除、增加等等，加大性能开销，最好用自己的 id 作为 key , 数组其他元素变化不会影响该id的值 

 

 

 

 

 

 

 

 

 

 

 

 

 

（二）项目过程中的我看我们平时用的基本都用到了

vue.config.js

/* eslint-disable */
const SentryPlugin = require('@sentry/webpack-plugin');
const fs = require('fs');
const TerserPlugin = require('terser-webpack-plugin');
const PluginCustomTemplate = require('@webpack/plugin-custom-template');
const transformCDNPath = require('fe-cdnpath-transform');
const env = process.env.VUE_APP_MODE;

function getMockData() {
  const mockFileArr = fs.readdirSync('./mock');
  let arr = [];
  mockFileArr.forEach(filename => {
    const fileContent = require(`./mock/${filename}`);
    const obj = {
      api: fileContent.api || '',
      method: fileContent.method || 'get',
      response: fileContent.response.ok || {}
    };
    arr.push(obj);
  });
  return arr;
}

// 页面Pages配置
const PAGES = {
  index: {
    // 秒杀 page 的入口
    entry: 'src/project/Seckill/main.ts',
    // 模板来源
    template: 'public/index.html',
    // 在 dist/index.html 的输出
    filename: 'index.html',
    // 提取出来的通用 chunk 和 vendor chunk。
    chunks: ['chunk-vendors', 'chunk-common', 'index']
  },
  mySeckill: {
    // 我的秒杀 page 的入口
    entry: 'src/project/MySeckill/main.ts',
    // 模板来源
    template: 'public/mySeckill.html',
    // 在 dist/index.html 的输出
    filename: 'mySeckill.html',
    // 提取出来的通用 chunk 和 vendor chunk。
    chunks: ['chunk-vendors', 'chunk-common', 'mySeckill']
  },
  seckillOrder: {
    // 下单 page 的入口
    entry: 'src/project/SeckillOrder/main.ts',
    // 模板来源
    template: 'public/seckillOrder.html',
    // 在 dist/index.html 的输出
    filename: 'seckillOrder.html',
    // 提取出来的通用 chunk 和 vendor chunk。
    chunks: ['chunk-vendors', 'chunk-common', 'seckillOrder']
  }
};
let plugins = [
  new PluginCustomTemplate({
    pages: PAGES
  })
];
if (env === 'production'|| env === 'sandbox') {
  plugins.push(
    new SentryPlugin({
      ignore: ['node_modules'], // 忽视
      include: './dist', // 上传.dist下的js
      configFile: 'sentry.properties', // 配置文件
      release: process.env.VUE_APP_RELEASE, // 版本号
      urlPrefix: 'https:' + transformCDNPath(env).djoyPublicPath + '/' // cdn js代码的‘绝对路径’前缀
    })
  );
}
module.exports = {
  publicPath: transformCDNPath(env).djoyPublicPath,
  pages: PAGES,
  filenameHashing: true,
  css: {
    modules: false,
    sourceMap: false,
    extract: env !== 'development', // 是否将组件中的 CSS 提取至一个独立的 CSS 文件中
    loaderOptions: {
      sass: {
        prependData: `@import "~jz-ui-user/src/style/baseC.scss";` // 基础sass变量
      }
    }
  },
  transpileDependencies: [],
  chainWebpack: config => {
    // 图片压缩，防止大图上传到cdn
    config.module
      .rule('images')
      .use('image-webpack-loader')
      .loader('image-webpack-loader')
      .options({
        disable: true
      })
      .end();
    // 去掉输出模板的压缩
    Object.keys(PAGES).forEach(page => {
      config.plugin(`html-${page}`).tap(args => {
        args[0].minify = false;
        return args;
      });
    });
  },
  // 修改webpack配置
  configureWebpack: {
    resolve: {
      alias: {}
    },
    optimization: {
      minimizer: [
        new TerserPlugin({
          sourceMap: true,
          terserOptions: { compress: { drop_console: true } }
        })
      ]
    },
    plugins
  },
  // mock及代理
  devServer: {
    disableHostCheck: true,
    // eslint报错输出到浏览器
    overlay: {
      warnings: true,
      errors: true
    },
    // 代理
    proxy: {
      '/clean': {
        target: 'https://jz73.djtest.cn'
      }
    },
    before(app) {
      let mockData = getMockData();
      mockData.forEach(item => {
        app[item.method](item.api, (req, res) => {
          res.json(item.response);
        });
      });
    }
  },
  // eslint报错展示
  lintOnSave: 'error'
};

(三) 删除沉淀代码

Tree-Shaking

tree-shaking可以理解为通过工具"摇"我们的JS文件，将其中用不到的代码"摇"掉，是一个性能优化的范畴。具体来说，在 webpack 项目中，有一个入口文件，相当于一棵树的主干，入口文件有很多依赖的模块，相当于树枝。实际情况中，虽然依赖了某个模块，但其实只使用其中的某些功能。通过 tree-shaking，将没有使用的模块摇掉，这样来达到删除无用代码的目的。