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. Django:locals()小技巧

    locals()返回一个包含当前作用域里面的所有变量和它们的值的字典. 所以可以把views改写为 def current_datetime(request):     current_date = ...

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

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

  3. CRC16算法之三:CRC16-CCITT-MODBUS算法的java实现

    CRC16算法系列文章: CRC16算法之一:CRC16-CCITT-FALSE算法的java实现 CRC16算法之二:CRC16-CCITT-XMODEM算法的java实现 CRC16算法之三:CR ...

  4. 项目清理和删除svn信息(转)

    svn信息是根据文件夹里面的 .svn 文件夹保存相关配置的,删除此文件夹即可去掉svn信息: linux下: find . -type d -name ".svn"|xargs ...

  5. CodeForces 489C Given Length and Sum of Digits... (dfs)

    C. Given Length and Sum of Digits... time limit per test 1 second memory limit per test 256 megabyte ...

  6. 6、scala面向对象-对象

    一.对象 1.object object,相当于class的单个实例,通常在里面放一些静态的field或者method,第一次调用object的方法时,就会执行object的constructor, ...

  7. FormsAuthentication.Signout不能清楚服务器端cookie

    具体信息可以参考文章 https://support.microsoft.com/en-us/help/900111/the-formsauthentication.signout-method-do ...

  8. Keras AttributeError 'NoneType' object has no attribute '_inbound_nodes'

    问题说明: 首先呢,报这个错误的代码是这行代码: model = Model(inputs=input, outputs=output) 报错: AttributeError 'NoneType' o ...

  9. Unite 2017 干货整理 优化篇

    Unite 2017 干货整理 优化篇 2017年05月16日 将Unite 2017的一些演讲做了整理.  本篇有内存,CPU.GC.UI.渲染性能指标.Tips几个小节.  内容持续整理中. 内存 ...

  10. 浅淡Java多线程

    工作中一直忙着实现业务逻辑,多线程接触得不多.对多线程的认知,一直停留在Thread和Runnable上.最近心血来潮,找了几本多线程的书,不看不知道,一看吓一跳.原来我对多线程的理解是多么的肤浅.记 ...