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 捕获窗口关闭事件
Jul 26 Javascript
javascript面向对象编程(一) 实例代码
Jun 25 Javascript
THREE.JS入门教程(3)着色器-下
Jan 24 Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
Jul 15 Javascript
深入理解JavaScript系列(28):设计模式之工厂模式详解
Mar 03 Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
Aug 11 Javascript
javascript判断firebug是否开启的方法
Nov 23 Javascript
vue.js从安装到搭建过程详解
Mar 17 Javascript
jQuery中map函数的两种方式
Apr 07 jQuery
js实现1,2,3,5数字按照概率生成
Sep 12 Javascript
详解几十行代码实现一个vue的状态管理
Jan 28 Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
Nov 25 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
短波问题解答
2021/02/28 无线电
php5.2 Json不能正确处理中文、GB编码的解决方法
2014/03/28 PHP
PHP魔术方法__GET、__SET使用实例
2014/11/25 PHP
thinkPHP5框架接口写法简单示例
2019/08/05 PHP
一个JS翻页效果
2007/07/23 Javascript
jquery五角星评分插件示例分享
2014/02/21 Javascript
利用jquery操作Radio方法小结
2014/10/20 Javascript
javascript 判断整数方法分享
2014/12/16 Javascript
jQuery背景插件backstretch使用指南
2015/04/21 Javascript
JS输出空格的简单实现方法
2016/09/08 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
2016/09/23 Javascript
Nodejs高扩展性的模板引擎 functmpl简介
2017/02/13 NodeJs
React Native中TabBarIOS的简单使用方法示例
2017/10/13 Javascript
详解微信小程序调起键盘性能优化
2018/07/24 Javascript
详解一个基于套接字实现长连接的express
2019/03/28 Javascript
vue视频播放插件vue-video-player的具体使用方法
2019/11/08 Javascript
echarts实现晶体球面投影的实例教程
2020/10/10 Javascript
在Python中使用NLTK库实现对词干的提取的教程
2015/04/08 Python
Python中Django框架下的staticfiles使用简介
2015/05/30 Python
Python学习教程之常用的内置函数大全
2017/07/14 Python
Django压缩静态文件的实现方法详析
2018/08/26 Python
Form表单及django的form表单的补充
2019/07/25 Python
python 浮点数四舍五入需要注意的地方
2020/08/18 Python
css3强大的动画效果animate使用说明及浏览器兼容介绍
2013/01/09 HTML / CSS
法国在线购买汽车轮胎网站:123pneus.fr
2019/02/25 全球购物
荷兰最大的鞋子、服装和运动折扣店:Bristol
2021/01/07 全球购物
EJB的基本架构
2016/09/22 面试题
护士实习自我鉴定
2013/10/22 职场文书
大二学期个人自我评价
2014/01/13 职场文书
项目合作意向书范本
2014/04/01 职场文书
四查四看自我剖析材料
2014/09/19 职场文书
春节慰问信范文
2015/02/15 职场文书
会计试用期自我评价
2015/03/10 职场文书
浅谈MySQL表空间回收的正确姿势
2021/10/05 MySQL
JavaScript ES6的函数拓展
2022/01/18 Javascript
django中websocket的具体使用
2022/01/22 Python