zoukankan      html  css  js  c++  java
  • vue-router 懒加载优化

    一、路由懒加载

    1、先安装 babel 动态引入插件

      npm install --save-dev babel-plugin-syntax-dynamic-import

    2、修改router/index.js

      异步引入组件

    import Vue from 'vue';
    import Router from 'vue-router';
     
    const index = () => import('@/pages-phone/index');
     
    const LOG = [
      {
        path: '/index',
        name: 'index',
        component: index,
      },
    ];
     
    Vue.use(Router);
     
    export default new Router({
      routes: [
        ...LOG,
      ],
    });

    3、修改 .babelrc 文件

    "plugins": [
      "syntax-dynamic-import"
    ],

    二、开启gzip压缩

    1、安装 gzip 压缩插件

      npm install --save-dev compression-webpack-plugin

    2、修改 config/index.js 文件

    // ...
    productionGzip: true,
    // ...

    3、npm run build执行后会发现每个js和css文件会压缩一个gz后缀的文件夹,浏览器如果支持g-zip 会自动查找有没有gz文件 找到了就加载gz然后本地解压 执行。

  • 相关阅读:
    Python Day13:开放封闭原则、函数装饰器、全局局部变量
    Python Day12
    Python Day11
    Python Day10
    drf框架
    drf框架
    drf框架
    drf框架
    vue框架
    vue框架
  • 原文地址:https://www.cnblogs.com/goloving/p/9157980.html
Copyright © 2011-2022 走看看