前端工程资源小优化

概述

最近给vue项目优化了一下资源打包，有一些心得，记录下来，供以后开发时参考，相信对其他人也有用。项目使用vue-cli搭建的，所以优化方向是基于vue-cli3的。

css按需加载

项目使用的是element ui库，我们使用了element的自定义主题。但是我看见打包的时候打包了2份element ui库的css：app.css打包了一份，vendor.css也打包了一份。严格说来，element-ui库的样式应该打包进第三方css里面也就是vendor.css里面。

查找原因，发现有如下配置：

// babel.config.js
module.exports = {
  presets: [
    '@vue/app',
  ],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk',
      },
    ],
  ],
};

// main.js
import '../../theme/index.css';

其中babel.config.js里面的配置是说，element-ui使用的style是element-ui库里面theme-chalk文件夹里面的样式；main.js里面的配置是说，导入自定义主题文件夹theme里面的样式。所以前者把element-ui库里面的css打包进了vendor.css，后者把自定义主题的css打包进了app.css。

最后考虑到我们的需要是一定要使用自定义主题，所以做了如下修改：

// babel.config.js
module.exports = {
  presets: [
    '@vue/app',
  ],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: '~theme',
      },
    ],
  ],
};

意思是，element ui库使用自定义主题theme文件夹里面的样式。所以不会再把element ui库里面的css打包进vendor.css里面了。

虽然还是有一点瑕疵，就是这样会使app.css很大，导致每次只要修改了一点点css，都要把element ui的css重新打包一次。但这也没办法，需要是一定要自定义主题。

element-ui组件按需加载

上面我们在babel.config.js里面已经配置了element ui组件的按需加载，但是在实际引入组件的时候我们引入了多余的组件，特别是time-picker和date-picker组件，占了很大体积，于是我检查了一遍，把多余的组件删除了。

这里有必要提一下的是，如果你使用的是vue-cli3，那么在package.json里面加入如下指令：

"report": "vue-cli-service build --report"

然后运行npm run report，就可以在dist文件夹里面生成一个report.html，里面非常直观的显示出打包的js的组成成分和大小，对减少打包体积很有帮助。

moment.js

通过上面的指令npm run report，我们可以看到，moment.js的打包体积非常大，都快赶上element ui整个库了。于是我想办法减少moment.js的打包体积。

通过You-Dont-Need-Momentjs可以看到好几个moment.js的替代库，但是由于它们都没有UTC的相关功能，而我们项目非常依赖moment.js的UTC功能，所以我们项目并不能采用这些替代库。

最后只能在moment.js上想办法了，只能通过删减它里面的国际化内容来减少它的打包体积了。webpack官方也建议在使用moment.js的时候用ignorePlugin删除它的国际化部分。

具体方法如下，只需要在vue.config.js里面加入下面的配置就行了：

const webpack = require('webpack');

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