Vue efficient building packaged and released

End of the project it, learn how to optimize packing items today,ヾ(◍ ° ∇ ° ◍) Techno゙
enter the following command at the command line to generate report.html in dist, open the can see every part size ~

npm run build -- --report

There moment.js in larger projects, but there is no language pack is used, the configuration as follows vue.config.js in, for ignoring the language pack. After the pack again less about 210k.

1. Optimization moment.js:

const webpack = require("webpack");
module.exports = {
  configureWebpack: {
    plugins: [new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)]
  },
};

Optimization moment.js above all language packs removed, but ant-design-vue I need to use them in the use of the Chinese package date picker components, all displayed in English if the language pack to remove the date picker. It is necessary to leave the Chinese package.

const webpack = require("webpack");
const path = require("path");
module.exports = {
  configureWebpack: {
    plugins: [
      // 只加载 `moment/locale/zh-cn.js` 
      new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn/)
    ],
  },
};

2. Optimization xlsx:
   since the data table deriving xlsx used, directly introduced into the Export2Excel.js "xlsx" modified "xlsx / dist / xlsx.mini.min.js", again less packing size ~ 710kb

import XLSX from 'xlsx'
// 修改为
import XLSX from 'xlsx/dist/xlsx.mini.min.js'

3. Routing lazy loading
   will be introduced app.js-demand routing. You can enhance the loading speed. Where / * webpackChunkName: "view" * / can see the size of the component after packaging.

// 普通引入
import View from "@/views/index";
// 路由懒加载
const View = () => import( /* webpackChunkName: "view" */"@/views/index");

4. ant-design-vue icon introduced on demand
   displayed in the ant design vue report.html display of icons is too large. So here we demand the introduction of the icon.
   First, a new icon for placement icons.js, path src / assets / js / icons.js. Use the following to see if you do not know the name of the icon may go node_modules introduced under @ ant-design / icons / lib / down.

export {
  default as questionCircle
} from "@ant-design/icons/lib/outline/QuestionCircleOutline";

Secondly, we need to modify vue.config.js. After re-packaged volume reduction. Here encountered a small problem, after the introduction of the icon in the notification message and icon will not show, forget the need to carefully review found that the introduction of an icon or not outline style icon.

module.exports = {
  publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
  configureWebpack: {
    resolve: {
      alias: {
        "@ant-design/icons/lib/dist$": path.resolve(
          __dirname,
          "./src/assets/js/icons.js"
        )
      }
    },
  },
 }

6. echarts CDN introduced
   echarts wants to introduce would have been introduced on demand. However, due to the map used in the project, introduced after the introduction of china.js demand it does not take effect, so the use of CDN introduced. After the uninstall echarts incorporated in the index.html:

<script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts.js"></script>
<script src="http://gallery.echartsjs.com/dep/echarts/map/js/china.js"></script>

Echarts introduced in the modified embodiment of vue.config.js.

module.exports = {
    externals: {
      echarts: "echarts"
    }
  },

7. map js file under dist folder to remove
   the configuration banning the production js in webpack the map file. map file can be seen in the face of bug directly in the browser source code for debugging. There is a need, then you can not turn off.

 productionSourceMap: false /* 禁止生成js的map文件 */,

Well, first here.
https://github.com/Gesj-yean/vue-demo-collection documented use more outstanding plug-ins. Students have time to look at my top blog can thank you very much.