前端优化

[carlleton]

记录一下当前vue工程下使用的优化（vue-cli3）：

1. moment.js

方案一：替换为date-fns或dayjs，参考You-Dont-Need-Momentjs (翻译版)

方案二：使用ignorePlugin删除它国际化的部分，具体操作：
在vue.config.js中加入如下配置：

const webpack = require('webpack');

module.exports = {
  chainWebpack: config => {
    config
      .plugin('ignorePlugin')
      .use(webpack.IgnorePlugin, [{
        resourceRegExp: /^\.\/locale$/,
        contextRegExp: /moment$/,
      }]);
  },
}

使用方式：

const moment = require('moment');
// 引入zh-cn locale文件
require('moment/locale/zh-cn');
moment.locale('zh-cn');

缩减后，大致会缩减至原来的四分之一

2.lodash.js

方法一：单独引入

import {chain, cloneDeep} from 'lodash';
// 可以改写为
import chain from 'lodash/chain';
import cloneDeep from 'lodash/cloneDeep';

方法二：引入lodash-webpack-plugin和babel-plugin-lodash
在vue.config.js中chainWebpack加入

config.plugin("loadshReplace")
        	.use(new LodashModuleReplacementPlugin());//优化lodash

方法三：使用 lodash-es
利用tree-shaking

import {isEmpty, isObject, cloneDeep} from 'lodash-es';

参考：

• 前端工程资源小优化
• Webpack打包优化
• Webpack 按需打包 Loadsh