vue-router 懒加载优化

先安装 babel 动态引入插件

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

修改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,
],
});

  

修改 .babelrc 文件

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

开启gzip压缩

安装 gzip 压缩插件
npm install --save-dev compression-webpack-plugin

修改 config/index.js 文件

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

优化vue-cli构建的文件体积的更多相关文章

  1. [Vue 牛刀小试]:第十七章 - 优化 Vue CLI 3 构建的前端项目模板(1)- 基础项目模板介绍

    一.前言 在上一章中,我们开始通过 Vue CLI 去搭建属于自己的前端 Vue 项目模板,就像我们 .NET 程序员在使用 asp.net core 时一样,我们更多的会在框架基础上按照自己的开发习 ...

  2. @vue/cli 3 打包文件读取绝对路径处理

    @vue/cli 3 封装了 webpack.config.js,一般都在 vue.config.js 里面配置,官网不推荐在 webpack 的 output 处理,这里踩了一下坑,希望可以帮到后面 ...

  3. VUE学习笔记之vue cli 构建项目

    一.环境搭建: 1.安装node.js 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了.安装完成之后,打开命令行工具(win+r,然后输入cmd), ...

  4. @vue/cli 构建得项目eslint配置

    如下:package.json // package.json { "name": "ecommerce-mall-front", "version& ...

  5. vue cli 构建的 webpack 项目设置多页面

    1. webpack-dev-server下的设置(npm run dev) ./build/webpack.dev.conf.js 中,修改 new HtmlWebpackPlugin ,一个页面一 ...

  6. 使用Vue CLI构建Vue项目

    第一步:首先在控制台输入vue --version,如果出现版本号则进入第三步:否则进入第二步: 第二步:输入npm install cnpm -g --registry=https://regist ...

  7. @vue/cli 构建得项目eslint配置2

    使用ESLint+Prettier来统一前端代码风格 加分号还是不加分号?tab还是空格?你还在为代码风格与同事争论得面红耳赤吗? 正文之前,先看个段子放松一下: 去死吧!你这个异教徒! 想起自己刚入 ...

  8. vue/cli 3.0脚手架搭建

    在vue 2.9.6中,搭建vue-cli脚手架的流程是这样的: 首先 全局安装vue-cli,在cmd中输入命令: npm install --global vue-cli  安装成功:  安装完成 ...

  9. VUE cli 4.x下配置多页面以及同时配置支持element-ui及mint-ui并且优化首页文件大小。

    场景,公司的一个小型项目,需同时支持移动端和PC端.最开始考虑做两个独立的项目.但后来考虑到总共只有4个功能页面,布署起来相对麻烦.所以决定做在一个项目里. 1.升级vue-cli到4.x npm i ...

随机推荐

  1. highcharts 图例全选按钮方法

    $('#uncheckAll').click(function(){ var chart = $('#container').highcharts(); var series = chart.seri ...

  2. 「LOJ#6121」「网络流 24 题」孤岛营救问题(BFS

    题目描述 1944 年,特种兵麦克接到国防部的命令,要求立即赶赴太平洋上的一个孤岛,营救被敌军俘虏的大兵瑞恩.瑞恩被关押在一个迷宫里,迷宫地形复杂,但幸好麦克得到了迷宫的地形图.迷宫的外形是一个长方形 ...

  3. python快速上手教程

    python版本 python目前的版本分为2.7和3.5,两种版本的代码目前无法兼容,查看python版本号: python --version 基本数据类型 数字类型 整型和浮点型数据和其它编程语 ...

  4. POJ1287(最小生成树入门题)

    Networking Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 7753   Accepted: 4247 Descri ...

  5. 构造函数参数new class[0]的作用

    new Class[0];就是传一个长度为1的Class数组过去.内容为null. new Class[0]表示有零个元素的Class数组,即空数组,与传入null结果是一样的,都表示取得无参构造方法 ...

  6. python--环境变量的使用

    用python 环境变量取代sys.path echo -en "PYTHONPATH=$PYTHONPATH:~/demo" >>~/.bashrc export ~ ...

  7. 性能测试之Jmeter学习(八)

    本节主要学习:断言 JMeter也有像LR中的检查点,本节就来介绍下JMeter的检查点如何去实现. JMeter里面的检查点通过添加断言来完成. 检查点:上一节讲到,我们对用户名和密码进行了参数化, ...

  8. zoj 3640 Help Me Escape (概率dp 递归求期望)

    题目链接 Help Me Escape Time Limit: 2 Seconds      Memory Limit: 32768 KB Background     If thou doest w ...

  9. GitHub上最火爆!码代码不得不知的所有定律法则

    目录 介绍 定律 阿姆达尔定律 (Amdahl's Law) 布鲁克斯法则 (Brooks's Law) 康威定律 (Conway's Law) 侯世达定律 (Hofstadter's Law) 技术 ...

  10. 【问题总结】万万没想到,竟然栽在了List手里

    说明 昨天同事开发的时候遇到了一个奇怪的问题. 使用Guava做缓存,往里面存一个List,为了方便描述,称它为列表A,在另一个地方取出来,再跟列表B中的元素进行差集处理,简单来说,就像是下面这样: ...