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. javascript 中的深复制 和 其实现方法

    首先,我们需要明白什么是深复制(侧重指对象方面)? 在javascript中,复制分为浅复制和深复制,个人理解,浅复制就是直接将引用复制,复制前后的两个对象指向同一个内存地址,对其中一个进行操作,另外 ...

  2. 开发商应用被App Store拒绝的79个原因

    转自:http://www.gamelook.com.cn/2014/10/186017 作为iOS开发者,估计有很多都遇到过APP提交到App Store被拒,然后这些被拒的原因多种多样,今天小编收 ...

  3. JS---设计简易日历

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  4. ENFP喜欢的职业

    外向(E)+直觉(N)+情感(F)+知觉(P). 1. 设计:设计本身很能满足ENFP对工作的各种要求,但是有个附加条件就是,这份工作不能让ENFP长时间的一个人工作,没机会和别人交流,也就是说有一个 ...

  5. string.Format的困惑

    今天在执行一个format时出现了这样一个问题,困惑了很久,就是 string.Format("{0:00}",“1”)结果是1 string.Format("{0:00 ...

  6. Android如何解析json数组对象

    import org.json.JSONArray; import org.json.JSONObject; //jsonData的数据格式:[{ "id": "27Jp ...

  7. SQL中的drop,truncate和delete的区别

    (1)   DELETE语句执行删除的过程是每次从表中删除一行,并且同时将该行的删除操作作为事务记录在日志中保存以便进行进行回滚操作.TRUNCATE TABLE 则一次性地从表中删除所有的数据并不把 ...

  8. go实现冒泡排序和快速排序

    项目结构 冒泡排序算法,源文件bubblesort.go package bubblesort // 冒泡排序 func BubbleSort(values []int) { for i := 0; ...

  9. 使用WSAIoctl获取AcceptEx函数指针 [转]

    Winsock2的其他供应商不一定会实现AcceptEx函数.同样情况也包括的其他Microsoft的特定APIs如TransmitFile,GetAcceptExSockAddrs以及其他Micro ...

  10. 如何部署JavaWeb应用

    准备 公网主机一台(推荐云服务器) 数据库安装包 JDK安装包 Tomcat安装包 WAR包(web应用包) 部署 安装所需软件,并测试基本环境是否可用 将WAR包解压至Tomcat目录下的webap ...