优化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 ...
随机推荐
- 高性能MySQL之【第十六章MySQL用户工具】学习记录
接口工具: Msql Workbench http://www.mysql.com/products/workbench SQLyog http://www.webyog.c ...
- Python 2.7数据类型操作_20161010
为兼容python3.x版本 print 后都加了括号 python 数据类型 参考廖雪峰大神python2.7教程 http://www.liaoxuefeng.com/wiki/001374738 ...
- AI-Info-Micron-Insight:Micron 美光的技术帮助 CERN 解开宇宙奥秘
ylbtech-AI-Info-Micron-Insight:Micron 美光的技术帮助 CERN 解开宇宙奥秘 1.返回顶部 1. Micron 美光的技术帮助 CERN 解开宇宙奥秘 大约 14 ...
- python 带参数运行
近段时间学考,又爱上了游戏.LOL nba2k 使命召唤 哎! 因为使命召唤的原因 有时候会卡住 然后点关闭没用. 然后任务管理器打不开 所以我想写个杀掉这个程序的东西. 当然写一下是简单.但 ...
- 此microsoft fix it不适用于您的操作系统 解决方案
想卸载低版本的office,下载了一个office卸载程序,但是运行时提示 此microsoft fix it不适用于您的操作系统 错误,在网上找了下解决方案,如下: 右键点击“兼容性疑难检查”,等 ...
- LeetCode: 371 Sum of Two Integers(easy)
题目: Calculate the sum of two integers a and b, but you are not allowed to use the operator + and -. ...
- JAVA企业级开发-xml基础语法&约束&解析(04)
一.什么是xml html:超文本标记语言.它主要是用来封装页面上要显示的数据,最后通过浏览器来解析html文件,然后把数据展示在浏览器上.同样我们可以使用JS和DOM技术对html文件进行解析和操作 ...
- time元素 pubdate属性
time元素和pubdate属性 https://blog.csdn.net/ziy10231207/article/details/51883397
- [UE4]用C++如何创建Box Collision
http://www.dawnarc.com/2016/08/ue4%E7%94%A8c--%E5%A6%82%E4%BD%95%E5%88%9B%E5%BB%BAbox-collision/ 在蓝图 ...
- C#中Obsolete特性
一般在逼格比较高的程序员代码中常见此特性手法,他们因为某些原因不详注释掉原有的代码,用Obsolete [csharp] view plain copy class Program { static ...