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下用gb2312编码解码实现方法
Dec 31 Javascript
jQuery 表单验证扩展代码(二)
Oct 20 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
May 07 Javascript
js实现滑动触屏事件监听的方法
May 05 Javascript
JS跨域解决方案之使用CORS实现跨域
Apr 14 Javascript
jQuery Easyui 验证两次密码输入是否相等
May 13 Javascript
微信小程序 POST请求的实例详解
Sep 29 Javascript
Node.js成为Web应用开发最佳选择的原因
Feb 05 Javascript
JavaScript实现多态和继承的封装操作示例
Aug 20 Javascript
layui 实现table翻页滚动条位置保持不变的例子
Sep 05 Javascript
Vue2.0 实现页面缓存和不缓存的方式
Nov 12 Javascript
如何在CocosCreator里画个炫酷的雷达图
Apr 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
PHP持久连接mysql_pconnect()函数使用介绍
2012/02/05 PHP
CI框架学习笔记(一) - 环境安装、基本术语和框架流程
2014/10/26 PHP
js常用排序实现代码
2010/12/28 Javascript
判断多个input type=file是否有已经选择好文件的代码
2012/05/23 Javascript
javascript事件函数中获得事件源的两种不错方法
2014/03/17 Javascript
jQuery实现鼠标滑过图片移动特效
2016/12/08 Javascript
详解webpack分离css单独打包
2017/06/21 Javascript
如何编写一个完整的Angular4 FormText 组件
2017/11/18 Javascript
Angular5升级RxJS到5.5.3报错:EmptyError: no elements in sequence的解决方法
2018/04/09 Javascript
微信小程序 可搜索的地址选择实现详解
2019/08/28 Javascript
浅谈vue的第一个commit分析
2020/06/08 Javascript
vue项目或网页上实现文字转换成语音播放功能
2020/06/09 Javascript
VSCode launch.json配置详细教程
2020/06/18 Javascript
在vue-cli3中使用axios获取本地json操作
2020/07/30 Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
2020/08/10 Javascript
Vue环境搭建+VSCode+Win10的详细教程
2020/08/19 Javascript
Python的高级Git库 Gittle
2014/09/22 Python
Python中非常实用的一些功能和函数分享
2015/02/14 Python
Python修改MP3文件的方法
2015/06/15 Python
Python多线程原理与用法详解
2018/08/20 Python
python elasticsearch从创建索引到写入数据的全过程
2019/08/04 Python
用Python制作音乐海报
2021/01/26 Python
CSS3 网页下拉菜单代码解释 中文翻译
2010/02/27 HTML / CSS
35款精致的 CSS3 和 HTML5 网页模板 推荐
2012/08/03 HTML / CSS
行政经理的岗位职责
2013/11/23 职场文书
银行优秀员工事迹
2014/02/06 职场文书
人事部经理岗位职责
2014/03/07 职场文书
元旦获奖感言
2014/03/08 职场文书
安全技术说明书
2014/05/09 职场文书
奥巴马英文演讲稿
2014/05/15 职场文书
年终奖发放方案
2014/06/02 职场文书
前台接待岗位职责范本
2015/04/03 职场文书
教师见习总结范文
2015/06/23 职场文书
医院见习总结
2015/06/24 职场文书
描述鲁迅的名言整理,一生受用
2019/08/08 职场文书
SQL 尚未定义空闲 CPU 条件 - OnIdle 作业计划将不起任何作用
2021/06/30 SQL Server