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 相关文章推荐
juqery 学习之四 筛选过滤
Nov 30 Javascript
一个简单的Node.js异步操作管理器分享
Apr 29 Javascript
详解JavaScript语法对{}处理的坑爹之处
Jun 05 Javascript
使用JS画图之点、线、面
Jan 12 Javascript
jquery实现简单Tab切换菜单效果
Jul 17 Javascript
浅谈$_FILES数组为空的原因
Feb 16 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
Nov 28 Javascript
React 路由懒加载的几种实现方案
Oct 23 Javascript
使用Vue实现调用接口加载页面初始数据
Oct 28 Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
Apr 25 Javascript
Node 模块原理与用法详解
May 13 Javascript
游戏开发中如何使用CocosCreator进行音效处理
Apr 14 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新手上路(八)
2006/10/09 PHP
打造超酷的PHP数据饼图效果实现代码
2011/11/23 PHP
PHP快速按行读取CSV大文件的封装类分享(也适用于其它超大文本文件)
2014/04/10 PHP
PHP面向对象之后期静态绑定功能介绍
2015/05/18 PHP
smarty简单应用实例
2015/11/03 PHP
php表单加入Token防止重复提交的方法分析
2016/10/10 PHP
PHP 使用位运算实现四则运算的代码
2021/03/09 PHP
javascrpt绑定事件之匿名函数无法解除绑定问题
2012/12/06 Javascript
JQuery事件e参数的方法preventDefault()取消默认行为
2013/09/26 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
2014/03/17 Javascript
JQuery实现的按钮倒计时效果
2015/12/23 Javascript
javascript时间排序算法实现活动秒杀倒计时效果
2021/01/28 Javascript
JQuery fileupload插件实现文件上传功能
2016/03/18 Javascript
Vue开发中整合axios的文件整理
2017/04/29 Javascript
nodejs读取本地中文json文件出现乱码解决方法
2018/10/10 NodeJs
微信小程序实现登录注册tab切换效果
2020/12/29 Javascript
配置一个vue3.0项目的完整步骤
2019/04/26 Javascript
electron 安装,调试,打包的具体使用
2019/11/06 Javascript
jQuery 判断元素是否存在然后按需加载内容的实现代码
2020/01/16 jQuery
JavaScript中的全局属性与方法深入解析
2020/06/14 Javascript
深入了解JS之作用域和闭包
2020/06/16 Javascript
js面向对象方式实现拖拽效果
2021/03/03 Javascript
python 生成器协程运算实例
2017/09/04 Python
python+matplotlib演示电偶极子实例代码
2018/01/12 Python
Django配置celery(非djcelery)执行异步任务和定时任务
2018/07/16 Python
Python基于datetime或time模块分别获取当前时间戳的方法实例
2019/02/19 Python
Python单元和文档测试实例详解
2019/04/11 Python
python [:3] 实现提取数组中的数
2019/11/27 Python
python try...finally...的实现方法
2020/11/25 Python
中东地区最大的奢侈品市场:The Luxury Closet
2019/04/09 全球购物
业绩考核岗位职责
2014/02/01 职场文书
森林病虫害防治方案
2014/06/02 职场文书
多媒体编辑专业毕业生求职信
2014/06/13 职场文书
2015年班干部工作总结
2015/04/29 职场文书
Pytorch 实现变量类型转换
2021/05/17 Python
tomcat下部署jenkins的方法
2022/05/06 Servers