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 相关文章推荐
推荐一些非常不错的javascript学习资源站点
Aug 29 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
Mar 11 Javascript
JS中for循序中延迟加载动态效果的具体实现
Aug 18 Javascript
js 弹出框只弹一次(二次修改之后的)
Nov 26 Javascript
a标签click和href执行顺序探讨
Jun 23 Javascript
原生javascript实现的分页插件pagenav
Aug 28 Javascript
使用AngularJS实现表单向导的方法
Jun 19 Javascript
JS基础随笔(菜鸟必看篇)
Jul 13 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
Aug 11 Javascript
vue项目中公用footer组件底部位置的适配问题
May 10 Javascript
Vue一次性简洁明了引入所有公共组件的方法
Nov 28 Javascript
浅谈js闭包理解
Mar 28 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
php-accelerator网站加速PHP缓冲的方法
2008/07/30 PHP
destoon设置自定义搜索的方法
2014/06/21 PHP
php实现上传图片文件代码
2015/07/19 PHP
基于jquery的一个拖拽到指定区域内的效果
2011/09/21 Javascript
遍历jquery对象的代码分享
2011/11/02 Javascript
js 用CreateElement动态创建标签示例
2013/11/20 Javascript
javascript面向对象特性代码实例
2014/06/12 Javascript
jquery库文件略庞大用纯js替换jquery的方法
2014/08/12 Javascript
JavaScript 动态加载脚本和样式的方法
2015/04/13 Javascript
AspNet中使用JQuery上传插件Uploadify详解
2015/05/20 Javascript
小程序实现抽奖动画
2020/04/16 Javascript
小程序红包雨的实现示例
2019/02/19 Javascript
微信小程序实现收货地址左滑删除
2020/11/18 Javascript
JavaScript如何判断对象有某属性
2020/07/03 Javascript
实现vuex原理的示例
2020/10/21 Javascript
python实现2014火车票查询代码分享
2014/01/10 Python
常用python数据类型转换函数总结
2014/03/11 Python
Python中查看文件名和文件路径
2017/03/31 Python
pandas groupby 分组取每组的前几行记录方法
2018/04/20 Python
Python OpenCV处理图像之滤镜和图像运算
2018/07/10 Python
Python爬虫将爬取的图片写入world文档的方法
2018/11/07 Python
python实现银联支付和支付宝支付接入
2019/05/07 Python
Python 循环终止语句的三种方法小结
2019/06/24 Python
新手常见Python错误及异常解决处理方案
2020/06/18 Python
详解如何在登录过期后跳出Ifram框架
2020/09/10 HTML / CSS
澳大利亚宠物商店:Petbarn
2017/11/18 全球购物
娱乐地球:Entertainment Earth
2020/01/08 全球购物
介绍一下gcc特性
2012/01/20 面试题
销售顾问的岗位职责
2013/11/13 职场文书
博士生入学考试推荐信
2013/11/17 职场文书
实习求职信
2013/12/01 职场文书
财务会计专业求职信范文
2013/12/31 职场文书
应聘护理专业毕业自荐书范文
2014/02/12 职场文书
2016元旦主持人开场白
2015/12/03 职场文书
某某店铺的开业庆典主持词范本
2019/11/25 职场文书
python基础详解之if循环语句
2021/04/24 Python