优化vue-cli构建的文件体积
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构建的文件体积的更多相关文章
- [Vue 牛刀小试]:第十七章 - 优化 Vue CLI 3 构建的前端项目模板(1)- 基础项目模板介绍
一.前言 在上一章中,我们开始通过 Vue CLI 去搭建属于自己的前端 Vue 项目模板,就像我们 .NET 程序员在使用 asp.net core 时一样,我们更多的会在框架基础上按照自己的开发习 ...
- @vue/cli 3 打包文件读取绝对路径处理
@vue/cli 3 封装了 webpack.config.js,一般都在 vue.config.js 里面配置,官网不推荐在 webpack 的 output 处理,这里踩了一下坑,希望可以帮到后面 ...
- VUE学习笔记之vue cli 构建项目
一.环境搭建: 1.安装node.js 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了.安装完成之后,打开命令行工具(win+r,然后输入cmd), ...
- @vue/cli 构建得项目eslint配置
如下:package.json // package.json { "name": "ecommerce-mall-front", "version& ...
- vue cli 构建的 webpack 项目设置多页面
1. webpack-dev-server下的设置(npm run dev) ./build/webpack.dev.conf.js 中,修改 new HtmlWebpackPlugin ,一个页面一 ...
- 使用Vue CLI构建Vue项目
第一步:首先在控制台输入vue --version,如果出现版本号则进入第三步:否则进入第二步: 第二步:输入npm install cnpm -g --registry=https://regist ...
- @vue/cli 构建得项目eslint配置2
使用ESLint+Prettier来统一前端代码风格 加分号还是不加分号?tab还是空格?你还在为代码风格与同事争论得面红耳赤吗? 正文之前,先看个段子放松一下: 去死吧!你这个异教徒! 想起自己刚入 ...
- vue/cli 3.0脚手架搭建
在vue 2.9.6中,搭建vue-cli脚手架的流程是这样的: 首先 全局安装vue-cli,在cmd中输入命令: npm install --global vue-cli 安装成功: 安装完成 ...
- VUE cli 4.x下配置多页面以及同时配置支持element-ui及mint-ui并且优化首页文件大小。
场景,公司的一个小型项目,需同时支持移动端和PC端.最开始考虑做两个独立的项目.但后来考虑到总共只有4个功能页面,布署起来相对麻烦.所以决定做在一个项目里. 1.升级vue-cli到4.x npm i ...
随机推荐
- highcharts 图例全选按钮方法
$('#uncheckAll').click(function(){ var chart = $('#container').highcharts(); var series = chart.seri ...
- 「LOJ#6121」「网络流 24 题」孤岛营救问题(BFS
题目描述 1944 年,特种兵麦克接到国防部的命令,要求立即赶赴太平洋上的一个孤岛,营救被敌军俘虏的大兵瑞恩.瑞恩被关押在一个迷宫里,迷宫地形复杂,但幸好麦克得到了迷宫的地形图.迷宫的外形是一个长方形 ...
- python快速上手教程
python版本 python目前的版本分为2.7和3.5,两种版本的代码目前无法兼容,查看python版本号: python --version 基本数据类型 数字类型 整型和浮点型数据和其它编程语 ...
- POJ1287(最小生成树入门题)
Networking Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 7753 Accepted: 4247 Descri ...
- 构造函数参数new class[0]的作用
new Class[0];就是传一个长度为1的Class数组过去.内容为null. new Class[0]表示有零个元素的Class数组,即空数组,与传入null结果是一样的,都表示取得无参构造方法 ...
- python--环境变量的使用
用python 环境变量取代sys.path echo -en "PYTHONPATH=$PYTHONPATH:~/demo" >>~/.bashrc export ~ ...
- 性能测试之Jmeter学习(八)
本节主要学习:断言 JMeter也有像LR中的检查点,本节就来介绍下JMeter的检查点如何去实现. JMeter里面的检查点通过添加断言来完成. 检查点:上一节讲到,我们对用户名和密码进行了参数化, ...
- zoj 3640 Help Me Escape (概率dp 递归求期望)
题目链接 Help Me Escape Time Limit: 2 Seconds Memory Limit: 32768 KB Background If thou doest w ...
- GitHub上最火爆!码代码不得不知的所有定律法则
目录 介绍 定律 阿姆达尔定律 (Amdahl's Law) 布鲁克斯法则 (Brooks's Law) 康威定律 (Conway's Law) 侯世达定律 (Hofstadter's Law) 技术 ...
- 【问题总结】万万没想到,竟然栽在了List手里
说明 昨天同事开发的时候遇到了一个奇怪的问题. 使用Guava做缓存,往里面存一个List,为了方便描述,称它为列表A,在另一个地方取出来,再跟列表B中的元素进行差集处理,简单来说,就像是下面这样: ...