优化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 ...
随机推荐
- HiHoCoder1671 : 反转子串([Offer收割]编程练习赛41)(占位)
描述 给定一个只包含括号和小写字母的字符串S,例如S="a(bc(de)fg)hijk". 其中括号表示将里面的字符串翻转.(注意括号可能嵌套) 请你输出翻转之后的字符串. 输入 ...
- 如何卸载ubuntu软件
你的硬盘空间已经不太足够了?如果你使用的是Ubuntu操作系统,你可能想知道如何能够卸载过时.无用的程序.有几种方法可以卸载程序,包括图形化方法和命令行方法.参考本指南,采用最适合你的方法卸载程序. ...
- 【LeetCode】031. Next Permutation
题目: Implement next permutation, which rearranges numbers into the lexicographically next greater per ...
- HDU4348:To the moon
浅谈主席树:https://www.cnblogs.com/AKMer/p/9956734.html 浅谈标记永久化:https://www.cnblogs.com/AKMer/p/10137227. ...
- ie下的布局(layout)和拥有布局(hasLayout)
我们都知道ie浏览器和其他一些浏览器有很多表现不同的地方,这确实让人头疼,ie的表现与其他浏览器不同的原因之一就是我们今天要说的这个熟悉又陌生的东西:layout是一个专门针对显示引擎内部工作方式的概 ...
- 绝对路径VS相对路径
绝对路径:不必赘述,就是从盘符开始写直到找到你所需要的文件为止,把所有的目录写完整即可.但是在做网站的时候绝对不推荐用绝对路径,因为不可能服务器中的路径和在做设计时候所用的电脑的路径一致,也不可能说在 ...
- linux查询内存真是利用率
使用top工具查看到Suse Linux的内存占用率很大,可能97%以上,我知道这是Linux的内存使用机制,先将内存整个管理起来,需要的时候在分配给单个进程.但是如果我需要查看系统真实的内存占用率应 ...
- 生成分布式随机ID
经测试,最快的一种 public class Generator { // should be between 40 (34 years) and 42 (139 years) ; // should ...
- 浏览器原生 form 表单POST 数据的两种方式
我们在提交表单的时候,form表单参数中会有一个enctype的参数.enctype指定了HTTP请求的Content-Type. 常用有两种:application/x-www-form-urlen ...
- 《SpringBoot揭秘 快速构建微服务体系》读后感(三)
SpringApplication:SpringBoot程序启动的一站式解决方案 深入探索SpringApplication执行流程 因为书上的版本是1.2的,比较老,这里参考http://blog. ...