使用vue-cli3 + ant-design-vue 搭建项目时的打包优化。

vue-cli3 使用打包可视化分析

        在package.json 的 scripts 中配置

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

         然后使用 npm run analyzer打包，打开dist文件夹下的 report.html 文件，即可看到打包后的模块分析。

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "analyzer": "vue-cli-service build --report",
    "lint": "vue-cli-service lint"
  },

ant-design-vue 按需加载

1.安装 babel-plugin-import 

npm i babel-plugin-import --save-dev

2.配置 babel.config.js

module.exports = {
  plugins: [
    [
      "import", { libraryName: "ant-design-vue", libraryDirectory: "es", style: true }
    ]
  ]
}

3. 在main.js中按需引入（或在vue文件中引入 —— 参考ant-design-vueu官方文档）

import { Menu } from 'ant-design-vue';
import { Layout } from 'ant-design-vue';
import { Steps } from 'ant-design-vue';

Vue.component(Menu.name, Menu);
Vue.component(Menu.Item.name, Menu.Item);
Vue.component(Layout.name, Layout);
Vue.component(Layout.Header.name, Layout.Header);
Vue.component(Layout.Sider.name, Layout.Sider);
Vue.component(Layout.Content.name, Layout.Content);
Vue.component(Steps.name, Steps);
Vue.component(Steps.Step.name, Steps.Step);

vue.config.js 基础配置

const path = require("path");
const resolve = dir => path.join(__dirname, dir)

module.exports = {
　　// 调整内部的 webpack 配置。
　　// 查阅 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/webpack.md
　　chainWebpack: config => {
　　　　config.resolve.alias.set('@', resolve('src'))
　　},
　　configureWebpack: () => {},
　　// 配置 webpack-dev-server 行为。
　　devServer: {
　　　　host: '0.0.0.0',
　　　　port: 8080,
　　　　proxy: {
　　　　　　'/': {
　　　　　　　　// target: 'http://www.xxxxxx.com/',
　　　　　　　　changeOrigin: true,
　　　　　　　　ws: false,
　　　　　　　　pathRewrite: {
　　　　　　　　　　'^/': ''
　　　　　　　　}
　　　　　　}
　　　　}
　　}

｝

打包时 ant-design-vue 中的 icon 被全部引入

页面中按正常方式使用

创建一个文件按需引入ant-design-vue中的icon

如：放在assets/icons/index.js下

// src/icons.js

// export what you need
export {
  default as SmileOutline
} from '@ant-design/icons/lib/outline/SmileOutline';

export {
  default as MehOutline
} from '@ant-design/icons/lib/outline/MehOutline';

// export what antd other components need
export {
  default as CloseOutline
} from '@ant-design/icons/lib/outline/CloseOutline';

// and other icons...

 vue.config.js 中增加配置

const path = require("path");
const resolve = dir => path.join(__dirname, dir)

module.exports = {
  chainWebpack: config => {
    config.resolve.alias
      .set('@ant-design/icons/lib/dist$',resolve("src/assets/icons/index.js"));
  }
}

打包时清除console和debugger 

const path = require("path");
const resolve = dir => path.join(__dirname, dir)

module.exports = {
  chainWebpack: config => {
    config.optimization.minimizer("terser").tap(args => {
      const compress = args[0].terserOptions.compress;
      compress.drop_console = true;
      compress.drop_debugger = true;
      return args;
    });
  }
}

splitChunks在哪儿配置

可以在vue.config.js中配置 ，例如：

const path = require("path");
const resolve = dir => path.join(__dirname, dir)

module.exports = {
  chainWebpack: config => {

    // splitChunks
    config.optimization.splitChunks({
      cacheGroups: {
        common: {
          name: 'common', // 打包后的文件名
          chunks: 'initial',
          minChunks: 2,
          maxInitialRequests: 5,
          minSize: 0,
          priority: 1,
          reuseExistingChunk: true
        },
        dll: {
          name: "dll",
          chunks: "initial",
          priority: 5,
          test: /[\\/]node_modules[\\/]vue|vue-router|babel-runtime|lodash|core-js[\\\/]/
        },
        vendors: {
          name: 'chunk-vendors',
          test: /[\\/]node_modules[\\/]/,
          chunks: 'initial',
          priority: 2,
          reuseExistingChunk: true,
          enforce: true
        }
      }
    });
  }
}