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 相关文章推荐
常见表单重复提交问题整理及解决方法
Nov 13 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
Apr 06 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
Jan 26 Javascript
seajs学习教程之基础篇
Oct 20 Javascript
jQuery特殊符号转义的实现
Nov 30 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
Jan 19 Javascript
详细AngularJs4的图片剪裁组件的实例
Jul 12 Javascript
vue组件编写之todolist组件实例详解
Jan 22 Javascript
JS实现不用中间变量temp 实现两个变量值得交换方法
Feb 04 Javascript
详解关于vue2.0工程发布上线操作步骤
Sep 27 Javascript
JavaScript中如何调用Java方法
Sep 16 Javascript
vue-router懒加载的3种方式汇总
Feb 28 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下安装配置fckeditor编辑器的方法
2011/03/02 PHP
PHP中使用localhost连接Mysql不成功的解决方法
2014/08/20 PHP
PHPUnit安装及使用示例
2014/10/29 PHP
thinkphp中的多表关联查询的实例详解
2017/10/12 PHP
web前端开发也需要日志
2010/12/09 Javascript
JavaScript定时器详解及实例
2013/08/01 Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
2014/01/02 Javascript
jQuery获取动态生成的元素示例
2014/06/15 Javascript
jQuery插件实现图片轮播特效
2016/06/16 Javascript
Angular.js中用ng-repeat-start实现自定义显示
2016/10/18 Javascript
浅析Ajax语法
2016/12/05 Javascript
js常用DOM方法详解
2017/02/04 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
2017/02/21 Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
2018/07/30 Javascript
React+EggJs实现断点续传的示例代码
2020/07/07 Javascript
JS代码实现页面切换效果
2021/01/10 Javascript
[01:07:17]EG vs Optic Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
[01:02:04]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
Python中的True,False条件判断实例分析
2015/01/12 Python
介绍Python中的一些高级编程技巧
2015/04/02 Python
实例讲解Python中函数的调用与定义
2016/03/14 Python
Python实现的爬虫刷回复功能示例
2018/06/07 Python
django解决跨域请求的问题详解
2019/01/20 Python
Opencv+Python实现图像运动模糊和高斯模糊的示例
2019/04/11 Python
Python+opencv+pyaudio实现带声音屏幕录制
2019/12/23 Python
Python函数__new__及__init__作用及区别解析
2020/08/31 Python
Html5之webcoekt播放JPEG图片流
2020/09/22 HTML / CSS
天巡全球:Skyscanner Global
2017/06/20 全球购物
eBay美国官网:eBay.com
2020/10/24 全球购物
巾帼文明岗申报材料
2014/05/01 职场文书
教师党的群众路线教育实践活动个人整改措施
2014/11/04 职场文书
班主任工作实习计划
2015/01/16 职场文书
安阳殷墟导游词
2015/02/10 职场文书
2015年教育实习工作总结
2015/04/24 职场文书
2016高校自主招生自荐信范文
2016/01/28 职场文书
Golang 如何实现函数的任意类型传参
2021/04/29 Golang