Vue edificio eficiente embalado y puesto en libertad

Final del proyecto es, aprender a optimizar embalaje de los objetos hoy,ヾ(◍ ° ∇ ° ◍) Tecno゙
introducir el siguiente comando en la línea de comandos para generar report.html en dist, abrir la lata ver cada tamaño de la pieza ~

npm run build -- --report

Hay moment.js en proyectos más grandes, pero no hay un paquete de idioma se utiliza, la configuración de la siguiente manera en vue.config.js, por ignorar el paquete de idioma. Después de que el paquete de nuevo menos de 210K.

1. moment.js de optimización:

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

moment.js de optimización más que todos los paquetes de idiomas retirados, pero necesito hormiga-diseño-vue de utilizarlas en el uso de los componentes de selector de fecha paquete chinos, todos exhibidos en Inglés si el paquete de idioma para eliminar el selector de fechas. Es necesario dejar el paquete chino.

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. Optimización xlsx:
   desde Xlsx utiliza la tabla de datos que se derivan, introducida directamente en los Export2Excel.js "Xlsx" modificado "xlsx / dist / xlsx.mini.min.js", de nuevo menos de embalaje tamaño ~ 710KB

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

3. Enrutamiento de carga diferida
   se introducirá enrutamiento app.js-demanda. Se puede mejorar la velocidad de carga. Donde / * webpackChunkName: "vista" * / puede ver el tamaño de la pieza después del envasado.

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

4. hormiga-diseño-vue icono introducido en la demanda
   está representada en la pantalla report.html diseño vue hormiga de iconos es demasiado grande. Así que aquí exigimos la introducción del icono.
   En primer lugar, un nuevo icono para icons.js colocación, src / ruta de activos / JS / icons.js. Utilice el siguiente para ver si usted no sabe el nombre del icono puede ir node_modules introducidos en virtud @ hormiga-diseño / iconos / lib / abajo.

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

En segundo lugar, tenemos que modificar vue.config.js. Después de la reducción del volumen de re-empaquetado. Aquí se encontró con un pequeño problema, después de la introducción del icono en el mensaje de notificación y el icono no se mostrará, olvidar la necesidad de revisar cuidadosamente encontró que la introducción de un icono o no estilo de esquema.

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 introdujo
   eCharts quiere introducir habría sido introducido en la demanda. Sin embargo, debido al mapa utilizado en el proyecto, introducido después de la introducción de china.js exigen que no entra en vigor, por lo que el uso de CDN introducido. Después de los eCharts desinstalación incorporados en el 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 introducidos en la forma de realización modificada de vue.config.js.

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

7. js archivo de mapa en la carpeta dist para eliminar
   la configuración de la prohibición de los js de producción en webpack el archivo de mapa. archivo de mapa se puede ver en el rostro de error directamente en el código fuente del navegador para la depuración. Hay una necesidad, entonces no se puede apagar.

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

Así, por primera vez aquí.
https://github.com/Gesj-yean/vue-demo-collection uso documentado más destacados plug-ins. Los estudiantes tienen tiempo para mirar mi blog cima se puede muchas gracias.