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. java面试题07

    1.重载和重写的区别? 重载(Overload):(1)方法重载是让类以统一的方式处理不同类型数据的一种手段.多个同名函数同时存在,具有不同的参数个数/类型.重载Overloading是一个类中多态性 ...

  2. BZOJ1067&P2471 [SCOI2007]降雨量[线段树裸题+细节注意]

    dlntqlwsl 很裸的一道线段树题,被硬生生刷成了紫题..可能因为细节问题吧,我也栽了一次WA50分.不过这个隐藏条件真的对本菜鸡来说不易发现啊. 未知的年份连续的就看成一个就好了,把年份都离散化 ...

  3. P2051 [AHOI2009]中国象棋[线性DP]

    最近智商有点不在线.其实一直不在线. 题目 先是想用$f[i][j][k][0/1/2]$表示摆了i行时有j列空着,k列有了一个炮,且当下摆了0/1/2个的状态,转移方程写的出来但是极其繁琐.于是又设 ...

  4. 【LeetCode】312. Burst Balloons

    题目: Given n balloons, indexed from 0 to n-1. Each balloon is painted with a number on it represented ...

  5. 数据库关键字 (Oracle, SQL Server, DB2)

    Oracle SQL Server DB2 ! @@IDENTITY   DETERMINISTIC & ADD   DISALLOW      ( ALL   DISCONNECT    ) ...

  6. Oracle字符串截断

    字段.SUBSTR(string,start_position,[length]) 求子字符串,返回字符串解释:string 元字符串, start_position 开始位置(从0开始), leng ...

  7. Cocos2d-x v3.x and Xcode 6.x with ARM 64 Architecture

    转自:http://becomingindiedev.blogspot.com.es/2014/12/cocos2d-x-v3x-and-xcode-6x-with-arm-64.html Hi! W ...

  8. [转]sql where 1=1和 0=1 的作用

    sql where 1=1和 0=1 的作用 原文地址:http://www.cnblogs.com/junyuz/archive/2011/03/10/1979646.html where 1=1; ...

  9. HTTP缓存控制

    HTTP缓存控制总结   引言 通过网络获取内容既缓慢,成本又高.大的相应需要在客户端和服务器之间多次往返通信,这拖延了浏览器可以使用和处理内容的时间,同时也增加了通信的成本.因此,缓存和重用以前获取 ...

  10. 清除@SessionAttributes 网站实现退出登录

    在网站实现登录时,我认识了@SessionAttributes,对我来说是真的好用,@SessionAttributes注解可以使得模型中的数据存储一份到session域中. 这样在页面跳转时可以直接 ...