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. appium 特殊操作

      一.触摸操作   1.driver.tap([坐标],持续点击时间) 除了定位到元素的点击外,也可以通过tab实现坐标的点击 driver.tap(driver.tap([(216,1776)], ...

  2. Qt容器组件(一)之QGroupBox、QScrollArea、QToolBox、QTabWidget

    QT中有九种容器组件,分别是组合框QGroupBox.滚动区QScrollArea.工具箱QToolBox.选项卡QTabWidget.控件栈QWidgetStack.框架QFrame.组件QWidg ...

  3. Spring笔记03(Spring创建对象的三种方式)

    1.创建对象的三种方式和bean的生命周期的验证: Animal接口代码: package cn.pb.dao; /** * 动物接口 */ public interface Animal { //吃 ...

  4. AI-Info-Micron-Insight:Intelligence Accelerated™

    ylbtech-AI-Info-Micron-Insight:Intelligence Accelerated™ Intelligence Accelerated™ Micron Insight 大会 ...

  5. ELK安装配置简单使用

    ELK是三款软件的总称,包括了elasticsearch.logstash.kibana,其实在生产使用中,我们还需要使用到其他的更多辅助软件来更好更合理的收集展示数据. Elasticsearch: ...

  6. Linux做脚本定时任务(定时清理日志)

    无论一些面试问题,还是实际应用,都会用到虚拟机的定时任务.现做定时清理日志日志做一总结. 1.查看/etc/crontab文件. linux 系统则是由 cron (crond) 这个系统服务来控制的 ...

  7. Finding Comments in Source Code Using Regular Expressions

    Many text editors have advanced find (and replace) features. When I’m programming, I like to use an ...

  8. SelectObject()函数详解

    SelectObject 把一个对象(位图.画笔.画刷等)选入指定的设备描述表.新的对象代替同一类型的老对象. HGDIOBJ SelectObject(   HDC hdc,          // ...

  9. SCUT - 205 - 饲养牛 - 最大流

    https://scut.online/p/205 连着做所以一开始就觉得是网络流. 这种至多分配几次的很有网络流的特征. 一开始想从食物和饮料流向牛,但是怎么搞都不对. 其实可以从s流向食物,食物流 ...

  10. 洛谷 - P1631 - 序列合并 - 堆

    https://www.luogu.org/problemnew/show/P1631 序列a中每个数首先都和序列b中的最小元素配对(虽然好像不是很必要这么早插进来?) 每次从堆顶取出最小的和输出答案 ...