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. 关系逻辑运算符---------&&和||

    1.&&符号 常规用法没什么好说的,我们来说说其不同于java的特殊之处 (1)&&符号究竟返回什么 我们知道,0,null,defined,null,NaN等都可以转 ...

  2. 淘宝双十一页面(Flexible)

    以下demo点我下载 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  3. NOI.AC 31 MST——整数划分相关的图论(生成树、哈希)

    题目:http://noi.ac/problem/31 模拟 kruscal 的建最小生成树的过程,我们应该把树边一条一条加进去:在加下一条之前先把权值在这一条到下一条的之间的那些边都连上.连的时候要 ...

  4. UVA 10559 Blocks——区间dp

    题目:https://www.luogu.org/problemnew/show/UVA10559 应该想到区间dp.但怎么设计状态? 因为连续的东西有分值,所以应该记录一下连续的有多少个. 只要记录 ...

  5. tyvj1659救援队——最小生成树

    题目:http://www.joyoi.cn/problem/tyvj-1659 想清楚了是非常简单的最小生成树: 1.树中每条边都会被走两边: 2.每个点会走度数遍,起点又多走一遍: 根据以上两条处 ...

  6. 响应式web设计,html5和css3实战(@author Ben Fraim)

    重定向 //请求重定向简化写法 response.sendRedirect("/day09/adv.html"); 转发 request.getRequestDispatcher( ...

  7. Java集合框架(1)

    Collection接口:它是Java集合框架的一个根接口,也是List.Set和Queue接口的父接口.同时它定义了可用于操作List.Set和Queue的方法—增删改查. Map接口:它提供了一种 ...

  8. [CentOS] 结合Nginx部署DotNetCore的demo项目【转载】

    部署前准备 1.VisualStudio2017+.netcore2.0SDK 2.Centos7.2 3.SecureCRT,Xftp(根据自己喜好) 创建WebApi项目 修改Program.cs ...

  9. RHEL6.3卸载OpenJDK操作示范:

    安装好的CentOS会自带OpenJdk,用命令 java -version ,会有下面的信息: java version "1.6.0" OpenJDK Runtime Envi ...

  10. Oracle tns 协议

    下面是翻译国外的一篇博客,原文连接如下: https://thesprawl.org/research/oracle-tns-protocol/ 简介 TNS(Transparent Network ...