Vue项目打包编译优化方案


Posted in Javascript onSeptember 16, 2020

1. 不生成.map文件

默认情况下,当我们执行 npm run build 命令打包完一个项目后,会得到一个dist目录,里面有一个js目录,存放了该项目编译后的所有js文件。

我们发现每个js文件都有一个相应的 .map 文件,它们仅是用来调试代码的,可以加快打包速度,但会增大打包体积,线上我们是不需要这个代码的。这里我们需要配置不生成map文件。

  • vue-cli2

config/index.js文件中,找到 productionSourceMap: true 这一行,将 true 改为 false。

  • vue-cli3

在 vue.config.js 中编写以下内容:

module.exports = {
 productionSourceMap: false
}

2. 按需引入第三方包

默认情况下,在打包完后的js文件中,vendor.xxx.js 这个文件是非常大的,它主要是我们用到的第三方包(vue、vue-router、vuex、axios、element-ui等等)。这里面的大部分是我们要用到的功能,而像 element-ui 这种,明显可以按块来分,我们只是用到了里面的个别组件,完全可以把它按需取出,没必要全部打包。

在 element-ui 的官网,介绍了按需引入的方法,借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。

3. 路由懒加载

默认情况下,在打包完后的js文件中,app.xxx.js 这个文件是非常大的,它主要是我们编写的一些组件。那么无法避免的问题就是:当用户访问网页的时候,第一次的请求要加载整个 app.xxx.js,当我们的项目比较复杂的时候,这个文件也是相当大的。

接下来我们要做的,就是路由懒加载。也就是当访问一个页面的时候,只加载当前组件相关的js资源,访问其它页面的时候,再加载相应的组件代码。

通过vue提供的路由懒加载功能,我们能将原来的一个 app.xxx.js 文件,分块分成多个。

① 首先根据官网的说明,我们需要安装一个插件

npm install --save-dev @babel/plugin-syntax-dynamic-import

② 然后在 babel.config.js 中配置如下内容(网上说的是 .babelrc 文件,这是以前的配置格式):

module.exports = {
 presets: ["@vue/app"],
 plugins: ["@babel/plugin-syntax-dynamic-import"]
};

③ 接下来修改路由加载组件部分的代码。

这是我们原来的路由写法:

router.js

import Vue from "vue";
import Router from "vue-router";

import Home from "./views/Home.vue";
import About from "./views/About.vue";
import Form from "./views/Form.vue";
import Table from "./views/Table.vue";
import NavMenu from "./views/NavMenu.vue";

Vue.use(Router);

export default new Router({
 mode: "history",
 base: process.env.BASE_URL,
 routes: [
 {
  path: "/",
  name: "home",
  component: Home
 },
 {
  path: "/about",
  name: "about",
  component: About
 },
 {
  path: "/form",
  name: "myForm",
  component: Form
 },
 {
  path: "/table",
  name: "myTable",
  component: Table
 },
 {
  path: "/nav_menu",
  name: "myNavMenu",
  component: NavMenu
 }
 ]
});

这是我们修改完的路由写法:

router.js

import Vue from "vue";
import Router from "vue-router";

const Home = () => import("./views/Home.vue");
const About = () => import("./views/About.vue");
const Form = () => import("./views/Form.vue");
const Table = () => import("./views/Table.vue");
const NavMenu = () => import("./views/NavMenu.vue");

Vue.use(Router);

export default new Router({
 mode: "history",
 base: process.env.BASE_URL,
 routes: [
 {
  path: "/",
  name: "home",
  component: Home
 },
 {
  path: "/about",
  name: "about",
  component: About
 },
 {
  path: "/form",
  name: "myForm",
  component: Form
 },
 {
  path: "/table",
  name: "myTable",
  component: Table
 },
 {
  path: "/nav_menu",
  name: "myNavMenu",
  component: NavMenu
 }
 ]
});

更细节的内容参见官方文档

以上就是Vue项目打包编译优化方案的详细内容,更多关于vue项目打包优化的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
最佳JS代码编写的14条技巧
Jan 09 Javascript
jQuery 淡出一个图像到另一个图像的实现代码
Jun 12 Javascript
node.js中的fs.linkSync方法使用说明
Dec 15 Javascript
JQuery中节点遍历方法实例
May 18 Javascript
基于jQuery实现表格内容的筛选功能
Aug 21 Javascript
jQuery判断是否存在滚动条的简单方法
Sep 17 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
Feb 12 Javascript
vue项目中的webpack-dev-sever配置方法
Dec 14 Javascript
vue+iview/elementUi实现城市多选
Mar 28 Javascript
ES6 Object属性新的写法实例小结
Jun 25 Javascript
js实现表格单列按字母排序
Aug 12 Javascript
vue动态合并单元格并添加小计合计功能示例
Nov 26 Vue.js
Vue封装Axios请求和拦截器的步骤
Sep 16 #Javascript
如何在JS文件中获取Vue组件
Sep 16 #Javascript
javascript自定义加载loading效果
Sep 15 #Javascript
图解JS原型和原型链实现原理
Sep 15 #Javascript
vue实现简单全选和反选功能
Sep 15 #Javascript
vscode 调试 node.js的方法步骤
Sep 15 #Javascript
js实现特别简单的钟表效果
Sep 14 #Javascript
You might like
php 数组的合并、拆分、区别取值函数集
2010/02/15 PHP
PHP三元运算符的结合性介绍
2012/01/10 PHP
9个实用的PHP代码片段分享
2015/01/22 PHP
新手常遇到的一些jquery问题整理
2010/08/16 Javascript
初学js 新节点的创建 删除 的步骤
2011/07/04 Javascript
JS字符串拼接在ie中都报错的解决方法
2014/03/27 Javascript
浅谈javascript的Array.prototype.slice.call
2015/08/31 Javascript
跟我学习javascript的基本类型和引用类型
2015/11/16 Javascript
对Angular.js Controller如何进行单元测试
2016/10/25 Javascript
彻底弄懂 JavaScript 执行机制
2018/10/23 Javascript
JavaScript中的null和undefined用法解析
2019/09/30 Javascript
详解JavaScript原型与原型链
2020/11/16 Javascript
[04:27]2014DOTA2国际邀请赛 NAVI战队官方纪录片
2014/07/21 DOTA
python使用xauth方式登录饭否网然后发消息
2014/04/11 Python
Python获取Windows或Linux主机名称通用函数分享
2014/11/22 Python
Python数据结构与算法之图的广度优先与深度优先搜索算法示例
2017/12/14 Python
MAC中PyCharm设置python3解释器
2017/12/15 Python
Python数据分析之双色球统计单个红和蓝球哪个比例高的方法
2018/02/03 Python
python如何实现反向迭代
2018/03/20 Python
python爬取哈尔滨天气信息
2018/07/14 Python
pyqt5与matplotlib的完美结合实例
2019/06/21 Python
Python 把序列转换为元组的函数tuple方法
2019/06/27 Python
Python 运行.py文件和交互式运行代码的区别详解
2019/07/02 Python
Python对列表的操作知识点详解
2019/08/20 Python
pytorch实现保证每次运行使用的随机数都相同
2020/02/20 Python
keras的siamese(孪生网络)实现案例
2020/06/12 Python
python 牛顿法实现逻辑回归(Logistic Regression)
2020/10/15 Python
英国领先的杂志订阅网站:Magazine.co.uk
2018/01/25 全球购物
King Apparel官网:英国街头服饰品牌
2019/09/05 全球购物
传播学专业毕业生自荐信
2013/11/04 职场文书
专业销售业务员求职信
2013/11/18 职场文书
高中军训感言500字
2014/02/24 职场文书
中介公司区域经理岗位职责范本
2014/03/02 职场文书
《给予树》教学反思
2016/03/03 职场文书
python可视化之颜色映射详解
2021/09/15 Python
HTML5基础学习之文本标签控制
2022/03/25 HTML / CSS