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 相关文章推荐
永不消失的title提示代码
Feb 15 Javascript
js prototype截取字符串函数
Apr 01 Javascript
js arguments,jcallee caller用法总结
Nov 30 Javascript
js中style.display=""无效的解决方法
Oct 30 Javascript
js生成随机数的过程解析
Nov 24 Javascript
基于javascript显示当前时间以及倒计时功能
Mar 18 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
May 31 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
Feb 27 Javascript
微信小程序中使用javascript 回调函数
May 11 Javascript
利用JS做网页特效_大图轮播(实例讲解)
Aug 09 Javascript
在vue中使用vuex,修改state的值示例
Nov 08 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
Jul 16 Javascript
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
apache mysql php 源码编译使用方法
2012/05/03 PHP
学习ExtJS table布局
2009/10/08 Javascript
jQuery代码优化 事件委托篇
2011/11/01 Javascript
jquery批量控制form禁用的代码
2013/08/06 Javascript
鼠标滚轮改变图片大小的示例代码
2013/11/20 Javascript
自定义的一个简单时尚js下拉选择框
2013/11/20 Javascript
jquery实现手机发送验证码的倒计时代码
2014/02/12 Javascript
Javascript字符串浏览器兼容问题分析
2014/12/01 Javascript
基于Javascript实现倒计时功能
2016/02/22 Javascript
jQuery checkbox选中问题之prop与attr注意点分析
2016/11/15 Javascript
jQuery特殊符号转义的实现
2016/11/30 Javascript
浅谈JS封闭函数、闭包、内置对象
2017/07/18 Javascript
vue页面切换到滚动页面显示顶部的实例
2018/03/13 Javascript
使用JS代码实现俄罗斯方块游戏
2018/08/03 Javascript
React Component存在的几种形式详解
2018/11/06 Javascript
layui表格 列自动适应大小失效的解决方法
2019/09/06 Javascript
nuxt 每个页面head标签内容设置方式
2020/11/05 Javascript
JavaScript代码实现微博批量取消关注功能
2021/02/05 Javascript
[51:17]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Django中更新多个对象数据与删除对象的方法
2015/07/17 Python
Python实现登录接口的示例代码
2017/07/21 Python
python requests post多层字典的方法
2018/12/27 Python
几款Python编译器比较与推荐(小结)
2020/10/15 Python
CSS3实现缺角矩形,折角矩形以及缺角边框
2019/12/20 HTML / CSS
HTML+CSS3+JS 实现的下拉菜单
2020/11/25 HTML / CSS
AmazeUI折叠式卡片布局,整合内容列表、表格组件实现
2020/08/20 HTML / CSS
客服实习的个人自我鉴定
2013/10/20 职场文书
小加工厂管理制度
2014/01/21 职场文书
同学会主持词
2014/03/18 职场文书
护士个人自我鉴定
2014/03/24 职场文书
农业生产宣传标语
2014/10/08 职场文书
服务员岗位职责
2015/02/03 职场文书
义卖募捐活动总结
2015/05/09 职场文书
倡议书怎么写?
2019/04/11 职场文书
怎么用Python识别手势数字
2021/06/07 Python
SpringBoot详解整合Redis缓存方法
2022/07/15 Java/Android